微信小程序动态加载图表[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;
    	});
  	}
})
相关推荐
说私域16 分钟前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的43 分钟前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
2301_805962933 小时前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero3 小时前
微信小程序121~130
微信小程序·小程序
難釋懷3 小时前
微信小程序WXSS 模板样式
微信小程序·小程序·notepad++
清颖~3 小时前
原生微信小程序研发,如何对图片进行统一管理?
微信小程序·小程序
军军君014 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
默魔9 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
阿俊-全栈开发21 小时前
crmeb多门店对接拉卡拉支付小程序聚合收银台集成全流程详解
小程序·php·拉卡拉聚合收银台·拉卡拉三方支付
難釋懷1 天前
微信小程序全局配置
微信小程序·小程序