zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Java实现荷兰国旗问题
    Java实现荷兰国旗问题
    QTcpSocket 对连接服务器中断的不同情况进行判定(六种情况,其中一种使用IsNetworkAlive API方法)
    怀旧老游戏
    我的第一个Chrome插件:天气预报应用
    ddd
    Android 反编译工具
    ASP.NET MVC局部视图
    jQuery类库的设计
    jquery+html三级联动下拉框
  • 原文地址:https://www.cnblogs.com/mangwusuozhi/p/9719602.html
Copyright © 2011-2022 走看看