項目地址:https://github.com/heng1234/vuePro

在線展示地址:https://heng1234.github.io/vuePro/hlvy/

首先添加echarts插件

npm install echarts -S

main.js加入

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

創建map-option.js

export default {backgroundColor: '#FFFFFF',title: {text: '全國地圖大數據',subtext: '虛構數據',x:'center'},tooltip : {trigger: 'item'},//左側小導航圖標visualMap: {show : true,x: 'left',y: 'center',splitList: [{start: 500, end:600},{start: 400, end: 500},{start: 300, end: 400},{start: 200, end: 300},{start: 100, end: 200},{start: 0, end: 100},],color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']},//配置屬性series: [{name: '數據',type: 'map',mapType: 'china',roam: true,label: {normal: {show: true //省份名稱},emphasis: {show: false}},data:[{name: '北京',value: Math.round(Math.random()*500) },{name: '天津',value: Math.round(Math.random()*500) },{name: '上海',value: Math.round(Math.random()*500) },{name: '重慶',value: Math.round(Math.random()*500) },{name: '河北',value: Math.round(Math.random()*500) },{name: '河南',value: Math.round(Math.random()*500) },{name: '云南',value: Math.round(Math.random()*500) },{name: '遼寧',value: Math.round(Math.random()*500) },{name: '黑龍江',value: Math.round(Math.random()*500) },{name: '湖南',value: Math.round(Math.random()*500) },{name: '安徽',value: Math.round(Math.random()*500) },{name: '山東',value: Math.round(Math.random()*500) },{name: '新疆',value: Math.round(Math.random()*500) },{name: '江蘇',value: Math.round(Math.random()*500) },{name: '浙江',value: Math.round(Math.random()*500) },{name: '江西',value: Math.round(Math.random()*500) },{name: '湖北',value: Math.round(Math.random()*500) },{name: '廣西',value: Math.round(Math.random()*500) },{name: '甘肅',value: Math.round(Math.random()*500) },{name: '山西',value: Math.round(Math.random()*500) },{name: '內蒙古',value: Math.round(Math.random()*500) },{name: '陜西',value: Math.round(Math.random()*500) },{name: '吉林',value: Math.round(Math.random()*500) },{name: '福建',value: Math.round(Math.random()*500) },{name: '貴州',value: Math.round(Math.random()*500) },{name: '廣東',value: Math.round(Math.random()*500) },{name: '青海',value: Math.round(Math.random()*500) },{name: '西藏',value: Math.round(Math.random()*500) },{name: '四川',value: Math.round(Math.random()*500) },{name: '寧夏',value: Math.round(Math.random()*500) },{name: '海南',value: Math.round(Math.random()*500) },{name: '臺灣',value: Math.round(Math.random()*500) },{name: '香港',value: Math.round(Math.random()*500) },{name: '澳門',value: Math.round(Math.random()*500) }] //數據}] };

vue展示頁面

<template><div><div id="myMap" ref="myMap" style="width: 600px; height: 300px;"></div></div> </template><script>let echarts = require('echarts/lib/echarts');require('echarts/lib/chart/bar');? // 引入柱狀圖組件require('echarts/lib/chart/pie');? // 引入餅狀圖組件require('echarts/map/js/china.js');? // 引入中國地圖組件// 引入提示框和title組件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');require('echarts/theme/macarons');//引入主題require('echarts/theme/shine');//引入主題 import option from './js/map-option'export default {data () {return {msg: 'Welcome to Your Vue.js App',chart: null,}},created(){},mounted(){this.drawChinaMap();},updated() {if (!this.chart) {this.initChart()}},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},computed: {},methods: {drawChinaMap() {this.chart = this.$echarts.init(document.getElementById('myMap'),'macarons');this.chart .setOption(option);},}} </script><style scoped></style>

效果:

總結

以上是生活随笔為你收集整理的vue-cli3.0 + echarts展示中国地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。