最清晰的微信小程序uni-app+vue3部署echarts图表的方法

微信小程序uni-app+vue3部署echarts图表的方法

最近想在基于uni-app+vue3框架下开发的微信小程序中部署图表，却发现官网中的部署方法在小程序中无法显示，后来查阅资料说微信小程序是无法读取DOM的，然后在网上查阅资料，翻阅了很多教程方法尝试了很多种方法才最终成功，然后现在把部署过程方法都讲讲。

第一步 安装echart依赖包

第一步，首先我们要安装echart依赖包

pnpm add echarts 

第二步 安装echarts小程序插件

第二步，下载和安装一个echarts小程序插件来使用。（十分重要）

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

或者说直接看gitee:
lime-echart: 百度图表 echarts，uniapp、taro 使用 echarts 图表，全面兼容各平台小程序、H5、APP、Nvue

然后将整个项目下载下来，里面有两个重要的文件夹，分别是components，static:

将components和static里面的文件分别都放到项目src下的components和static里面:

第三步 引入使用的方法

options中的图标数据可以直接去官网找:
echarts图表示例大全

首先给出效果图:

这里我给出参考代码:

<template>
  <view class="home">
    <!-- 动态生成表格 -->
    <view style="width: 100%; height: 408px;">
      <l-echart ref="chart" @finished="init"></l-echart>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import LEchart from '@/components/l-echart/l-echart.vue' //这里引入的是刚刚下载的插件的位置
import * as echarts from 'echarts' 
let chart = ref<any>(null); //这里是ref要对应上
const state = reactive<any>({
  option: {},
})
state.option = {   //填入官网中图表的option
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [25, 125],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
}

// 渲染完成
const init = () => { //渲染完成之后做的操作
  console.log("渲染完成");
}

onMounted(() => {
    //在挂载的时候渲染图表
  chart.value.init(echarts, chart => {
    chart.setOption(state.option);
  });
})
</script>

<style scoped>
.home {
  /* 样式可以根据需要调整 */
}
</style>

参考:
uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了_uniapp vue3 echarts-CSDN博客