vue-cli3.0 + echarts展示中国地图

项目地址: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>

效果: