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


Posted in Javascript onJuly 28, 2020

如下所示:

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引入中国地图的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
ES6模块化的import和export用法方法总结
Aug 08 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 #Javascript
JavaScript文档加载模式以及元素获取
Jul 28 #Javascript
javascript实现贪吃蛇小游戏
Jul 28 #Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
JS中的函数与对象的创建方式
2019/05/12 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
求职信的要素有哪些呢
2013/12/26 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
起诉意见书范文
2015/05/19 职场文书
大学生见习总结报告
2015/06/24 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
七年级作文之游记
2019/12/11 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电