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 并排序的更多相关文章

  1. echart改变legend样式及分页

    legend: { type: 'scroll', orient: 'horizontal', bottom:0, left:'center', itemGap: 0, itemWidth: 10, ...

  2. echart的legend不显示问题

    legend的data与series的name 两者必须同时存在,且数量和文字内容必须一致.

  3. echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  4. EasyUI、Struts2、Hibernate、spring 框架整合

    经历了四个月的学习,中间过程曲折离奇,好在坚持下来了,也到了最后框架的整合中间过程也只有自己能体会了. 接下来开始说一下整合中的问题和技巧: 1,  jar包导入 c3p0(2个).jdbc(1个). ...

  5. JavasScript实现调查问卷插件

    原文:JavasScript实现调查问卷插件 鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来 ...

  6. echarts纵坐标使用科学计数法表示

    最近做项目使用echart画图,发现纵坐标的刻度太大或太小的情况,导致页面十分难看,甚至出现遮挡的情况,所以想办法用科学计数法表示 代码如下: var option = { title: Echart ...

  7. 基于bootstrap table配置的二次封装

    准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...

  8. 典藏版Web功能测试用例库

    界面显示 ​ 初始界面元素:title.内容,默认值.必填项(红*) ​ 样式美观 ​ 排版规范 ​ 字体统一 ​ 编辑页面有光标,定位在第一个可编辑文本框 ​ 内容过多时,滚动条 ​ loading ...

  9. EChart处理三维数据做图表、多维legend图例处理

    处理三维数据做图表,比如返回的数据就是一个个list,list里面某几个数据同属于一个维度,项目中的实例效果如下: 上面的khfx会有多个,比如db1.db2.db3等,下面的那些数据也会变化,目前需 ...

随机推荐

  1. wordpress搭建自己的博客~

    去官方网站下载wordpress,并解压缩.下载链接:https://cn.wordpress.org/ wordpress是一款开源的PHP框架,搭建个人博客网站最实用的选择之一,甚至你都不需要懂P ...

  2. SpringBoot(四)thymeleaf+MyBatis+MySql

    接着上一节 1.第一步:在pom文件中添加 <!-- MyBatis --> <dependency> <groupId>org.mybatis.spring.bo ...

  3. 剑指Offer 22. 从上往下打印二叉树 (二叉树)

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目地址 https://www.nowcoder.com/practice/7fe2212963db4790b57431d9ed25 ...

  4. Windows10 VS2017 C++ Server Socket简单服务器端与客户端

    服务端: #include "pch.h" #include<iostream> #include<WinSock2.h> #include <Ws2 ...

  5. linux 内存使用情况详解

    一:首先是先登录 二:查看当前目录 命令:df -h 三:查看具体文件夹占用情况 命令:du --max-depth=1 -h  /data/ 或者:为了快算显示,同时也只是想查看目录整体占用大小 命 ...

  6. IOS Block代码块的定义与使用

    代码块的本质是和其他的变量类似,不同的是,代码块存储的数据是一个函数体.使用代码块,你可以像调用其他标准函数一样的调用,可以传入参数,并得到返回值.     脱字符是代码块的语法标记.下图表示代码块的 ...

  7. 关于Ctime库

    --------------------- 本文来自 Fuko_Ibuki 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/qq_31908675/article/de ...

  8. github二次认证接收短信的问题

    这两天登陆github都被提示说我账号的密码已经被归类,提醒我修改密码. 改密码的时候发现GitHub有个二次认证的功能,分别是app和sms短信认证.app这里就不讲了,我们讲一下github的短信 ...

  9. 将struct转为map

    package main import ( "fmt" "reflect" "time" ) type User struct { Id i ...

  10. mvc ajax访问后台时session过期无法跳转到Login页面问题解决

    public class BaseController : Controller { protected User UserInfo { set { Session["UserInfo&qu ...