16、vue引入echarts，划中国地图

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<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>