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

安格会魔法2023-12-08 20:36

1.引入Echarts

（1）将ec-canvas文件拷贝下来放到你自己的项目中：

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

json 复制代码

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

2.使用Echarts

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

html 复制代码

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

在wxss设置宽度和高度

css 复制代码

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

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

js 复制代码

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 并 更新数据option
    	this.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;
    	});
  	}
})