vue中echarts引入中国地图的案例

更新时间：2020年07月28日 09:01:00 作者：彩色泡泡

这篇文章主要介绍了vue中echarts引入中国地图的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
 
 mounted() {
    this.drawLine();
  },
 drawLine(){
    // 基于准备好的dom，初始化echarts实例
    var myChartContainer = document.getElementById('myChartChina');    
    var resizeMyChartContainer = function(){
     myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
    } 
     resizeMyChartContainer();
    var myChartChina = this.$echarts.init(myChartContainer); 

    function randomData() { 
        return Math.round(Math.random()*500); 
      } 
    // 绘制图表
    var optionMap = { 
       tooltip: {},
         legend: {
              orient: 'vertical',
              left: 'left',
              data:['']
            },   
         visualMap: {
              min: 0,
              max: 1500,
              left: '10%',
              top: 'bottom',
              text: ['高','低'],
              calculable : true,
              color:['#0b50b9','#c3e2f4']
            },  
         selectedMode: 'single',
         series : [             
              {
               name: '', 
               type: 'map',
               mapType: 'china',
               itemStyle: {
                  normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                  },
                  emphasis:{
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                showLegendSymbol: true,
                label: {
                  normal: {
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                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() }
                ]
              }
            ]
        }
   
    myChartChina.setOption(optionMap);
    window.onresize=function(){
      resizeMyChartContainer();
      myChartChina.resize();
    }
   }

主要注意的一点在main.js里面：

除了引入echarts之外

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)

补充知识：VUE中给template组件加背景

我就废话不多说了，大家还是直接看代码吧~

<template>
 <div class="index_background" >
 </div>
</template>
<style>
.index_background{ background: url('~@/../static/images/login-bg.png') center top no-repeat;}
</style>

以上这篇vue中echarts引入中国地图的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Nuxt pages下不同的页面对应layout下的页面布局操作
这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
element中的el-upload附件上传与附件回显
这篇文章主要介绍了element中的el-upload附件上传与附件回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3如何通过ref获取元素离顶部的距离
这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10
vue中tab选项卡的实现思路
今天给大家分享vue中tab 选项卡的一些套路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-11-11
vue2组件实现懒加载浅析
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.
2017-03-03
vue3.0安装Element ui及矢量图使用方式
这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
Vant picker选择器设置默认值导致选择器失效的解决
这篇文章主要介绍了Vant picker选择器设置默认值导致选择器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue极简生成器 Vuepress的实现
本文主要介绍了Vue极简生成器 Vuepress的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
2022-06-06
vue实现聊天框发送表情
这篇文章主要为大家详细介绍了vue实现聊天框发送表情，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue使用localStorage保存登录信息适用于移动端、PC端
这篇文章主要为大家详细介绍了vue使用localStorage保存登录信息适用于移动端、PC端，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05

vue中echarts引入中国地图的案例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具