下載echarts依賴

下載依賴我想大家都會：cnpm / npm install echartsyar add echarts typescript項目 npm install @types/echarts 復制代碼

引入

在main.js中引入 import Echarts form 'echarts' Vue.prototype.$echarts = Echarts 復制代碼

在組件中使用

mounted () {this.drawChinaMap(); }, methods: {drawChinaMap () {let myCharts = document.getElementById('chinaMap');let options = {title: {text: 'iphone銷量',subtext: '純屬虛構',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',data: ['iphone3', 'iphone4', 'iphone5']},visualMap: {min: 0,max: 2500,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {mark: {show: true},dataView: {show: true, readOnly: false},restore: {show: true},saveAsImage: {show: true}}},series: [{name: 'iphone3',type: 'map',mapType: 'china',roam: true,label: {normal: {show: false},emphasis: {show: true}},data: [{name: '北京', value: Math.round(Math.random() * 1000)},{name: '天津', value: Math.round(Math.random() * 1000)},{name: '上海', value: Math.round(Math.random() * 1000)},{name: '重慶', value: Math.round(Math.random() * 1000)},{name: '河北', value: Math.round(Math.random() * 1000)},{name: '河南', value: Math.round(Math.random() * 1000)},{name: '云南', value: Math.round(Math.random() * 1000)},{name: '遼寧', value: Math.round(Math.random() * 1000)},{name: '黑龍江', value: Math.round(Math.random() * 1000)},{name: '湖南', value: Math.round(Math.random() * 1000)},{name: '安徽', value: Math.round(Math.random() * 1000)},{name: '山東', value: Math.round(Math.random() * 1000)},{name: '新疆', value: Math.round(Math.random() * 1000)},{name: '江蘇', value: Math.round(Math.random() * 1000)},{name: '浙江', value: Math.round(Math.random() * 1000)},{name: '江西', value: Math.round(Math.random() * 1000)},{name: '湖北', value: Math.round(Math.random() * 1000)},{name: '廣西', value: Math.round(Math.random() * 1000)},{name: '甘肅', value: Math.round(Math.random() * 1000)},{name: '山西', value: Math.round(Math.random() * 1000)},{name: '內蒙古', value: Math.round(Math.random() * 1000)},{name: '陜西', value: Math.round(Math.random() * 1000)},{name: '吉林', value: Math.round(Math.random() * 1000)},{name: '福建', value: Math.round(Math.random() * 1000)},{name: '貴州', value: Math.round(Math.random() * 1000)},{name: '廣東', value: Math.round(Math.random() * 1000)},{name: '青海', value: Math.round(Math.random() * 1000)},{name: '西藏', value: Math.round(Math.random() * 1000)},{name: '四川', value: Math.round(Math.random() * 1000)},{name: '寧夏', value: Math.round(Math.random() * 1000)},{name: '海南', value: Math.round(Math.random() * 1000)},{name: '臺灣', value: Math.round(Math.random() * 1000)},{name: '香港', value: Math.round(Math.random() * 1000)},{name: '澳門', value: Math.round(Math.random() * 1000)}]},{name: 'iphone4',type: 'map',mapType: 'china',label: {normal: {show: false},emphasis: {show: true}},data: [{name: '北京', value: Math.round(Math.random() * 1000)},{name: '天津', value: Math.round(Math.random() * 1000)},{name: '上海', value: Math.round(Math.random() * 1000)},{name: '重慶', value: Math.round(Math.random() * 1000)},{name: '河北', value: Math.round(Math.random() * 1000)},{name: '安徽', value: Math.round(Math.random() * 1000)},{name: '新疆', value: Math.round(Math.random() * 1000)},{name: '浙江', value: Math.round(Math.random() * 1000)},{name: '江西', value: Math.round(Math.random() * 1000)},{name: '山西', value: Math.round(Math.random() * 1000)},{name: '內蒙古', value: Math.round(Math.random() * 1000)},{name: '吉林', value: Math.round(Math.random() * 1000)},{name: '福建', value: Math.round(Math.random() * 1000)},{name: '廣東', value: Math.round(Math.random() * 1000)},{name: '西藏', value: Math.round(Math.random() * 1000)},{name: '四川', value: Math.round(Math.random() * 1000)},{name: '寧夏', value: Math.round(Math.random() * 1000)},{name: '香港', value: Math.round(Math.random() * 1000)},{name: '澳門', value: Math.round(Math.random() * 1000)}]},{name: 'iphone5',type: 'map',mapType: 'china',label: {normal: {show: false},emphasis: {show: true}},data: [{name: '北京', value: Math.round(Math.random() * 1000)},{name: '天津', value: Math.round(Math.random() * 1000)},{name: '上海', value: Math.round(Math.random() * 1000)},{name: '廣東', value: Math.round(Math.random() * 1000)},{name: '臺灣', value: Math.round(Math.random() * 1000)},{name: '香港', value: Math.round(Math.random() * 1000)},{name: '澳門', value: Math.round(Math.random() * 1000)}]}]};myCharts.setOption(optins);} } 復制代碼

問題

• 以上做法在3.x版本以上只顯示南海

• 但是畫普通圖表沒問題

  我找了些資料看，有人說缺少china.js

  我是4.x版本

  在依賴包里發現有china.js

  于是我再次引入，問題解決

解決方案

在main.js中引入china.js import 'echarts/map/js/china.js'; 復制代碼

轉載于:https://juejin.im/post/5c9c94b0e51d45381b03ed70

總結

以上是生活随笔為你收集整理的Vue中使用echarts绘制地图，以及只显示南海问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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