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等,下面的那些数据也会变化,目前需 ...
随机推荐
- CC攻击原理及防范方法
一. CC攻击的原理: CC攻击的原理就是攻击者控制某些主机不停地发大量数据包给对方服务器造成服务器资源耗尽,一直到宕机崩溃.CC主要是用来消耗服务器资源的,每个人都有这样的体验:当一个网页访问的人数 ...
- Git删除分支/恢复分支
• 删除一个已被终止的分支 如果需要删除的分支不是当前正在打开的分支,使用branch -d直接删除 git branch -d <branch_name> • 删除一个正打开的分支 如 ...
- Hello2 分析
一.打开GreetingServlet.java文件以查看它 hello2应用程序是一个web模块,hello2应用程序的行为几乎与hello1应用程序相同,但是它是使用Java Servlet技术实 ...
- API Gateway : Kong
what problems 多个服务要写自己的log,auth,对于比较耗时的,有时还要高流量限制. solution intro 单点部署的情况: why not just haproxy log ...
- java_basic_基础
变量 类型 运算符 条件 循环 调试 字符串 数组 从键盘输入数据 switch的用法 从变量接收值 从键盘接收值 输出到一个文件 基本类型的赋值与引用类型的赋值是不一样的 是将引用类型的地址 每一个 ...
- 谈谈 ServerFul 架构
我写了一篇文章 <自己实现一个线程池> https://www.cnblogs.com/KSongKing/p/9803935.html , 其实 不仅仅 是 线程池, 中间件 层 的 ...
- vue+elementui按需引入
转载自以下网址,仅作备忘之用:https://www.cnblogs.com/lwj820876312/p/9169457.html 基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 ...
- Hanlp1.7版本的新增功能一览
Hanlp1.7版本在去年下半年的时候就随大快的DKH1.6版本同时发布了,截至目前1.7大版本也更新到了1.7.1了.本篇分别就1.7.0和1.7.1中新增的功能做一个简单的汇总介绍. HanLP ...
- Python变量以及类型
变量的定义 在程序中,有时我们需要对2个数据进行求和,那么该怎样做呢? 大家类比一下现实生活中,比如去超市买东西,往往咱们需要一个菜篮子,用来进行存储物品,等到所有的物品都购买完成后,在收银台进行结账 ...
- jenkines的工作区目录位置查找
先找到jenkines的主目录 系统-系统配置 然后工作区在主目录的workspace文件夹里面