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>