前言
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 +