echarts实现中国地图各省背景根据数值大小变化的方法

很多人不清楚中国地图要怎么实现，其实 echarts 已经为我们封装好了，只要我们配置好各省数据就可以快捷实现了。

首先我们先来实现中国地图：

中国地图的实现

（1）引入 echarts 及中国地图

// import echarts from "echarts";
import * as echarts from 'echarts'
import 'echarts/map/js/china.js' 
1
2
3

（2）配置地图数据

options: {
        tooltip: {
          triggerOn: "mousemove",   //mousemove、click
          padding:8,
          borderWidth:1,
          borderColor:'#409eff',
          backgroundColor:'rgba(255,255,255,0.7)',
          textStyle:{
            color:'#000000',
            fontSize:13
          },
          formatter: function(e, t, n) {
            let data = e.data;
            //模拟数据
            data.specialImportant = Math.random()*1000 | 0;
            data.import = Math.random()*1000 | 0;
            data.compare = Math.random()*1000 | 0;
            data.common = Math.random()*1000 | 0;
            data.specail = Math.random()*1000 | 0;
 
            let context = `
               

                   
${data.name}(2020年第一季度)
                   
事件总数${data.value}
                   
特别重大事件${data.specialImportant}
                   
重大事件${data.import}
                   
较大事件${data.compare}
                   
一般事件${data.common}
                   
特写事件${data.specail}
               
            `
            return context;
          }
        },
        // 这里是比较重要的代码，渲染省份背景颜色的
        visualMap: {
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt:499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt:10,
              label:'<10',
              color: "#bcc5ee"
            }
          ]
        },
        // 这里是配置地图类型，除了中国地图、还可以配置省份、全球地图等
        geo: {
          map: "china",
          // scaleLimit: {
          //   min: 1,
          //   max: 2
          // },
          zoom: 3,
          roam: true,
          top: 120,
          label: {
            normal: {
              show:true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data:[]
          }
        ]
      },
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

根据省份数值大小填充不同的颜色

（1）根据数值区间配置不同的颜色

核心代码：

visualMap: {
          show:true,
          left: 26,
          bottom: 40,
          showLabel:true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b"
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce"
            },
            {
              gte: 100,
              lt:499,
              label: "100 - 499",
              color: "#6f83db"
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7"
            },
            {
              lt:10,
              label:'<10',
              color: "#bcc5ee"
            }
          ]
        },
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

（2）根据最大值和最小值，自动计算两个颜色的渐变

核心代码：

visualMap: {
    show:false,
      min: 0,
      max: 2000,
      // text:['High','Low'],
      realtime: false,
      calculable: true,
      inRange: {
          color: ['#5188e1', '#0d3358']  // 渐变的两个基本值
      }
  },
1
2
3
4
5
6
7
8
9
10
11