基于echarts的一次图表实战

需求背景

项目需增长一个问卷调查功能，参与对象为某省各区县的校长、教师、家长和其余群众；用户须要对问卷调查结果进行实时统计，以柱状图的形式展示各区县的参与状况（实际参与人数和基准数的比例值）

1. 柱状图数据保留两位小数点，且显示百分比值

2. 柱状图显示一条红色的基准线，对应100.00%，用于标示问卷参与进度

3. 点击区县柱状图中的某个区县的数据，弹出该地区各角色的问卷进度柱状图

具体效果以下图所示：

技术调研

这里使用的是echarts 2.0，最新版本已是3.0了。

从echarts官方网站查找实现如下功能点的图表配置项：

1.echarts中如何绘制基准线？

series中的markLine实现绘制基准线，具体属性见以下：

series.markLine.data，分为起点和终点两个数据，其中将xAxis：-1|MAXNUMBER能够到达图表的边缘
data : [
    [
        {name: '标线1起点', value: 100, xAxis: 1, yAxis: 20},      // 当xAxis为类目轴时，数值1会被理解为类目轴的index，经过xAxis:-1|MAXNUMBER可让线到达grid边缘
        {name: '标线1终点', xAxis: '周三', yAxis: 20},             // 当xAxis为类目轴时，字符串'周三'会被理解为与类目轴的文本进行匹配
    ],
    [
        {name: '标线2起点', value: 200, xAxis: 10, yAxis: 20},     // 当xAxis或yAxis为数值轴时，无论传入是什么，都被理解为数值后作空间位置换算
        {name: '标线2终点', xAxis: 270, yAxis: 190}
    ],
    ...
]
series.markLine.symbol 起点和终点的图形符号，默认为	['circle', 'arrow']，二者相同则使用一个字符串表示，若是不显示symbol形状，那么能够指定为''
series.markLine.symbolSize 默认为	[2, 4]，一样若是需设置的大小同样，也能够指定一个数，若是指定为0那么不显示symbol形状
series.markLine.precision 默认精度为2
series.markLine.itemStyle 图形样式，可设置图表内图形的默认样式（normal）和强调样式（emphasis，悬浮时样式），其中label
normal: {
	color: function(params){
		return '#ff0000';
	},
	label: {
		show: true,
		position: 'right',
		textStyle: {
			color: "red"
		},
		formatter: '100.00%'
	}
},
emphasis:{
	color: function(params){
		return '#ff0000';
	}
}

2.echarts柱状图bar如何控制Y轴文本标签显示2位小数点的百分比值，且显示Y轴小标记？

Y轴文本标签对应axisLabel属性，利用formatter方法能够进行定制

axisLabel:{
	formatter:function(data){
		return data.toFixed(2)+'%';
	}
}

Y轴小标记对应axisTick属性，默认为false不显示，设置为true开启便可

3.echarts柱状图bar上面的数据文本标签显示2位小数点的百分比值

series.itemStyle.normal.label 经过formatter进行定制

itemStyle: {
	normal: {
		color: function(params) {
			return '#246AC9';
		},
		label: {
			show: true,
			position: 'top',
			textStyle: {
				color: "black"
			},
			formatter: '{c}%'
		}
	}
}

4.echarts柱状图bar点击事件绑定

利用on方法进行事件绑定，事件命名统一挂载到require('echarts/config').EVENT（非模块化为echarts.config.EVENT）命名空间下，建议使用此命名空间做为事件名引用

// 图表实例化------------------
// srcipt标签式引入
var myChart = echarts.init(document.getElementById('main'));
myChart.on(echarts.config.EVENT.CLICK||,function (param) {});

实现思路

通过以上针对echarts的调研，如今就可以轻松绘制出符合用户需求的柱状图表。数据经过ajax接口获取后，直接扔给option中的series.data便可。

另一个隐形需求是，若是当前问卷数据最大值没有到达100.00%时，基准线的Y轴刻度和柱状图最大值重叠，会对客户形成误解，见以下截图:

为了解决该问题，须要设置Y轴的最大值yMax，当柱状图最大数据值yMaxValue<=100.00%时，yMax设置为100.00%，不然使用yMaxValue。

总结

在以前的项目中，也使用过echarts，不过相隔很长时间了，须要从新回顾。此次完整地浏览echarts的官方文档后，不少问题都迎刃而解。对于第三方类库或者是实际项目，想快速上手仍是得先熟悉基本概念、背景，一遍看完不清楚再看一遍，直到清楚为止，切记浮躁！

完整代码能够访问这里查看demo。

本文同步在个人原创博客中。

---

广告时间

这些年最重要的感悟就是，无论工做怎样，都要好好对本身，特别是本身的身体；女朋友（已是老婆啦）很体谅我成天对着电脑工做，让我能天天坚持吃一个苹果；最近还开了一家网店，淘宝店铺名称叫“砀山水果经营店”，她家有个苹果园，每一年10月份是苹果的收获季节，刚摘下的苹果新鲜可口，又甜又脆，并且价格实惠，如今是10斤35元包邮哦；若是你们读到这里，但愿你们前往淘宝店铺看看，同时也但愿你们能捧场^-^，在此先谢谢各位童鞋啦.

淘宝店铺二维码