我如何让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中充当分组代码的字段名称