Taro3+Vue3使用echarts

先上图，无图言吊

一.taro支持echarts

官方说明：https://taro-docs.jd.com/blog/2018-09-18-taro-1-0-0#支持引用小程序端第三方组件库

二.引入echarts-for-weixin插件

github地址: https://github.com/ecomfe/echarts-for-weixin

只引入ec-canvas文件夹下的wx-canvas.js

三.自定义 下载echarts

地址: https://echarts.apache.org/zh/builder.html

可自行选择版本，笔者测试了5.3.3和5.4.1都支持

下载后得到echarts.min.js

请根据需要自行选择需要的图表打包下载，我只选了默认的饼图、柱图、线图;

四.封装组件ec-canvas.vue

引入刚才下载的echarts.min.js和wx-canvas

import Taro from "@tarojs/taro";
import WxCanvas from "./wx-canvas";
import * as echarts from "./echarts-5.4.1.min";

五.封装e-chart.vue组件

1. 六.使用封装的组件

   七.易错点

   1. ec-canvas中使用Taro.createSelectorQuery()获取不到dom节点

   const query = Taro.createSelectorQuery();
         query
           .select(".ec-canvas")
           .fields({
             node: true,
             size: true
           })
           .exec(res=>{
       
   })

   Taro.createSelectorQuery()获取节点必须在页面渲染完成后，否则获取到的是null;

   在组件和页面里获取略有不同,Taro.createSelectorQuery().in(this)在页面里获取