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等,下面的那些数据也会变化,目前需 ...
随机推荐
- VC++、MFC Sqlite3数据库的使用
SQLite数据库是一种本地的轻型数据库,在存储一些本地的数据的时候,或者不需要用到Oracle,SQL2008之类的大型数据库的时候,Sqlite的优势就能够得到发挥.程序需要采集数据存储起来,可以 ...
- getfacl语法2
一.setfacl——设定文件访问控制列表语法: setfacl [-bkndRLP] { -m|-M|-x|-X ... } file ... -m, --modify=acl 更改文件的访问控制 ...
- React Native 继续学习
下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 ...
- 全栈爬取-Scrapy框架(CrawlSpider)
引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...
- 《JavaScript 设计模式与开发实战》第一部分(1、2、3章)笔记
第1章:面向对象的JavaScript 动态类型和鸭子类型 编程语言按照数据类型大体可以分为两类: ① 静态类型语言:在编译时便已确定变量的类型. ② 动态类型语言:变量类型要到程序运行的时候,待变量 ...
- Java方法 传值方式
这个问题是面试的时候经常会问到的一道题吧?这次做项目的过程中,其中一个同学因为无用了,导致了一个bug,不过是在提测前啦!本来我想借着这次机会分享一下java方法传参的机制,但是经过几天的学习,了解, ...
- ES6语法知识
let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...
- 2.1 Visio画图后,粘贴到word白边太宽
如下图所示:Visio2007画图后,图白边距很宽. 右击打开>将鼠标移动到画布边缘,按下Ctrl后鼠标变为双箭头,然后拖拽方格画布,拖拽合适的宽度保存即可.
- Java8 新特性学习
摘自:https://blog.csdn.net/shuaicihai/article/details/72615495 Lambda 表达式 Lambda 是一个匿名函数,我们可以把 Lambda ...
- 分页传参数的两种形式,url正则 ?id=1
目的: 打开http://127.0.0.1:8000/home 点击查看详情转到 http://127.0.0.1:8000/detail-1-1.html实现查看具体信息 一,利用url路由 ...