Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况。以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教。

排序后效果如下图:

(1)排序函数,这是一个简单的冒泡排序,首先计算横坐标各柱子的和,然后进行简单的冒泡排序(因为时间紧),可以选择其它效率更高的排序方法,原理都是一样的。

/**
* Echarts堆积柱状图排序
* @Author
* @Date 2019/2/25
* @Version 1.0
* @param obj
* @returns {*}
*
*/
function multi_bubbleSort(obj) {
let data0 = obj.data0;//横坐标数组
let data = new Array(data0.length).fill(0);//定义一组与横坐标数组相同大小的且全部为0的数组,用来存储堆积柱状图的和
let len = obj.data0.length;//横坐标数组长度
for (let k = 0; k < len; k++) {
for (let m = 0; m < obj.data1.length; m++) {
data[k] = Number(data[k]) + Number(obj.data1[m][k]);//求和,用来排序
}
}
//简单排序
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - 1 - i; j++) {
if (Number(data[j]) < Number(data[j + 1])) { //相邻元素两两对比
let temp = data[j + 1]; //元素交换
data[j + 1] = data[j];
data[j] = temp; //交换横坐标元素
let te = obj.data0[j + 1]; //元素交换
obj.data0[j + 1] = obj.data0[j];
obj.data0[j] = te; //交换各堆积柱状图元素
for (let m = 0; m < obj.data2.length; m++) {
let tem = obj.data2[m][j + 1];
obj.data2[m][j + 1] = obj.data2[m][j];
obj.data2[m][j] = tem;
}
}
}
}
return obj;
}

(2)核心点击事件,首先获取各legend图标是否点击,true:未点击;false:点击;其次清空需要重新渲染的数据,然后调用上面的排序函数,最后给清空的值添加数据,重新渲染图表。

//Echarts legend的点击事件以及数据渲染
tzjcChart.on('legendselectchanged', function (object) {
//获取legend各图例点击与否,true为未点击,false为点击;
let one = object.selected.一类;
let two = object.selected.二类;
let three = object.selected.三类;
let four = object.selected.四类;
let five = object.selected.五类; //获取option对象
let option = this.getOption();
//清空需要重新渲染的数据
option.xAxis[0].data = [];
option.series[0].data = [];
option.series[1].data = [];
option.series[2].data = [];
option.series[3].data = [];
option.series[4].data = []; //定义一个对象,data0:X轴坐标数组;data1:二维数组,存legend为true的series数组;data2:二维数组,存储所有的series数组
let obj = {
"data0": tzjcdata0,
"data1": [],
"data2": [tzjcdata1, tzjcdata2, tzjcdata3, tzjcdata4, tzjcdata5]
};
//判断legend图例是否为true,是就给对象obj的data1追加相应的series数组
if (one) {
obj.data1.push(tzjcdata1);
}
if (two) {
obj.data1.push(tzjcdata2);
}
if (three) {
obj.data1.push(tzjcdata3);
}
if (four) {
obj.data1.push(tzjcdata4);
}
if (five) {
obj.data1.push(tzjcdata5);
}
//调用排序方法,返回排序好的对象
let multi_obj = multi_bubbleSort(obj);
//给上面清空的数据添加值
option.xAxis[0].data = multi_obj.data0;
option.series[0].data = multi_obj.data2[0];
option.series[1].data = multi_obj.data2[1];
option.series[2].data = multi_obj.data2[2];
option.series[3].data = multi_obj.data2[3];
option.series[4].data = multi_obj.data2[4];
//调用setOption方法,重新渲染堆积柱状图
this.setOption(option);
});

Echarts堆积柱状图排序问题的更多相关文章

  1. Echarts-画堆积柱状图

    导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> 堆积图js $(f ...

  2. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  3. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  4. ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】

    一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...

  5. Thinkphp+ECharts生成柱状图

    1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...

  6. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  7. echarts分组柱状图的前后台处理 带平均线显示

    原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  8. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

  9. echarts使用——柱状图

    开发中,做报表统计的时候,很容易用到echarts实现折线图.饼状图.柱状图的绘制,使用echarts插件很简单,官网有教程实例,但主要是这些图需要的数据格式的转换. 我的柱状图实现效果: 第一部分 ...

随机推荐

  1. magento 的一些Sql查询

    1,模拟使用getName()获取产品名称的sql SELECT `value` AS product_name FROM yo_catalog_product_entity_varchar WHER ...

  2. Spring深入理解(一)

    Spring 框架的设计理念与设计模式分析 Spring核心组件 Spring 框架中的核心组件只有三个:Core.Context 和 Beans Spring 的设计理念 前面介绍了 Spring ...

  3. Tarjan算法各种&RMQ& POJ 3694

    关于tarjan 的思想可以在网上搜到,具体我也不太清楚,应该说自己理解也不深,下面是做题经验得到的一些模板. 其中有很多转载,包括BYVoid等,感谢让我转...望各路大神愿谅 有向图求连通分量的一 ...

  4. Codeforces Round #256 (Div. 2) B

    B. Suffix Structures Bizon the Champion isn't just a bison. He also is a favorite of the "Bizon ...

  5. jmeter函数和变量

    函数和变量广泛的应用在JMeter的传参过程,其中函数可以被认为是某种特殊的变量,它们可以被采样器或者其他测试元件所引用. 常用函数 1.__RamdomString() / __Ramdom() 获 ...

  6. Android 安装应用后点击打开带来的问题

    今天安装完APP的时候.界面会显示两个button,一个完毕键,一个打开键,点击Open键之后,外部打开应用.此时,我们点击HOME键.程序将会在后台. 然后再点击该桌面上应用程序的图标,app会自己 ...

  7. C#实体转换

    using System; using System.Collections.Generic; using System.Data; using System.Data.Common; using S ...

  8. bootstrap 操作指南

    1.table中显示级联类的属性显示 例如:java代码 public class MrTask { private Integer id: private User create_user; } p ...

  9. Cookies操作类

    实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...

  10. [BZOJ 3387] Fence Obstacle Course

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3387 [算法] f[i][0]表示从第i个栅栏的左端点走到原点的最少移动步数 f[i ...