echart 单选legend 并排序
java代码
List<Map<String, Object>> AllList = null;
JSONArray jsonArray = JSONArray.fromObject(AllList);
pageOut(response, jsonArray.toString()); jsp页面
<div id="main" style="height:700px;"></div> js代码
var jsong=$.parseJSON(data);
tong(jsong);//json字符串
function tong(jsong){
//初始化并绑定html页面中的div显示统计图形
var myChart = echarts.init(document.getElementById("main"));
var list_count = new Array();
var list_dw = new Array();
var list_price = new Array();
//指定图标的配置项和数据
var option = {
color: ['#33b6e5', '#ff00ff','#0000cd'],
title: {
text: '采购商品排名图表',
subtext:'可以左右拖动查看'
},
tooltip : {
trigger: 'axis'//鼠标移动显示详细数据
},
legend: {
x:'right',
data:['数量','吨位','金额'],//相当于进货量及金额,退货量及金额
selected: {
'金额' : false,
'吨位' : false,
//不想显示的都设置成false
},
selectedMode : 'single'//单选
},
grid: {
left: "5%",
bottom: "5%",
containLabel: true
},
xAxis: {
type:'category',
splitLine : {
show : false
},
data:list_count,//相当于供应商名称list_name
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-20,//-30度角倾斜显示
}
},
yAxis: {
type:'value'
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 60
}
],
series: [
{
name: '数量',
type: 'bar',
barWidth : 100,//柱图宽度
data : (function() {
var data = [];
jsong.sort(function(a, b) {
if (a.zzs > b.zzs)
return -1; //降序
else
return 1;
});
jsong.forEach(function(item) {
console.log(1);
data.push(item.zzs);
list_count.push(item.itemname);
});
return data;
})()
/* data: list_count,//list_sum传输总数量数组
itemStyle : { normal: {label : {show: true, position: 'top'}}} */
},
{
name: '吨位',
type: 'bar',
barWidth : 100,//柱图宽度
data : (function() {
var data = [];
jsong.sort(function(a, b) {
if (a.zdw > b.zdw)
return -1; //降序
else
return 1; }); jsong.forEach(function(item) {
console.log(1);
data.push(item.zdw);
list_dw.push(item.itemname);
});
return data;
})()
/* data: list_dw,//list_sum传输总金额数组
itemStyle : { normal: {label : {show: true, position: 'top'}}} */
},
{
name: '金额',
type: 'bar',
barWidth : 100,//柱图宽度
data : (function() {
var data = [];
jsong.sort(function(a, b) {
if (a.zje > b.zje)
return -1; //降序
else
return 1; });
jsong.forEach(function(item) {
console.log(1);
data.push(item.zje);
list_price.push(item.itemname);
});
return data;
})()
/* data: list_price,//list_sum传输总金额数组
itemStyle : { normal: {label : {show: true, position: 'top'}}} */
}
]
};
myChart.on('legendselectchanged', function(params) {
var name = params.name;
if (name == '吨位') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = list_dw;
myChart.setOption(opt);
}
if (name == '数量') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = list_count;
myChart.setOption(opt);
}
if (name == '金额') {
var opt = myChart.getOption();
opt.xAxis[0]["data"] = list_price;
myChart.setOption(opt);
}
console.log(name);
});
//使用刚制定的配置和数据显示图表
myChart.setOption(option);
}
单选+重新排序借鉴:https://www.cnblogs.com/conserdao/p/6915980.html
echart 单选legend 并排序的更多相关文章
- echart改变legend样式及分页
legend: { type: 'scroll', orient: 'horizontal', bottom:0, left:'center', itemGap: 0, itemWidth: 10, ...
- echart的legend不显示问题
legend的data与series的name 两者必须同时存在,且数量和文字内容必须一致.
- echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等
这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...
- EasyUI、Struts2、Hibernate、spring 框架整合
经历了四个月的学习,中间过程曲折离奇,好在坚持下来了,也到了最后框架的整合中间过程也只有自己能体会了. 接下来开始说一下整合中的问题和技巧: 1, jar包导入 c3p0(2个).jdbc(1个). ...
- JavasScript实现调查问卷插件
原文:JavasScript实现调查问卷插件 鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来 ...
- echarts纵坐标使用科学计数法表示
最近做项目使用echart画图,发现纵坐标的刻度太大或太小的情况,导致页面十分难看,甚至出现遮挡的情况,所以想办法用科学计数法表示 代码如下: var option = { title: Echart ...
- 基于bootstrap table配置的二次封装
准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...
- 典藏版Web功能测试用例库
界面显示 初始界面元素:title.内容,默认值.必填项(红*) 样式美观 排版规范 字体统一 编辑页面有光标,定位在第一个可编辑文本框 内容过多时,滚动条 loading ...
- EChart处理三维数据做图表、多维legend图例处理
处理三维数据做图表,比如返回的数据就是一个个list,list里面某几个数据同属于一个维度,项目中的实例效果如下: 上面的khfx会有多个,比如db1.db2.db3等,下面的那些数据也会变化,目前需 ...
随机推荐
- 2019-04-10-day029-粘包处理
内容回顾 osi五层协议 不是真实存在的,只是抽象出来的模型 应用层 传输层 TCP/UDP TCP :全双工,可靠的,面向连接的,速度慢,对数据大小没有限制 建立连接 :三次握手 SYN ACK 断 ...
- 写了一个Java的简单缓存模型
缓存操作接口 /** * 缓存操作接口 * * @author xiudong * * @param <T> */ public interface Cache<T> { /* ...
- switch和数组两种方法对不同输入做不同响应
#include<stdio.h> int main(void) { int i; scanf("%d",&i); switch(i) { : printf(& ...
- (28)django的中间件(自定义中间件和防范跨站请求伪造攻击)-重要的概念
Django中间件和中间件不是同一种东西 什么是中间件:中间件是一个很大的概念,只要程序和程序之间还有一层程序,用来处理两个程序的整个交互过程的请求.数据等等就叫中间件 Django中间件:是介于re ...
- git 从分支上创建一个分支
相关连接: 创建于合并分支:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00 ...
- for break
public static void main(String[] args) { aaa: for (int j = 0; j < 2; j++) { System.out.println(&q ...
- PythonStudy——内存管理之垃圾回收 Memory management Garbage collection
内存管理 引用计数:垃圾回收机制的依据 # 1.变量的值被引用,该值的引用计数 +1# 2.变量的值被解绑,该值的引用计数 -1# 3.引用计数为0时就会被垃圾回收机制回收 标记清除:解决循环引用问题 ...
- 第一章 C#入门(Windows窗体应用程序)(二)
C#窗体应用程序(二) [案例]设计登录界面,效果如下: [案例实现步骤] 1.新建项目(Windows控制台应用程序 文件→新建→项目:选择“项目类型”为Visual C#,“模板”为Windows ...
- ADS1.2和JlinkV8 erro starting external process,Process error code 87(0x57)参数错误
ADS1.2和JlinkV8 erro starting external process,Process error code 87(0x57)参数错误 网上的大致说法是说这个跟W7有关 说是将I ...
- Python变量以及类型
变量的定义 在程序中,有时我们需要对2个数据进行求和,那么该怎样做呢? 大家类比一下现实生活中,比如去超市买东西,往往咱们需要一个菜篮子,用来进行存储物品,等到所有的物品都购买完成后,在收银台进行结账 ...