Vue中使用echarts绘制地图，以及只显示南海问题

下载echarts依赖

下载依赖我想大家都会：
    cnpm / npm install echarts
    yar 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';