项目源码附js/json地图数据（下载项目源码后请使用Npm install 来安装相关依赖）

效果

使用前请使用npm(cnpm)安装echarts，详情见官网。
本文作为笔记demo只引入5个省(市)，根据需求可以引入更多。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

import '../node_modules/echarts/map/js/province/beijing.js' // 引入北京地图数据
import '../node_modules/echarts/map/js/province/fujian.js' // 引入福建地图数据
import '../node_modules/echarts/map/js/province/anhui.js' // 引入安徽地图数据
import '../node_modules/echarts/map/js/province/xinjiang.js' // 引入新疆地图数据
import '../node_modules/echarts/map/js/province/xizang.js' // 引入西藏地图数据
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue：

<template>
  <div id="app">
    <div id="chinaMap" style="height:800px;width:1000px;" ref="myEchart"></div>
  <div id="myChart" style="width: 100%;height:400px;"></div>

</div>
</template>

<script>
var echarts = require('echarts/lib/echarts');
require('echarts/map/js/china') // 引入中国地图数据
require('echarts/map/js/world') // 引入世界地图数据
export default {
  name: 'App',
   mounted() {

this.chinamap();
   },
   methods: {

chinamap(){
    var myChart = echarts.init(document.getElementById("chinaMap"));
      window.addEventListener('resize', function () {
        myChart.resize()
      })
        var option= {
        backgroundColor: '#87CEFA',  //设置背景颜色
        title: {
            show:true,
            text: '标题--中国地图',
            subtext: 'made by xzc',
            left:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show : true,
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 10, end:20},
                {start: 6, end: 10},
                {start: 0, end: 6},
            ],
            color: ['#1E90FF', '#7FFFAA', '#F0E68C']
        },
        //配置属性
        series: [{
            name: '数量',
            type: 'map',
            
            map: 'china', 
            roam: false,
            zoom:1.2,
            label: {
                normal: {
                    show: true ,
                },
                emphasis: {
                    show: false
                }
            },
            data:[
              {name: '北京',value:randomData() },{name: '天津',value: randomData() },
                {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },{name: '河南',value: randomData() },
                {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
                {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },{name: '澳门',value: randomData() }

]
        }]
    };

var count = -1;
                    setInterval(function() {
                    
                    var curr = count % 34; //数字为cityArr.length
      
                
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                
                    });
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: curr
                    });

myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0, // 因为只有一组数据，所以此处应为0
                        dataIndex: curr
                    });
                    count++;
                    
                    /*
                    if (index > cityArr.length - 1) {
                      count = -1
                    }            
                    */
                           
                }, 500);

/**
     *  使用刚指定的配置项和数据显示图表。
     *  */
    myChart.setOption(option);
    //获取随机数
    function randomData() {
        return Math.round(Math.random()*(12-1)+1)
    }
    
      myChart.on('mouseover', function (params) {
                var dataIndex = params.dataIndex;
                console.log(dataIndex);
            });

myChart.on('click', function (chinaParam) {

if(chinaParam.name=="北京"||chinaParam.name=="福建"||chinaParam.name=="安徽"||chinaParam.name=="新疆"||chinaParam.name=="西藏"){
                    var option = myChart.getOption();
                    option.series[0].map = chinaParam.name;
                    option.series[0].mapType  = chinaParam.name;
                    myChart.clear();
                    console.log(chinaParam.name);
                    myChart.setOption(option,true); 
                    }else{
                    
                    alert(chinaParam.name+"区域还未开通！");
                    }
                                  
            });

}
   },
    created () {
    
    },
    watch: {
    
    }
}
</script>

使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)， 引入省份js文件相关推荐

1. vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)， 引入省份js文件...

   项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果 使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...

2. vue导入静态js_vue引入静态js文件的方法

   由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

3. VUE 项目中引入外部js文件（CND引入）

   以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件 引入 :<script src="https://cdnjs.cloudflare.com ...

4. vue引入全局静态变量_vue-cli3.0引入静态js文件

   由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

5. vue引入静态js文件

   由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在st ...

6. vue引入外部js文件（第三方js工具或者jq库）

   方法一:静态资源导入(或者cdn资源加载) 在public文件夹下的index.html文件使用script标签对插件进行引用. 可以是项目中的静态资源,也可以是远程资源. 例如: //本地静态资源, ...

7. vue使用javascript动态创建script - 动态引入外部js文件

   一.创建 script 标签,引入 js 文件 // 创建script标签,引入外部文件let script = document.createElement('script')script.type ...

8. vue如何引入外部js文件，待解决，急！！！

   html中用<script src="https://mas.spdb.com.cn/public/scripts/app.upchat.js"></script ...

9. cli vue 外部js 引入 文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...

   问 题 我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...

最新文章

1. Windows下搭建PHP开发环境
2. GB0-190 考试中的知识点分布
3. Python编程基础：第二十二节 关键字参数Keyword Argument
4. 如何在服务器中找到数据库文件夹,如何在服务器中找到数据库文件
5. 【NLP】哈工大｜NLP数据增强方法？我有15种
6. 我到底要选择一种什么样的生活方式，度过这一辈子呢：人生自由与职业发展方向(下)...
7. ccs7调试linux,【图片】【吧主帖】在LINUX（ubuntu）系统下装CCSv6方法（原创）【dsp吧】_百度贴吧...
8. mysql key value 排序_MySQL按字符串中部分数值排序
9. IXWebHosting主机如何退款中文图解教程
10. java系统参数表有哪些_Java 设置系统参数和运行参数
11. html全局事件,HTML5全局属性和事件
12. 为什么你很努力，进步却很慢？
13. selenium2 介绍+简单实战
14. 人工智能：爬山法、随机重启爬山法、模拟退火算法、遗传算法、启发式搜索方法解决八数码和八皇后问题
15. html5桌面打开网页是有问号,点击HTML页面问号出现提示框
16. 【Python爬虫】新手入门案例教学（一）：爬取豆瓣电影排行有关信息
17. L13：MySQL - 性能与SQL优化2
18. 企业级自动化运维工具-ansible
19. chrome插件之网页翻译插件
20. go语言 最近遇到的问题总结

热门文章

1. 记忆化结果再利用 进一步探讨递推关系
2. 【JSP综合课程设计】图书借阅系统设计与实现
3. asp.net (C#) RTX(腾讯通) 接口应用 能实现与OA接口
4. centos7 挂载云盘
5. XML 解析器之一 ：MSXML使用教程(转)
6. 全流程DevOps工具链汇总（全）
7. Android产品定制多语言
8. The Data Science of Gaming and Fantasy Sports 游戏与幻想体育的数据科学 Lynda课程中文字幕
9. Prim算法伪+代码讲解
10. 极光推送集成厂商通道（java）