我如何讓echarts實現了分組（原創插件echarts.group代碼分享）

前言

echarts是百度出品的一款很棒的前端圖表控件，被評爲「百度少有的良心產品」。能夠實現散點圖、折線圖、柱狀圖、地圖、餅圖、雷達圖、K線圖等等幾十種經常使用、不經常使用的圖表，效果酷炫。

示例地址：http://echarts.baidu.com/examples.html

因爲近期項目的須要，我開發了一款echarts插件，可讓序列series分組展現，下拉框選擇。這樣當series較多時，再也不被超長的圖例legend所困擾，並且能夠自帶全選功能。

效果

用做示例的數據，產品維度分爲襯衫、羊毛衫兩個，每一個產品具備2016年銷量、2017年銷量，每一個年度銷量有1-12月共12個點的數據。

HTML代碼以下：

View Code

 

1.沒有作分組時，襯衫、羊毛衫的數據混雜在一塊兒，難以辨別。

2.實現分組後，經過右上角的下拉選擇產品，還能夠選擇所有。

用法

//參數說明： //chartObj：echarts對象，注意不是dom對象 //selector: 下拉框控件jQuery對象 //options: 初始化chartObj的options參數 //groupProperty: 在series中充當分組代碼的字段名稱 //groupNameOfShowAll: 顯示所有的字符串 makeEchartsGroups (chartObj, selector, options, groupProperty, groupNameOfShowAll); //調用示例： makeEchartsGroups(myChart, $('#dropdown'), option, "group", "所有");

從這裏也能看出，第一，echarts.group依賴於jQuery。第二，它不是一個真正的echarts插件，只是一個js輔助方法。

這也是我下一步要改進的方向，但願各位能獻計獻策啊。

源代碼

送給你們啦，寫的很差:-)

 1 var makeEchartsGroups = function (chartObj, selector, options, groupProperty, groupNameOfShowAll)  2 {  3 var _chartObj = chartObj;  4 var _selector = selector;  5 var _options = options;  6 var _groupProperty = groupProperty;  7 var _groupNameOfShowAll = groupNameOfShowAll;  8 var _groups = [];  9 var _allSeries = options.series; 10 //每次更新數據所用的空模板 11 var _optionsTmp = deepCopy(options); 12 _optionsTmp.series = []; 13 _optionsTmp.legend.data = []; 14 15 //1. 生成下拉 16 if (_groupNameOfShowAll != undefined) { 17  _groups.push(_groupNameOfShowAll); 18  } 19 for (var i = 0; i < options.series.length; i++) { 20 var gname = options.series[i][groupProperty]; 21 if (_groups.indexOf(gname) == -1) { 22  _groups.push(gname); 23  } 24  } 25 for (var i = 0; i < _groups.length; i++) { 26 var gname = _groups[i]; 27 $(selector).append('<option value="' + gname + '">' + gname + '</option>'); 28  } 29 30 //2. 綁定下拉選擇事件 31 $(selector).change(function () { 32 updateChartGroup($(this).val()); 33  }); 34 35 //3. 初次更新 36 updateChartGroup(_groups[0]); 37 38 //深度拷貝 39 function deepCopy(obj) { 40 return $.extend(true, {}, obj); 41  }; 42 43 //更新echarts 44 function updateChartGroup(selectedValue) { 45 var newOptions = deepCopy(_optionsTmp); 46 //push series and legends 47 for (var j = 0; j < _allSeries.length; j++) { 48 if (selectedValue == _groupNameOfShowAll || _allSeries[j][_groupProperty] == selectedValue) { 49  newOptions.series.push(_allSeries[j]); 50  newOptions.legend.data.push(_allSeries[j].name); 51  } 52  } 53 54 _chartObj.setOption(newOptions, true); 55  }; 56 };

 基本原理很簡答，就是從options中提取groups，將options中的series作拆分，按照group分組，下拉選擇時生成新的options，扔給echarts，就是這樣。

若是有須要，還能夠對selector方式進行改進，用更炫酷的方式實現分組的選擇也是很容易作到的。

在開發中遇到問題，解決問題，而且用一種優雅的方式實現它，最後在這裏分享給你們，但願對你們有所幫助。