微信小程序的图表插件，自认为echarts还是比较方便的

程序码

组件案例

安装使用

1. 下载代码，链接

2. ec-canvas 目录是需要的组件，pages里各案例代码

3. ec-canvas 直接复制添加到小程序文件内
   

4. json文件

     "usingComponents": {"ec-canvas": "../../component/ec-canvas/ec-canvas","van-popup": "/miniprogram_npm/@vant/weapp/popup/index"}
   }
   

5. js 文件

   import * as echarts from '../../component/ec-canvas/echarts';const app = getApp();function setOption(chart) {var data1 = {"name":"1","children":[{"name":"2"},{"name":"3","children":[{"name":"44"},{"name":"5"},{"name":"6"},{"name":"7"},{"name":"8"}]}]};const option = {series: [{type: 'tree',initialTreeDepth: -1,name: 'tree1',data: [data1],top: '5%',left: '20%',bottom: '2%',right: '15%',symbolSize: 10,symbol: 'circle',label: {normal: {position: 'left',verticalAlign: 'middle',align: 'right',color: 'black'}}}]};chart.setOption(option);
   }Page({onReady: function () {// 获取组件this.ecComponent = this.selectComponent('#mychart-dom-bar');},data: {ec: {// 将 lazyLoad 设为 true 后，需要手动初始化图表lazyLoad: true},isLoaded: false,isDisposed: false},// 点击按钮后初始化图表init: function () {this.ecComponent.init((canvas, width, height, dpr) => {// 获取组件的 canvas、width、height 后的回调函数// 在这里初始化图表const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});setOption(chart);// 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问this.chart = chart;this.setData({isLoaded: true,isDisposed: false});// 注意这里一定要返回 chart 实例，否则会影响事件处理等return chart;});},dispose: function () {if (this.chart) {this.chart.dispose();}this.setData({isDisposed: true});}
   });
   

6. wxml 文件

   
   {!isLoaded}}">加载图表{isLoaded && !isDisposed}}">释放图表{!isDisposed}}" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}">
   
   

7. 注意事项
   包含echats的Dom要在页面加载时构建好，否则init会找不到dom生成
   canvas在小程序内层级非常高，会覆盖底层，失去交互
   需要在弹窗内出现时，可以在页面dom加载后先隐藏canvas容器，根据业务需要出现时再显示