基於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元包郵哦；若是你們讀到這裏，但願你們前往淘寶店鋪看看，同時也但願你們能捧場^-^，在此先謝謝各位童鞋啦.

淘寶店鋪二維碼