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

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;
    	});
  	}
})
相关推荐
说私域1 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔4 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun8 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54588 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui