现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2017年12月18日| 热度:℃ | 评论: |参与:

前言

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

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

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

效果

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

 

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辅助方法。

这也是我下一步要改进的方向,希望各位能献计献策啊。

源代码

送给大家啦,写的不好:-)

var makeEchartsGroups = function (chartObj, selector, options, groupProperty, groupNameOfShowAll)
{
    var _chartObj = chartObj;
    var _selector = selector;
    var _options = options;
    var _groupProperty = groupProperty;
    var _groupNameOfShowAll = groupNameOfShowAll;
    var _groups = [];
    var _allSeries = options.series;
    //每次更新数据所用的空模板
    var _optionsTmp = deepCopy(options);
    _optionsTmp.series = [];
    _optionsTmp.legend.data = [];
    //1. 生成下拉
    if (_groupNameOfShowAll != undefined) {
        _groups.push(_groupNameOfShowAll);
    }
    for (var i = 0; i < options.series.length; i++) {
        var gname = options.series[i][groupProperty];
        if (_groups.indexOf(gname) == -1) {
            _groups.push(gname);
        }
    }
    for (var i = 0; i < _groups.length; i++) {
        var gname = _groups[i];
        $(selector).append('<option value="' + gname + '">' + gname + '</option>');
    }
    //2. 绑定下拉选择事件
    $(selector).change(function () {
        updateChartGroup($(this).val());
    });
    //3. 初次更新
    updateChartGroup(_groups[0]);
    //深度拷贝
    function deepCopy(obj) {
        return $.extend(true, {}, obj);
    };
    //更新echarts
    function updateChartGroup(selectedValue) {
        var newOptions = deepCopy(_optionsTmp);
        //push series and legends
        for (var j = 0; j < _allSeries.length; j++) {
            if (selectedValue == _groupNameOfShowAll || _allSeries[j][_groupProperty] == selectedValue) {
                newOptions.series.push(_allSeries[j]);
                newOptions.legend.data.push(_allSeries[j].name);
            }
        }
        _chartObj.setOption(newOptions, true);
    };
};

基本原理很简答,就是从options中提取groups,将options中的series做拆分,按照group分组,下拉选择时生成新的options,扔给echarts,就是这样。

如果有需要,还可以对selector方式进行改进,用更炫酷的方式实现分组的选择也是很容易做到的。

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


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询