echarts点击地图弹出地名

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

故事迷人眼

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

阅读量2.4k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/a736889661/article/details/79752923

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="height: 400px; ">
			
		</div>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
	<script type="text/javascript">
		var myCharts = echarts.init(document.getElementById("main"));
		var option = {
			    title : {
			        text: '订单量',
			        subtext: '纯属虚构',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item'
			    },
			    legend: {
			        orient: 'vertical',
			        x:'left',
			        data:['订单量']
			    },
			    dataRange: {
			        x: 'left',
			        y: 'bottom',
			        splitList: [
			            {start: 1500},
			            {start: 900, end: 1500},
			            {start: 310, end: 1000},
			            {start: 200, end: 300},
			            {start: 10, end: 200, label: '10 到 200（自定义label）'},
			            {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
			            {end: 10}
			        ],
			        color: ['#E0022B', '#E09107', '#A3E00B']
			    },
			    toolbox: {
			        show: true,
			        orient : 'vertical',
			        x: 'right',
			        y: 'center',
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			   
			    series : [
			        {
			            name: '订单量',
			            type: 'map',
			            mapType: 'china',
			            roam: true,
			            itemStyle:{
			                normal:{
			                    label:{
			                        show:true,
			                        textStyle: {
			                        	fontSize : 8,
			                            color: "rgb(249, 249, 249)"
			                        }
			                    }
			                },
			                emphasis:{label:{show:true}}
			            },
			            data:[
			                {name: '北京',value: Math.round(Math.random()*2000)},
			                {name: '天津',value: Math.round(Math.random()*2000)},
			                {name: '上海',value: Math.round(Math.random()*2000)},
			                {name: '重庆',value: Math.round(Math.random()*2000)},
			                {name: '河北',value: 0},
			                {name: '河南',value: Math.round(Math.random()*2000)},
			                {name: '云南',value: 5},
			                {name: '辽宁',value: 305},
			                {name: '黑龙江',value: Math.round(Math.random()*2000)},
			                {name: '湖南',value: 200},
			                {name: '安徽',value: Math.round(Math.random()*2000)},
			                {name: '山东',value: Math.round(Math.random()*2000)},
			                {name: '新疆',value: Math.round(Math.random()*2000)},
			                {name: '江苏',value: Math.round(Math.random()*2000)},
			                {name: '浙江',value: Math.round(Math.random()*2000)},
			                {name: '江西',value: Math.round(Math.random()*2000)},
			                {name: '湖北',value: Math.round(Math.random()*2000)},
			                {name: '广西',value: Math.round(Math.random()*2000)},
			                {name: '甘肃',value: Math.round(Math.random()*2000)},
			                {name: '山西',value: Math.round(Math.random()*2000)},
			                {name: '内蒙古',value: Math.round(Math.random()*2000)},
			                {name: '陕西',value: Math.round(Math.random()*2000)},
			                {name: '吉林',value: Math.round(Math.random()*2000)},
			                {name: '福建',value: Math.round(Math.random()*2000)},
			                {name: '贵州',value: Math.round(Math.random()*2000)},
			                {name: '广东',value: Math.round(Math.random()*2000)},
			                {name: '青海',value: Math.round(Math.random()*2000)},
			                {name: '西藏',value: Math.round(Math.random()*2000)},
			                {name: '四川',value: Math.round(Math.random()*2000)},
			                {name: '宁夏',value: Math.round(Math.random()*2000)},
			                {name: '海南',value: Math.round(Math.random()*2000)},
			                {name: '台湾',value: Math.round(Math.random()*2000)},
			                {name: '香港',value: Math.round(Math.random()*2000)},
			                {name: '澳门',value: Math.round(Math.random()*2000)}
			            ]
			        }
			    ]
			};
			
			var ecConfig= echarts.config;  
	            myCharts.on(ecConfig.EVENT.CLICK,function (param) { 
	            	console.log(param);
	                alert(param.name);
	               
	            });                  
            
        myCharts.setOption(option);
        window.onresize = myCharts.resize;
	</script>	
	</body>
</html>

故事迷人眼

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts点击地图弹出地名

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main" style=&qu
复制链接

扫一扫

专栏目录