学生教材网 >程序设计 > 代码分享 > JavaScript > 浏览文章

Echarts 柱状图点击不同的legend 加载数据

来源:网络编辑:佚名时间:2015-08-17人气:

渔具展销会,我要变成硬柿子吻戏,网游之终极召唤师

Echarts  柱状图Legend点击事件(网址http://www.thinkgis.cn/public/sina/) 标签: <无>

代码片段(2) [全屏查看所有代码]

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

var provincedata=[{code:'88',count:90206,checkin_num:960606,photo_num:567107,name:'台湾',pop:'',gdp:'',den:'0'},{code:'11',count:321106,checkin_num:21222070,photo_num:10075727,name:'北京',pop:'1423',gdp:'8879',den:'847.0238095'},{code:'12',count:136767,checkin_num:3112855,photo_num:1271663,name:'天津',pop:'1007',gdp:'5014',den:'891.1504425'},{code:'13',count:322877,checkin_num:4123875,photo_num:1737477,name:'河北',pop:'6735',gdp:'13387',den:'358.8172616'},{code:'14',count:154171,checkin_num:1970530,photo_num:855135,name:'山西',pop:'3294',gdp:'5465',den:'210.7485605'},{code:'15',count:237048,checkin_num:870769,photo_num:395101,name:'内蒙古',pop:'2379',gdp:'6140',den:'20.10989011'},{code:'21',count:552206,checkin_num:4535957,photo_num:2030906,name:'辽宁',pop:'4203',gdp:'10418',den:'288.0740233'},{code:'22',count:200062,checkin_num:1481961,photo_num:651724,name:'吉林',pop:'2699',gdp:'4693',den:'144.0234792'},{code:'23',count:228060,checkin_num:1788844,photo_num:827624,name:'黑龙江',pop:'3813',gdp:'7081',den:'83.83905013'},{code:'31',count:284535,checkin_num:16928489,photo_num:6846315,name:'上海',pop:'1625',gdp:'11658',den:'2579.365079'},{code:'32',count:758128,checkin_num:10660686,photo_num:4751353,name:'江苏',pop:'7381',gdp:'24738',den:'719.3957115'},{code:'33',count:505080,checkin_num:8125849,photo_num:3955063,name:'浙江',pop:'4647',gdp:'17633',den:'455.5882353'},{code:'34',count:288061,checkin_num:3752547,photo_num:1689607,name:'安徽',pop:'6338',gdp:'6906',den:'453.686471'},{code:'35',count:270330,checkin_num:6804941,photo_num:3307612,name:'福建',pop:'3466',gdp:'8440',den:'285.7378401'},{code:'36',count:218240,checkin_num:2921388,photo_num:1292190,name:'江西',pop:'4222',gdp:'5323',den:'252.8143713'},{code:'37',count:596801,checkin_num:6383995,photo_num:2803846,name:'山东',pop:'9082',gdp:'25326',den:'590.5071521'},{code:'41',count:471167,checkin_num:5665334,photo_num:2558272,name:'河南',pop:'9613',gdp:'14234',den:'575.6287425'},{code:'42',count:242717,checkin_num:5822675,photo_num:2646771,name:'湖北',pop:'5988',gdp:'8451',den:'322.1086606'},{code:'43',count:220485,checkin_num:3549601,photo_num:1618986,name:'湖南',pop:'6629',gdp:'8366',den:'312.9839471'},{code:'44',count:820236,checkin_num:25673858,photo_num:12272790,name:'广东',pop:'7859',gdp:'29863',den:'436.6111111'},{code:'45',count:125220,checkin_num:3038549,photo_num:1375736,name:'广西',pop:'4822',gdp:'5386',den:'204.3220339'},{code:'46',count:18676,checkin_num:1274043,photo_num:706486,name:'海南',pop:'803',gdp:'1121',den:'236.1764706'},{code:'50',count:143731,checkin_num:3439042,photo_num:1565583,name:'重庆',pop:'3107',gdp:'3938',den:'377.5212637'},{code:'51',count:490927,checkin_num:7892072,photo_num:3884951,name:'四川',pop:'8673',gdp:'9657',den:'180.1620274'},{code:'52',count:144660,checkin_num:1391961,photo_num:669201,name:'贵州',pop:'3837',gdp:'2543',den:'218.0113636'},{code:'53',count:268903,checkin_num:2773405,photo_num:1574381,name:'云南',pop:'4333',gdp:'4260',den:'113.0446126'},{code:'54',count:35337,checkin_num:415591,photo_num:205703,name:'西藏',pop:'267',gdp:'326',den:'2.174267101'},{code:'61',count:180514,checkin_num:4169945,photo_num:1913112,name:'陕西',pop:'3674',gdp:'4806',den:'178.6964981'},{code:'62',count:142548,checkin_num:1058416,photo_num:463175,name:'甘肃',pop:'2593',gdp:'2494',den:'57.06426056'},{code:'63',count:59988,checkin_num:235170,photo_num:120349,name:'青海',pop:'529',gdp:'706',den:'7.323826665'},{code:'64',count:46802,checkin_num:269941,photo_num:117933,name:'宁夏',pop:'572',gdp:'769',den:'86.14457831'},{code:'65',count:172497,checkin_num:1124934,photo_num:556195,name:'新疆',pop:'1905',gdp:'3305',den:'11.47590361'},{code:'81',count:73827,checkin_num:1541342,photo_num:982266,name:'香港',pop:'',gdp:'',den:'0'},{code:'82',count:5249,checkin_num:241901,photo_num:144660,name:'澳门',pop:'',gdp:'',den:'0'}];
var dataStyle = {
	normal : {
		label : {
			show : true,
			position : 'insideLeft',
			formatter : '{c}',
			textStyle : {
				color : '#000'
			}
		}
	}
};
option = {
	title : {
		text : 'POI数据分布'
	},
	tooltip : {
		trigger : 'axis',
		axisPointer : {
			type : 'shadow'
		}
	},
	legend : {
		y : 55,
		data : ['签到数', 'POI数', '照片数'],
		selected : {
			'POI数' : false,
			'照片数' : false
		},
		selectedMode : "single"
	},
	toolbox : {
		show : true,
		feature : {
			mark : {
				show : true
			},
			dataView : {
				show : true,
				readOnly : false
			},
			restore : {
				show : true
			},
			saveAsImage : {
				show : true
			}
		}
	},
	grid : {
		y : 80,
		y2 : 30
	},
	xAxis : [{
			type : 'value',
			position : 'top',
			splitLine : {
				show : false
			},
			axisLabel : {
				show : false
			}
		}
	],
	yAxis : [{
			type : 'category',
			splitLine : {
				show : false
			},
			data : (function () {
				var data = [];
                provincedata.sort(function(a,b){
                				  if(a.count>b.count)
                				    return 1;
                				  else
                				   return -1;

                				})
				provincedata.forEach(function (item) {
					data.push(item.name)
				})
				return data;
			})()
		}
	],
	series : [{
			name : 'POI数',
			type : 'bar',
			itemStyle : dataStyle,
			data : (function () {
				var data = [];
				provincedata.sort(function(a,b){
                				  if(a.count>b.count)
                				    return 1;
                				  else
                				   return -1;

                				})
				provincedata.forEach(function (item) {
					data.push(parseInt(item.count))
				})
				return data;
			})()
		}, {
			name : '照片数',
			type : 'bar',
			itemStyle : dataStyle,
			data : (function () {
				var data = [];
				provincedata.sort(function(a,b){
                  if(a.photo_num>b.photo_num)
                    return 1;
                  else
                   return -1;

                })
				provincedata.forEach(function (item) {
					data.push(parseInt(item.photo_num))
				})
				return data;
			})()
		}, {
			name : '签到数',
			type : 'bar',
			itemStyle : dataStyle,
			data : (function () {
				var data = [];
				provincedata.sort(function(a,b){
                      if(a.checkin_num>b.checkin_num)
                        return 1;
                      else
                       return -1;

                    })
				provincedata.forEach(function (item) {
					data.push(parseInt(item.checkin_num))
				})
				return data;
			})()
		}
	]
};

2. [图片] 点击Echarts图例.png    

随机显示div

<无详细内容>标签:-->-->-->1.[文件]test.

随机生成数字字母的字符串(验证码)

随机生成数字字母的字符串(验证码)标签:<无>-->-->-->1.[代码]随机生成数字字母的字符串(验证码)functiongenerateRandomAlphaNum(len){varrdmString="";for(;rdmString.

热门推荐