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