Echart系列 | 绘制世界地图含中国各个省份(地图篇)(一)
步骤一先绘制一张世界地图,这一步为基础工程,代码+效果图附下:world.json链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ提取码:oe9w<template><div class="content"><!-- 设置容器ID,宽度1920PX,高度1080PX --> ...
·
步骤一
先绘制一张世界地图,这一步为基础工程,代码+效果图附下:
world.json 链接:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:oe9w
<template>
<div class="content">
<!-- 设置容器ID,宽度1920PX,高度1080PX -->
<div id="myEchart" style="width:1920px; height:1080px;"></div>
</div>
</template>
<script>
import $ from "jquery";/* 引入JQUERY,此处不赘述,用于调用$.get函数。 */
var echarts = require("echarts");/* 引入echarts模块,此处不赘述 */
export default {
data() {
return {
myChart: undefined,/* 定义变量 */
};
},
mounted() {
$.get('../static/world.json', function (geoJson) {/* 请求世界地图的本地json数据 */
this.myChart = echarts.init(document.getElementById('myEchart'));/* 初始画布 */
echarts.registerMap('world', geoJson);/* 注册world地图 */
this.myChart.setOption({/* 设置myChart配置项 */
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
type: 'map',
mapType: 'world', // 自定义扩展图表类型
itemStyle: {
normal: { label: { show: true } }, // 普通状态下,显示标签
emphasis: { label: { show: true } } // 高亮状态下,显示标签(默认)
},
roam: true, // 放大缩小、平移
}
]
})
})
},
};
</script>
步骤二
网络上搜到一份中国省份的json文件,https://zcreturn0.github.io/echarts-map/json/china.js,提取里面的内容拷贝到世界地图json文件中。注意的点有:将省份当做国家处理,观察两份JSON结构的格式。
看一下效果:为了方便看结构,这里将普通状态下的标签先注释了,为了大家不被密密麻麻的文字看到眼花
步骤三
最后微调下,将世界json中的China部分删除即可(因为各省份已经拼成一个中国了,可以把China部分删除,如果你不想删除,也是可以。)
经过上述操作后,完整的地图JSON出来了:https://pan.baidu.com/s/1-fLTbzm2JWTdh7c98q-jPQ 提取码:oe9w
更多推荐
已为社区贡献1条内容
所有评论(0)