微信小程序使用echarts显示图表

此随笔只适用于已经熟练掌握微信小程序和echars

怎么引入echars 请google或者必应

刚开始接触微信小程序 只想说

问题: 小程序中使用echars 遇到的问题

1. canvans层级穿透 [至今无解] new Date()
2. 接口放在onload中,本意是为了加载速度快一些, 页面渲染快给用户的体验更好但是当接口返回在echars渲染完毕之前, 就会导致调用echars的setOption方法报错
   What? 难道接口返回过快也有错了? 初始化速度比接口返回还要慢?

废话不多说直接上代码

wxml文件 这里要注意的是ec-canvas 一定要给一个高度

<view class="charts">
      <ec-canvas id="char1" canvas-id="chart1" ec="{{ ec }}"></ec-canvas>
      <ec-canvas id="char2" canvas-id="chart2" ec="{{ ec1 }}"></ec-canvas>

</view>

js文件

const charArray = []

function initChart(canvas, width, height) {
	let chart = echarts.init(canvas, null, {
		width: width,
		height: height,
	});
	canvas.setChart(chart);
	chart.setOption({});
	if (canvas.canvasId == "chart1") charArray["chart1"] = chart;
	if (canvas.canvasId == "chart2") charArray["chart2"] = chart;
	return chart;
};

ec: {
      onInit: initChart //初始化第一个图表
     },
ec1: {
      onInit: initChart //第二个图表
},

/**
 * 避免因chart未初始化导致无法加载图标
 * @param {*} charArray Chart字符串数组
 * @param {*} key 数组中的元素
 * @param {*} option Chat加载项
 */
export function waiteChartInit(charArray, key, option) {
  let count = 0
  const inerval = setInterval(() => {
    if (!!charArray[key]) {
      charArray[key].setOption(option)
      clearInterval(inerval)
      console.log(`Good Chart初始化成功!`);
    } else {
      count += 100
      if (count >= 2000) clearInterval(inerval)
      console.log("Failed Chart初始化失败!");
    }
  }, 100)
};

调用

chartOption 是一个方法 处理需要reload的数据, 返回一个option
你肯定很好奇,什么这么傻,数组和key分开传,直接传charArray[key]不就行了?  如果不分开,传递的就不是引用类型, 而是一个值, 他不会随着数据的变化而变化, 而分开传传递的是引用
if (res.status == "success") {
      waiteChartInit(charArray, "chart1", chartOption(res.data))
}

标签：初始化,canvas,微信,chart,echars,图表,charArray,key,echarts
来源： https://www.cnblogs.com/clearword/p/14268911.html