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
posted on 2018-09-28 16:56  茫无所知  阅读(367)  评论(0编辑  收藏  举报