vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果_vue echarts map上显示图片

本篇讲述在vue中使用echarts的中国地图，以及对不同板块进行渐变色的设置。

效果图如下：

实现上图效果步骤如下：

1. 确保项目中下载了echarts，然后在main.js中引用echarts

import echarts from 'echarts'
import 'echarts/map/js/china'
Vue.prototype.$echarts = echarts
1
2
3

2. 在组件中放置一个容器

 <div id="map"></div>
1

3.设置地图相关配置项，以下代码直接复制可用

  mounted() {
    this.$nextTick(() => {
      var mapName = "china";
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      var geoCoordMap = {};
      var toolTipData = [
        {
          name: "北京",
          value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
        },
        {
          name: "天津",
          value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
        },
        {
          name: "河北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
        },
        {
          name: "山西",
          value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
        },
        {
          name: "内蒙古",
          value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
        },
        {
          name: "辽宁",
          value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 
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