码迷,mamicode.com
首页 > 其他好文 > 详细

echarts绘制上海地图

时间:2015-02-03 11:23:18      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:

效果图:

技术分享

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
	<div id="main" style="100%; height: 100%;"></div>
</body>
<script src="echarts-all.js"></script>
<script>
	var myChart = echarts.init(document.getElementById(‘main‘));
	var option = {
		title: {
			text : ‘上海地图‘,
			subtext : ‘-。-‘
		},
		tooltip : {
			trigger: ‘item‘,
			formatter: function(a){
				return a[2];
			}
		},
		legend: {
			orient: ‘vertical‘,
			x:‘right‘,
			data:[‘数据名称‘]
		},
		dataRange: {
			min: 0,
			max: 1000,
			color:[‘orange‘,‘yellow‘],
			text:[‘高‘,‘低‘],           // 文本,默认为数值文本
			calculable : true
		},
		series : [
			{
				name: ‘数据名称‘,
				type: ‘map‘,
				mapType: ‘上海‘,
				selectedMode : ‘single‘,
				itemStyle:{
					normal:{label:{show:true}},
					emphasis:{label:{show:true}}
				},
				data:[
					{name: ‘崇明县‘,value: Math.round(Math.random()*1000)},
					{name: ‘宝山区‘,value: Math.round(Math.random()*1000)},
					{name: ‘嘉定区‘,value: Math.round(Math.random()*1000)},
					{name: ‘青浦区‘,value: Math.round(Math.random()*1000)},
					{name: ‘杨浦区‘,value: Math.round(Math.random()*1000)},
					{name: ‘虹口区‘,value: Math.round(Math.random()*1000)},
					{name: ‘闸北区‘,value: Math.round(Math.random()*1000)},
					{name: ‘普陀区‘,value: Math.round(Math.random()*1000)},
					{name: ‘静安区‘,value: Math.round(Math.random()*1000)},
					{name: ‘黄浦区‘,value: Math.round(Math.random()*1000)},
					{name: ‘卢湾区‘,value: Math.round(Math.random()*1000)},
					{name: ‘长宁区‘,value: Math.round(Math.random()*1000)},
					{name: ‘徐汇区‘,value: Math.round(Math.random()*1000)},
					{name: ‘浦东新区‘,value: Math.round(Math.random()*1000)},
					{name: ‘松江区‘,value: Math.round(Math.random()*1000)},
					{name: ‘闵行区‘,value: Math.round(Math.random()*1000)},
					{name: ‘金山区‘,value: Math.round(Math.random()*1000)},
					{name: ‘奉贤区‘,value: Math.round(Math.random()*1000)},
					{name: ‘南汇区‘,value: Math.round(Math.random()*1000)}
				]
			}
		]
	};
	myChart.setOption(option);
                    
</script>
</html>

echarts绘制上海地图

标签:

原文地址:http://my.oschina.net/chenhao901007/blog/374701

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!