下载echarts依赖
下载依赖我想大家都会：cnpm / npm install echartsyar add echartstypescript项目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.jsimport 'echarts/map/js/china.js';复制代码
