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

 

前言

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

示例地址:upload/201712181111061504.gif" alt="" style="margin: 0px; padding: 0px 5px 0px 0px; border: 0px; vertical-align: middle; max-width: 900px;" />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 +
                    
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信