前言

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

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

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

效果

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

HTML代码如下:


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

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

我如何让echarts实现了分组(原创插件echarts.group代码分享)的更多相关文章

  1. echarts分组插件echarts.group代码分享

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

  2. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

  3. 数据图表插件echarts(二)

    前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...

  4. Solr分组聚合查询之Group

    摘要: Solr对结果的分组处理除了facet还可以使用group.Solr的group是根据某一字段对结果分组,将每一组内满足查询的结果按顺序返回. Group对比Facet Group和Facet ...

  5. react-native中使用Echarts,自己使用WebView封装Echarts经验

    1.工作中遇到的问题 我们在使用react-native肯定遇到过各种奇葩的问题,比如引入Echarts时候莫名报错,但是Echarts官网明显告诉我们可以懒加载的,这是因为基本上js大部分原生的组件 ...

  6. 百度开源项目插件 - Echarts 图表

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 使用echarts简单制作中国地图,echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  8. 百度开源插件echarts介绍及如何使用

    前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网提供了很多实例供参考:http://echarts.baidu.com/examples.html. ...

  9. echarts制作html和JavaScript的时钟和代码分析与注释

    1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...

随机推荐

  1. LeetCode: Linked List Cycle [141]

    [题目] Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usi ...

  2. Aptana插件在eclipse中安装

  3. .net core 控制台程序使用依赖注入(Autofac)

    1.Autofac IOC 容器 ,便于在其他类获取注入的对象 using System; using System.Collections.Generic; using System.Linq; u ...

  4. Android PagerSlidingTitleIconTabStrip 能够在title旁边加小图标的PagerSlidingTabStrip

    public class MainFragmentPagerAdapter extends FragmentPagerAdapter implements TitleIconTabProvider{ ...

  5. jquery ajax、get、post实例

    .post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , d ...

  6. window.print

    function contentPrint(contentArea) { var initBody = document.body.innerHTML; if ($("div"). ...

  7. django rest framework(10)

    1.权限 2.认证 3.访问频率限制 4.序列化 5.路由 6.视图 7.分页 8.解析器 9.渲染器 10.版本 面试题:你写的类都继承过哪些类? class Vive(object): class ...

  8. c++的set_unexpected不起作用

    代码是从:http://www.cplusplus.com/referen ... /?kw=set_unexpected找的 // set_unexpected example #include & ...

  9. ListView嵌套GridView使用详解及注意事项

    ListView嵌套GridView即ListView的每个Item中都包含一个GridView:需要注意的是由于ListView和GridView都是可滑动的控件. 所以需要自定义GridView, ...

  10. redis数据类型List的安全队列和不安全队列

    在学习RPOPLPUSH命令的时候,官方文档中有提到安全队列和不安全的队列,一开始没有看懂,现在理解了做个笔记. 一般情况下,我们可以借助List来实现消息队列,比如一个客户端通过命令LPUSH(BL ...