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>
           

效果: