免费下载中国地图china.js，在VUE使用echarts-map全国地图的方法和源码

最新推荐文章于 2024-05-06 23:01:39 发布

china_qiqi

最新推荐文章于 2024-05-06 23:01:39 发布

阅读量5.8k

点赞数 2

文章标签： china.js 中国地图 echarts中国地图 echarts的china.js VUE使用china.js

本文链接：https://blog.csdn.net/sinat_40491480/article/details/86656160

版权

本文提供免费的china.js插件下载，适用于在Vue项目中结合echarts展示中国地图。通过示例代码展示如何在VUE中引入和使用china.js，包括静态数据展示及动态数据切换的方法。

摘要由CSDN通过智能技术生成

记得有次需要用到中国地图，在官网找了没有，找了很多地方提供的下载都是需要注册或消费点什么，在这里免费分享中国地图china.js插件，使用前记得安装或者引入echarts噢。。。

china.js下载链接：https://pan.baidu.com/s/1IXbArBpNxIMdMOMp1oTGng
提取码：4v53

使用源码，如果用的是VUE的话直接整片粘上吧，这个是静态数据可以直接看效果（鼠标悬停在西藏）

如果把地图数据改成动态数据记得把mapChart方法内的data切换一下，有注释说明：

<template>
    <div class="mapBox">
        <span class="map-title">访客地图</span>
        <div id="mapChart" :style="{width: '600px', height: '450px'}">
        </div>
    </div>
</template>
<script>
import china from '../../../static/china.js'
export default {
    data() {
        return {
      };
    },
    methods:{
        randomData () {
            return Math.round(Math.random()*1300);
        },
        // 地图
        mapChart () {
            let myChart = this.$echarts.init(document.getElementById('mapChart'));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {//颜色的设置  dataRange