vue引入echarts

npm install echarts --save

main.js引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

劃中國地圖

引入中國地圖數據

import 'echarts/map/js/china.js'

<template>
    <div>
        <div id="myChart"></div>
    </div>

</template>
<script>
export default {
    data() {
        return {
           mydata: []
        }
    },
    mounted() {
        this.drawLine()
    
      },
    methods:{
               drawLine() {
          this.mydata = [  
                { name: '北京', value: '100' }, { name: '天津', value: this.randomData() },  
                { name: '上海', value: this.randomData() }, { name: '重慶', value: this.randomData() },  
                { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },  
                { name: '云南', value: this.randomData() }, { name: '遼寧', value: this.randomData() }  
                // {name: '黑龍江',value: this.randomData() },{name: '湖南',value: this.randomData() },  
                // {name: '安徽',value: this.randomData() },{name: '山東',value: this.randomData() },  
                // {name: '新疆',value: this.randomData() },{name: '江蘇',value: this.randomData() },  
                // {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },  
                // {name: '湖北',value: this.randomData() },{name: '廣西',value: this.randomData() },  
                // {name: '甘肅',value: this.randomData() },{name: '山西',value: this.randomData() },  
                // {name: '內蒙古',value: this.randomData() },{name: '陜西',value: this.randomData() },  
                // {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },  
                // {name: '貴州',value: this.randomData() },{name: '廣東',value: this.randomData() },  
                // {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },  
                // {name: '四川',value: this.randomData() },{name: '寧夏',value: this.randomData() },  
                // {name: '海南',value: this.randomData() },{name: '臺灣',value: this.randomData() },  
                // {name: '香港',value: this.randomData() },{name: '澳門',value: this.randomData() }  
            ]
        // 基于準備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
            backgroundColor: '#F7F7F7',
            title: {
                text: '中國地圖',
                subtext: '中國地圖'
                // sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} '
            },
            // toolbox: {
            //     show: true,
            //     orient: 'vertical',
            //     left: 'right',
            //     top: 'center'
            //     // feature: {
            //     //     dataView: {readOnly: false},
            //     //     restore: {},
            //     //     saveAsImage: {}
            //     // }
            // },
            visualMap: {
                max: 500,
                min: 0,
                text: ['高', '低'],
                realtime: false,
                calculable: false,
                itemHeight: '200',
                inverse: true, // 翻轉
                orient: 'horizontal',
                inRange: {
                    color: ['#DDDDDD', '#026FDD']
                }
            },
            series: [
                {
                    name: '損失統計',
                    type: 'map',
                    mapType: 'china', // 自定義擴展圖表類型
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: this.mydata
                }
            ]
        })
    },
    randomData() {  
     return Math.round(Math.random() * 500);  
    } 
             
    },


}
</script>