我如何让echarts实现了分组（原创插件echarts.group代码分享）

迈不过友情╰ 2021-09-29 04:22 1003阅读 0赞

# 前言 #

echarts是百度出品的一款很棒的前端图表控件，被评为“百度少有的良心产品”。可以实现散点图、折线图、柱状图、地图、饼图、雷达图、K线图等等几十种常用、不常用的图表，效果酷炫。

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

由于近期项目的需要，我开发了一款echarts插件，可以让序列series分组展示，下拉框选择。这样当series较多时，不再被超长的图例legend所困扰，而且可以自带全选功能。

# 效果 #

用作示例的数据，产品维度分为衬衫、羊毛衫两个，每个产品具有2016年销量、2017年销量，每个年度销量有1-12月共12个点的数据。

HTML代码如下：

![ContractedBlock.gif][]

1.没有做分组时，衬衫、羊毛衫的数据混杂在一起，难以辨别。

![345405-20171217192506186-256619330.png][]

2.实现分组后，通过右上角的下拉选择产品，还可以选择全部。

![345405-20171217192615671-1583151792.png][]

![345405-20171217192041311-1123456205.png][]![345405-20171217192025014-1887662291.png][]

# 用法 #

//参数说明： //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方式进行改进，用更炫酷的方式实现分组的选择也是很容易做到的。

在开发中遇到问题，解决问题，并且用一种优雅的方式实现它，最后在这里分享给大家，希望对大家有所帮助。

转载于:https://www.cnblogs.com/pleiades/p/8052997.html

[ContractedBlock.gif]: /images/20210726/b9aa9f49d74340f9953226dc0c34443c.png
[345405-20171217192506186-256619330.png]: /images/20210726/2f8a8e071ee64adbb7261db2eaf8e6dd.png
[345405-20171217192615671-1583151792.png]: /images/20210726/44efff8120594d35b029c81213ee2f29.png
[345405-20171217192041311-1123456205.png]: https://images2017.cnblogs.com/blog/345405/201712/345405-20171217192041311-1123456205.png
[345405-20171217192025014-1887662291.png]: /images/20210726/a5c94bd3e9db4661986f4cba0824dd72.png