Echarts堆积柱状图排序问题
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堆积柱状图排序问题的更多相关文章
- Echarts-画堆积柱状图
导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> 堆积图js $(f ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- ECharts大屏可视化【词云,堆积柱状图,折线图,南丁格尔玫瑰图】
一.简介 参考ECharts快速入门:https://www.cnblogs.com/yszd/p/11166048.html 二.代码实现 <!DOCTYPE html> <htm ...
- Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts分组柱状图的前后台处理 带平均线显示
原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
- echarts使用——柱状图
开发中,做报表统计的时候,很容易用到echarts实现折线图.饼状图.柱状图的绘制,使用echarts插件很简单,官网有教程实例,但主要是这些图需要的数据格式的转换. 我的柱状图实现效果: 第一部分 ...
随机推荐
- 孟晓阳:IT运行监控系统设计与使用心得
http://www.cn-healthcare.com/article/20160325/content-482138.html
- Thread.suspend和println使线程死锁
Thread.suspend和println使线程死锁 package com.stono.thread2.page39; public class MyThread extends Thread{ ...
- Unable to read the project file 'client.csproj'. Could not load file or assembly 'Microsoft.Build.En
错误具体信息: Unable to read the project file 'client.csproj'. Could not load file or assembly 'Microsoft. ...
- LeetCode96_Unique Binary Search Trees(求1到n这些节点能够组成多少种不同的二叉查找树) Java题解
题目: Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For e ...
- use 在php 用法中的总结
1.命名空间 2.匿名函数 3.多继承 4.暂时想到这三个,如果有请补充在评论区
- 在Mac OSX系统的Docker机上启用Docker远程API功能
在Mac OSX系统的Docker机上启用Docker远程API功能 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs D ...
- 【CQOI 2009】 余数之和
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1257 [算法] k mod i = k - [k / i] * i 所以 (k mo ...
- python求两个列表的并集.交集.差集
求两个列表的差集 >>> a = [1,2,3] >>> b=[1,2] >>> ################################ ...
- VirtualBox里如何正确安装增强工具(图文详解)
不多说,直接上干货! 找到 复制到
- JS 判断数组包含某个字符
//arrDisable 数组 infoType 字符 if($.inArray(infoType, arrDisable)) { console.log('包含'); }