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


下载代码,链接
ec-canvas 目录是需要的组件,pages里各案例代码
ec-canvas 直接复制添加到小程序文件内

json文件
"usingComponents": {"ec-canvas": "../../component/ec-canvas/ec-canvas","van-popup": "/miniprogram_npm/@vant/weapp/popup/index"}
}
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});}
});
wxml 文件
{!isDisposed}}" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}">
注意事项
包含echats的Dom要在页面加载时构建好,否则init会找不到dom生成
canvas在小程序内层级非常高,会覆盖底层,失去交互
需要在弹窗内出现时,可以在页面dom加载后先隐藏canvas容器,根据业务需要出现时再显示
上一篇:一张家庭教育表,价值连城!大彻大悟最新或2023(历届) 一张家庭教育表,价值连城!大彻大悟最新或2023(历届)
下一篇:6月17-18日,林青贤院长携手张文觉教授来浙江杭州传授《卓越家风建设》最新或2023(历届) 6月17-18日,林青贤院长携手张文觉教授来浙江杭州传授《卓越家风建设》最新或2023(历届)