前言
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方式進行改進，用更炫酷的方式實現分組的選擇也是很容易做到的。
在開發中遇到問題，解決問題，並且用一種優雅的方式實現它，最后在這里分享給大家，希望對大家有所幫助。