当前位置：首页 > news >正文

微信小程序动态加载图表[echart]

news 2025/8/5 11:26:58

1.引入Echarts
（1）将ec-canvas文件拷贝下来放到你自己的项目中：
在这里插入图片描述

（2）在你需要使用Echarts的页面的json文件中引入Echarts

"usingComponents": {"ec-canvas": "../utils/ec-canvas/ec-canvas"}

2.使用Echarts
在需要显示图表的页面的wxml中使用Echarts。

<view><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" />
</view>

在wxss设置宽度和高度

ec-canvas {width: 100%;height: 100%;
}

3.js页面设置Echarts以及动态刷新
有三个注意的点：
1：独立option
2：onReady获取节点
3：更新数据：同时更新init和option

import * as echarts from "../utils/ec-canvas/echarts";
// 1、独立option
function setOptionData(chart, name1, name2, xdata, ydata) {const option = {tooltip: {trigger: "axis",backgroundColor: "#092646",axisPointer: {type: "shadow",label: {show: true,backgroundColor: "#7B7DDC",color: "#FFF",},},textStyle: {color: "white", //设置文字颜色},},legend: {data: [name1, name2],itemWidth: 20,itemHeight: 10,textStyle: {color: "#B4B4B4",fontSize: 10,},top: "1%",},grid: {top: "12%",left: "1%",right: "5%",bottom: "2%",containLabel: true,},xAxis: {data: xdata,axisLine: {lineStyle: {color: "rgba(255,255,255,.3)",},},axisLabel: {color: "rgba(255,255,255,.5)",fontSize: 10,},axisTick: {show: false,},},yAxis: {x: "center",type: "value",splitLine: { show: false },axisLabel: {color: "rgba(255,255,255,.5)",fontSize: 10,},splitLine: {show: true,lineStyle: {color: "#195384",},},},series: [{name: name2,type: "bar",barWidth: 20,itemStyle: {normal: {barBorderRadius: 5,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#956FD4" },{ offset: 1, color: "#3EACE5" },]),},},data: ydata,}],};chart.setOption(option);
}
Page({data:{ec: {onInit: null,lazyLoad: true}},onLoad(){this.getStatData()},onReady() {// 2、在页面渲染后拿到节点this.oneComponent = this.selectComponent('#mychart-dom-line');},getStatData(){const name1 = "name1"const name2 = "name2"const xdata = ['a','b','c']const ydata = [4,5,6]this.initChart(name1, name2, xdata, ydata)},initChart(name1, name2, xdata, ydata) {// 3、根据拿到的节点重新init 并 更新数据optionthis.oneComponent.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});setOptionData(chart, name1, name2, xdata, ydata)this.chart = chart;return chart;});}
})