echarts绘制上海地图

最新推荐文章于 2024-08-05 05:00:00 发布

weixin_34007906

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量5.1k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/chenhao901007/blog/374701

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

<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>

转载于:https://my.oschina.net/chenhao901007/blog/374701