Vue 项目中使用 ECharts 来绘制世界地图和中国地图

发表于 | 分类于 ， ， | 评论数： | 热度： ℃ | 热度： ℃

最近公司项目中需要使用 ECharts 来展示世界地图和中国地图，记录一下。

一、实现效果


二、引入组件及说明

1、v-charts：基于 Vue2.0 和 ECharts 封装的图表组件 官方文档 Github
　　2、可参考 ECharts 官网 的文档
　　3、可多参考 ECharts 的配置项文档 来进行颜色、文字等样式的改动
　　4、import ‘…/…/…/…/node_modules/echarts/map/js/china.js’ 引入 ECharts 自带的 China、world 等文件时，注意引入的路径

三、世界地图的组件代码（已省略部分国家数据，可在代码文件中复制）

世界 - 代码文件

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
  <div class="echarts-box">
    <div class="title-box">
      <img class="label" src="~assets/imgs/label2.png" alt="">
      <div class="title">校友世界分布</div>
    </div>
    <v-chart class="echarts" :options="polar" @dblclick="dblClick" @click="doClick"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import '../../../../node_modules/echarts/map/js/world.js'

  export default {
    name: 'DailyActiveChart',
    components: { ECharts },
    data () {
      return {
        polar: {
          dataRange: {
            show: true,
            min: 0,
            max: 1000000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['#7CF9D0', '#7CC0FE', '#DEF6FF']
          },
          tooltip: {
            trigger: 'item'
          },
          geo: {
            map: 'world',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                areaColor: '#37376e',
                borderColor: '#000'
              },
              emphasis: {
                areaColor: '#3E98FE'
              }
            }
          },
          series: [{
            name: '校友人数',
            type: 'map',
            mapType: 'world',
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#A9A9A9',
                areaStyle: {
                  color: '#37376e'
                }
              },
              emphasis: {
                areaColor: '#3E98FE',
                borderColor: '#fff',
                borderWidth: 0
              }
            },
            mapLocation: {
              y: 100
            },
            data: [{
              name: 'Afghanistan',
              value: 28397.812
            },
              {
                name: 'Angola',
                value: 19549.124
              },
              {
                name: 'Albania',
                value: 3150.143
              },
              {
                name: 'United Arab Emirates',
                value: 8441.537
              },
              {
                name: 'Yemen',
                value: 22763.008
              },
              {
                name: 'South Africa',
                value: 51452.352
              },
              {
                name: 'Zambia',
                value: 13216.985
              },
              {
                name: 'Zimbabwe',
                value: 13076.978
              }
            ],
            symbolSize: 12,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          }]
        }
      }
    },
    methods: {
      // 双击事件
      dblClick (v) {
        console.log(v)
      },
      // 单击事件
      doClick (v) {
        console.log(v)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .echarts-box {
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    .title-box {
      display: flex;
      .label {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
      .title {
        color: #4C4C4C;
        font-size: 18px;
      }
    }
    .echarts {
      width: 100%;
      height: 600px;
    }
  }
</style>

四、中国地图的组件代码（已省略部分省份数据，可在代码文件中复制）

中国 - 代码文件

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
  <div class="echarts-box">
    <v-chart class="echarts" :options="polar" @dblclick="dblClick" @click="doClick"/>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts'
  import '../../../../node_modules/echarts/map/js/china.js'

  export default {
    name: 'DailyActiveChart',
    components: { ECharts },
    data () {
      return {
        polar: {
          title: {
            text: '校友中国分布地图'
          },
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: true,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                name: '北京',
                value: 599
              }, {
                name: '上海',
                value: 142
              }, {
                name: '黑龙江',
                value: 44
              }, {
                name: '深圳',
                value: 92
              }, {
                name: '湖北',
                value: 810
              }, {
                name: '四川',
                value: 453
              }] // 这里就是数据，即数组可以单独放在外面也可以直接写
            }]
        }
      }
    },
    methods: {
      // 双击事件
      dblClick (v) {
        console.log(v)
      },
      // 单击事件
      doClick (v) {
        console.log(v)
      }
    },
    mounted () {
      this.polar.series[1].data.push({
        name: '浙江',
        value: 324
      })
    }
  }
</script>

<style lang="scss" scoped>
  .echarts-box {
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    .echarts {
      width: 100%;
      height: 600px;
    }
  }
</style>
以上

随笔标题:Vue 项目中使用 ECharts 来绘制世界地图和中国地图

随笔作者:刘先玉

发布时间:2019年03月19日 - 20:29:30

最后更新:2019年03月19日 - 20:29:30

原文链接:https://liuxianyu.cn/article/vue-echarts.html