需求背景
项目需增加一个问卷调查功能，参与对象为某省各区县的校长、教师、家长和其他群众；用户需要对问卷调查结果进行实时统计，以柱状图的形式展现各区县的参与情况（实际参与人数和基准数的比例值）
-
柱状图数据保留两位小数点，且显示百分比值
-
柱状图显示一条红色的基准线，对应100.00%，用于标示问卷参与进度
-
点击区县柱状图中的某个区县的数据，弹出该地区各角色的问卷进度柱状图
具体效果如下图所示：
技术调研
从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。