如下所示：

<div :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之外

// 引入echartsimport 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 > </div></template><style>.index_background{ background: url(’~@/../static/images/login-bg.png’) center top no-repeat;}</style>

以上這篇vue中echarts引入中國地圖的案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。