uniapp导入echarts类库开发图表类小程序vue3+ts+vite_uni-app vue ts 使用 echarts-优快云博客

本文详细介绍了如何在微信小程序和抖音小程序中使用Echarts插件，包括下载、安装、导入组件以及配置图表的过程，适用于HBuilder和VSCode开发环境。

在这里插入图片描述
微信小程序和抖音小程序等都支持：

使用步骤如下
第一步：下载插件包

下载echarts插件包，并导入到项目中，然后使用插件中的组件创建容器，并导入数据就可以了。

echarts插件包地址：echarts - DCloud 插件市场

如果你是使用hbuilder写的，可以直接导入，如果你是vscode写的，就下载压缩包：
在这里插入图片描述
下载好解压然后将解压后的组件导入到项目的components下面：

并且将静态资源放到静态文件夹中：

第二步：安装echarts包

pnpm add echarts
-or-
npm install echarts

第三步：在页面中导入依赖并运行

然后在页面中导入这个LEchart这个组件：
在这里插入图片描述
将依赖按照不同的平台区分导入到页面组件中：下面是我的页面源代码

<template>
  <view>
    <view class="title">我的主页</view>
    <view>
      <LEchart class="echart" ref="chart" @finished="init"></LEchart>
    </view>
  </view>
</template>
 
<script setup>
import LEchart from '@/components/l-echart/l-echart.vue'
// lime-echart是一个demo的组件，用于测试组件
// import LEchart from '@/components/lime-echart/lime-echart.vue'
import {
     
      onMounted, reactive, ref } from "vue"
// nvue 不需要引入
// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
const echarts = require('../../static/echarts.min');
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
import * as echarts from 'echarts';
// #endif