zoukankan      html  css  js  c++  java
  • echarts 如何在世界地图中绘制中国地图

    1.导入 world.china.js  这个js是将world.js 文件 以及china.js文件进行合并 (网上一些中国地图勾勒的身份曲线感觉很飘  所以自己加工了一下china.js中的数据, 然后合并到了word.js中)

    (可以在这里进行下载  https://github.com/a1115040996/MyHTML/blob/master/world-china.js)

    2.现在echarts.js源码

    3.生成地图

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="box" style=" 1000px;height: 1000px;"></div>
    		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/world-china.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			var myCharts = echarts.init(document.getElementById('box'));
    			myCharts.setOption({
    				visualMap: {
    			        min: 0,
    			        max: 1000000,
    			        text:['High','Low'],
    			        realtime: false,
    			        calculable: true,
    			        color: ['orangered','yellow','lightskyblue']
    			    },
    				 series: [{
    			        name: 'chinaMap',
    			        type: 'map',
    			        map: 'world',
    			        roam: true,
    			        itemStyle:{
    		                emphasis:{label:{show:true}}
    		            },
    		            center: [115.97, 29.71],
    		            zoom: 12,
    			        label: {
    			            normal: {
    			                show: true,
    			                position: 'center',
    			                formatter: '{b}'
    			            }
    			        },
    			        data: [
    			        	{name: '山东省', value: '1000'}
    			        ],
    			        zlevel: 3
    			    }]
    			});
    		</script>
    	</body>
    </html>
    

      

    预览图

  • 相关阅读:
    on duplicate key update之多列唯一索引
    js 判断 微信浏览器 安卓/苹果 pc/移动
    history 和 hash (转)
    路由vue-router
    添加图标ico
    vue项目结构
    vue2.0项目的构建
    echarts使用 图例改变和默认不选中
    微信自定义菜单设置 及 emoji表情更换
    复制/设置剪切板内容 (浏览器/nativejs)
  • 原文地址:https://www.cnblogs.com/MainActivity/p/11341661.html
Copyright © 2011-2022 走看看