微信小程序ECharts插件多图表修改方法

ECharts是个啥

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

ECharts官网

为啥突然提到了ECharts

当然，因为它能在微信小程序里用…

之前用的wx-charts，但是感觉功能不够多，数据结构处理起来稍微有点不清晰，长宽自适应稍微有点问题（但不失为一个好插件）。

这次重做框架正好看到了就研究了一下。

本来用就用了，写这个博客是因为看到了这位大哥的方法…链接…我一时也不知道该说什么…

正题

先来看一下官方示例（文档请到官网看）

index.html

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

index.js

import * as echarts from '../../ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  var option = {};
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {onInit: initChart}
  }
});

无关紧要的内容就先去掉吧，option的内容官网非常详细，而且有教程…就不提了。

这里讲4个东西，canvas-id属性，ec变量、initChart方法、setOption方法。

canvas-id

wxml界面的id属性其实是不需要的，有canvas-id就行了，呐，不用说也知道这个属性很重要~

ec

ec其实就是个构造器…根本不需要像那个大哥定义ec1，ec2，…，也不用每个ec都单独搞个init…真是把事情弄得分复杂！

ec是公用的，就照着示例给的就行：

Page({
  data: {
    ec: {onInit: initChart}
  }
});

initChart

这个方法是映射到wx-canvas.js里的，里面的参数都不用管，他会自己加载！

代码大体也不需要更改，我们在里面加一句非常简单的代码。

var ec = {}
function initChart(canvas, width, height, dpr) {
	const chart = app.echarts.init(canvas, null, {
		width: width,
		height: height,
		devicePixelRatio: dpr
	});
	canvas.setChart(chart);
	ec[canvas.canvasId] = chart
	return chart;
}

来，仔细看，非常简单，就是canvas.canvasId这个东西！

前面初始化一个ec的map，然后用canvas-id做键值~妙啊！

setOption

setOption是个动态的数据加载方法，随便在哪里调用都是ok的~

DEMO

index.wxml

<view class="container" hidden="{{tab==2}}">
	<ec-canvas canvas-id="c1" ec="{{ec}}"></ec-canvas>
    <ec-canvas canvas-id="c2" ec="{{ec}}"></ec-canvas>
</view>

index.js

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var ec = {}
function initChart(canvas, width, height, dpr) {
	const chart = echarts.init(canvas, null, {
		width: width,
		height: height,
		devicePixelRatio: dpr
	});
	canvas.setChart(chart);
	ec[canvas.canvasId] = chart
	return chart;
}
Page({
	data: {
		ec: {
			onInit: initChart
		}
	},

	onLoad: function (options) {
		var options = {
			title: {
				text: "问卷完成率"
			},
			series: [{
				name: "问卷完成率",
				type: "gauge",
				detail: {
					formatter: "{value}%"
				},
				data: [{
					value: 50,
					name: "完成率"
				}]
			}]
		};
		ec.c1.setOption(options, true);
		ec.c2.setOption(options, true);
	}
});

最后补充一点，如果不想每次都引用sdk的话，可以直接在app.js引入

App({
	globalData: {},
    echarts: require("/utils/ec-canvas/echarts.min.js")
})

//这里就不用引入了
const app = getApp();
var ec = {}
function initChart(canvas, width, height, dpr) {
	const chart = app.echarts.init(canvas, null, {
		width: width,
		height: height,
		devicePixelRatio: dpr
	});
	canvas.setChart(chart);
	ec[canvas.canvasId] = chart
	return chart;
}