页面图表插件echarts中map用法_echarts map

作者：不正经 | 2024-02-18 15:11:42

踩

echarts map

1.案例效果图展示

在这里插入图片描述

2.地图缩放和平移

与地图缩放和平移功能有关的字段属性有：

● roam[boolean, string]:是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
● zoom[number]: 当前视角的缩放比例
● scaleLimit[object]: 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。

配置项geo和 series中具体代码如下：

aspectScale: 0.75, // 地图的长宽比
z:1,
zoom:1.2, // 当前视角的缩放比例。
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
  min: 0.8,
  max: 1.6
},
1
2
3
4
5
6
7
8

3.整个地图和地图某一区域阴影效果

整个地图实现阴影或者3D效果，需要echarts中配置项geo和series中同时设置阴影效果（或者series系列数组中设置2个元素），series浮在geo上面,二者中series的z的值要大于geo中z的值，并且geo相对series有阴影偏移距离，注意在series中的itemstyle中不设置shadowOffsetX和shadowOffsetY；地图中某一区域的阴影效果可以在data数据中具体的元素中对itemStyle进行设置，具体代码如下：

 itemStyle: {
  normal: {
    areaColor: "#d0b6de",// 地图区域的颜色
    shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
    borderColor:'#503d27',
    borderWidth: 1,
    shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
    shadowOffsetX:6, // 阴影水平方向上的偏移距离。
    shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
  },
  emphasis: {
    label:{
      show:false
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 地图中某一区域数据单独展示

在data数组中某一个元素中的itemStyle下的label属性show，为true时，默认展示name属性，注意不要设置全局的itemStyle下的label属性show为true，代码如下：

label: {
  normal: {
    show: true,
    color: '#333333',
    fontSize: 40*that.relativeRate,
    fontFamily: 'PingFangSC-Regula',
  },
  emphasis: {
    show: true
  }
},
1
2
3
4
5
6
7
8
9
10
11

５. 地图中某一区域默认高亮显示

echarts的API中dispatchAction可以触发图表行为，所有要实现高亮显示，就是用echarts实例脚本触发地图中某一区域的点击效果，具体代码如下：

/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
  type: 'hideTip',// 图表行为
  seriesIndex: 0,// series系列 索引
  dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
  type: 'mapUnSelect',
  seriesIndex: 0,
  dataIndex: currIndex-1
});
/**触发显示提示框showTip行为**/
that.chianMap.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: currIndex
});
/**触发地图选中行为**/
that.chianMap.dispatchAction({
  type: 'mapSelect',
  seriesIndex: 0,
  dataIndex: currIndex
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

６. data中数据自动触发被选中高亮显示循环播放

在这里显然需要用到周期定时器setInterval来实现循环触发高亮展示，同时也用到echarts API中的实例方法dispatchAction和action类型，具体脚本代码如下：

var intervalID = setInterval(function(){
  /**取消显示提示框showTip行为**/
  that.chianMap.dispatchAction({
    type: 'hideTip',// 图表行为
    seriesIndex: 0,// series系列 索引
    dataIndex: currIndex-1 // 序列data中数据元素的索引
  });
  /**取消地图选中行为**/
  that.chianMap.dispatchAction({
    type: 'mapUnSelect',
    seriesIndex: 0,
    dataIndex: currIndex-1
  });
  /**触发显示提示框showTip行为**/
  that.chianMap.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currIndex
  });
  /**触发地图选中行为**/
  that.chianMap.dispatchAction({
    type: 'mapSelect',
    seriesIndex: 0,
    dataIndex: currIndex
  });
  preIndex = currIndex;
  currIndex++;
  currIndex >= dataOptionLength?currIndex = 0: '';
}, 2000);
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

７.取消自动触发选中和高亮，取消循环展示

从5和6中可以得知，取消循环即取消周期定时器，即：clearInterval(intervalID)，取消选中和高亮，就是dispatchAction中type的值分别为”hideTip”和”mapUnSelect”，具体脚本如下：

取消显示提示框showTip行为

/**取消显示提示框showTip行为**/
that.chianMap.dispatchAction({
  type: 'hideTip',// 图表行为
  seriesIndex: 0,// series系列 索引
  dataIndex: currIndex-1 // 序列data中数据元素的索引
});
/**取消地图选中行为**/
that.chianMap.dispatchAction({
  type: 'mapUnSelect',
  seriesIndex: 0,
  dataIndex: currIndex-1
});
1
2
3
4
5
6
7
8
9
10
11
12

８.案例完整代码如下：

echarts中map组件的使用，可以vue中安装echarts，也可以手动引入地图的json数据（例如：chain.json）。当手动引入map的json数据时，需要先注册地图，在创建地图实例，即：echarts.registerMap("china", response.data);

具体代码如下：

let mapDom = that.$refs['heating-power-map'];
  let data = [
    {name: '黑龙江', value: 2500,
      itemStyle: {
        normal:{
          areaColor: 'rgba(44,101,193,.3)',
          /* shadowColor: 'rgba(12, 123, 34, 0.5)',
           shadowBlur: 100,
           shadowOffsetX:10,
           shadowOffsetY:10*/
          shadowColor: '#433ff9',
          shadowBlur: 0,

        },
        emphasis: {
          show:true,
        },
      },
      label: {
        normal: {
          show: true,
          color: '#333333',
          fontSize: 40*that.relativeRate,
          fontFamily: 'PingFangSC-Regula',
        },
        emphasis: {
          show: true
        }
      },
    },
    {
      name: '内蒙古',
      value: 200,
      itemStyle: { // 每个地区区域也可以单独设置样式，优先级高于统一设置的样式
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 10,
        /*shadowOffsetY: 5,
        shadowOffsetX: 5,*/

      },
    },
    {name: '新疆', value: 2500, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    },
    {name: '西藏', value: 200, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    },
    {name: '云南', value: 2500, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    },
    {name: '广东', value: 2000, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    },
    {name: '福建', value: 2000, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    },
    {name: '山东', value: 2000, itemStyle: {
        areaColor: 'rgba(44,101,193,.3)',
        shadowColor: '#433ff9',
        shadowBlur: 0,

      },
    }
  ];
  let option2 = {
    backgroundColor: '#33287f', // 设置地图画布的背景色
    tooltip: { // 提示框组件
      show: true, // 是否显示提示框组件
      trigger: 'item', // 触发类型。
      backgroundColor: 'rgba(248,248,255,.9)',
      borderWidth: 0,
      confine: true,
      /*position: 'right',*/
      textStyle: { // 提示框浮层的文本样式。
        color: 'rgba(0,0,0,.9)'
      },
      formatter:function(a){ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
        let returnContent = ''
        if(a.value != undefined && a.value != '' && a.name != undefined && a.name != ''){
          returnContent = a.name+'分公司<br>'+'标保值：'+a.value;
        }
        return returnContent;
      },
      tiggerOn: 'mousemove|click',
      /*extraCssText:'width:100px;height:200px;',*/
      /*extraCssText:'width:100*that.relativeRate;height:200*that.relativeRate;',*/
    },
    geo: {
      map: "china", // 地图类型
      center: [105.194115019531, 35.582111640625], // 当前视角的中心点，用经纬度表示
      aspectScale: 0.75, // 地图的长宽比
      zoom:1.2, // 当前视角的缩放比例。
      roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
      scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
        min: 0.8,
        max: 1.6
      },
      itemStyle: {
        normal: {
          areaColor: "#d0b6de",// 地图区域的颜色
          shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
          borderColor:'#503d27',
          borderWidth: 1,
          shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
          shadowOffsetX:6, // 阴影水平方向上的偏移距离。
          shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
        },
        emphasis: {
          label:{
            show:false
          }
        }
      }
    },
    series: [
      {
        type: "map",
        map: "china",
        center: [105.194115019531, 35.582111640625],
        zoom:1.2,
        geoIndex: 1,
        aspectScale: 0.75, //长宽比
        roam: 'scale',
        selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选
        scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
          min: 0.8,
          max: 1.6
        },
        emphasis: {
          label:{
            show:true
          }
        },
        itemStyle: {
          normal: {
            areaColor: "rgba(126,203,255,1)", // 地图区域的颜色
            borderColor: "#fdfffd", // 地图区域图形的描边颜色 当前不支持整个地图的描边颜色
            borderWidth: 1, // 描边线宽。为 0 时无描边,number类型
          }
        },
        data:data,
      }
    ]
  };
//  that.echarts.registerMap("china", response.data);
  that.chianMap = that.echarts.init(mapDom);
  that.chianMap.setOption(option2);
  that.chianMap.dispatchAction({
    type: 'showTip', // 图表行为
    seriesIndex: 0, // series系列 索引
    dataIndex: 0 // 序列data中数据元素的索引
  })
  that.chianMap.dispatchAction({
    type: 'mapSelect',
    seriesIndex: 0,
    dataIndex: 0
  });
  var op = that.chianMap.getOption();
  var dataOption = op.series[0].data;
  var dataOptionLength = data.length;
  var currIndex = 1,preIndex;
  /**数据自动触发被选中高亮显示**/
  var intervalID = setInterval(function(){
    /**取消显示提示框showTip行为**/
    that.chianMap.dispatchAction({
      type: 'hideTip',// 图表行为
      seriesIndex: 0,// series系列 索引
      dataIndex: currIndex-1 // 序列data中数据元素的索引
    });
    /**取消地图选中行为**/
    that.chianMap.dispatchAction({
      type: 'mapUnSelect',
      seriesIndex: 0,
      dataIndex: currIndex-1
    });
    /**触发显示提示框showTip行为**/
    that.chianMap.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currIndex
    });
    /**触发地图选中行为**/
    that.chianMap.dispatchAction({
      type: 'mapSelect',
      seriesIndex: 0,
      dataIndex: currIndex
    });
    preIndex = currIndex;
    currIndex++;
    currIndex >= dataOptionLength?currIndex = 0: '';
  }, 2000);
  var intervalFlag = true;//是否启动自动触发
  that.chianMap.on('click', e=>{ // 处理click事件

    e.dataIndex < dataOptionLength ? currIndex = e.dataIndex+1 : currIndex = 0; // 手动点击，重置currIndex为当前点击区域的下一个区域
    if(intervalFlag){
      /**取消数据自动触发被选中高亮显示**/
      clearInterval(intervalID);
      if(preIndex != currIndex){
        that.chianMap.dispatchAction({
          type: 'mapUnSelect',
          seriesIndex: 0,
          dataIndex: preIndex
        });
        that.chianMap.dispatchAction({
          type: 'mapUnSelect',
          seriesIndex: 0,
          dataIndex: preIndex
        });
      }

    }else{
      intervalID = setInterval(function(){
        that.chianMap.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: currIndex-1
        });
        that.chianMap.dispatchAction({
          type: 'mapUnSelect',
          seriesIndex: 0,
          dataIndex: currIndex-1
        });
        that.chianMap.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currIndex
        });
        that.chianMap.dispatchAction({
          type: 'mapSelect',
          seriesIndex: 0,
          dataIndex: currIndex
        });
        preIndex = currIndex;
        currIndex++;
        currIndex >= dataOptionLength?currIndex = 0: '';
      }, 2000);
    }
    intervalFlag = !intervalFlag;
  });
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261

9.实例完整代码

<template>
  <div class="heating-power">
    <!-- 全国热力图 -->
    <span >全国热力图</span>
    <div class="heating-power-map" id="heating-power-map" ref="heating-power-map">
    </div>
  </div>
</template>
<script>
  import echarts from "../js/echarts";
  import axios from "axios";
  import '../../node_modules/echarts/map/js/china.js' // 或者注册地图that.echarts.registerMap("china", response.data);
  export default {
    name: "Maps",
    mounted(){
        this.getChinaMap();
    },
    methods:{
      /**全国热力图**/
      getChinaMap: function (mapData1, mapData2, mapData3) {
        let that = this;
        axios.get("static/json/chinamap.json")
          .then(function(response){
            let mapDom = that.$refs['heating-power-map'];
            let data = [
              {name: '黑龙江', value: 2500,
                itemStyle: {
                  normal:{
                    areaColor: 'rgba(44,101,193,.3)',
                    /* shadowColor: 'rgba(12, 123, 34, 0.5)',
                     shadowBlur: 100,
                     shadowOffsetX:10,
                     shadowOffsetY:10*/
                    shadowColor: '#433ff9',
                    shadowBlur: 0,

                  },
                  emphasis: {
                    show:true,
                  },
                },
                label: {
                  normal: {
                    show: true,
                    color: '#333333',
                    fontSize: 40*that.relativeRate,
                    fontFamily: 'PingFangSC-Regula',
                  },
                  emphasis: {
                    show: true
                  }
                },
              },
              {
                name: '内蒙古',
                value: 200,
                itemStyle: { // 每个地区区域也可以单独设置样式，优先级高于统一设置的样式
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 10,
                  /*shadowOffsetY: 5,
                  shadowOffsetX: 5,*/

                },
              },
              {name: '新疆', value: 2500, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              },
              {name: '西藏', value: 200, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              },
              {name: '云南', value: 2500, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              },
              {name: '广东', value: 2000, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              },
              {name: '福建', value: 2000, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              },
              {name: '山东', value: 2000, itemStyle: {
                  areaColor: 'rgba(44,101,193,.3)',
                  shadowColor: '#433ff9',
                  shadowBlur: 0,

                },
              }
            ];
            let option2 = {
              backgroundColor: '#33287f', // 设置地图画布的背景色
              tooltip: { // 提示框组件
                show: true, // 是否显示提示框组件
                trigger: 'item', // 触发类型。
                backgroundColor: 'rgba(248,248,255,.9)',
                borderWidth: 0,
                confine: true,
                /*position: 'right',*/
                textStyle: { // 提示框浮层的文本样式。
                  color: 'rgba(0,0,0,.9)'
                },
                formatter:function(a){ // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                  let returnContent = ''
                  if(a.value != undefined && a.value != '' && a.name != undefined && a.name != ''){
                    returnContent = a.name+'分公司<br>'+'标保值：'+a.value;
                  }
                  return returnContent;
                },
                tiggerOn: 'mousemove|click',
                /*extraCssText:'width:100px;height:200px;',*/
                /*extraCssText:'width:100*that.relativeRate;height:200*that.relativeRate;',*/
              },
              geo: {
                map: "china", // 地图类型
                center: [105.194115019531, 35.582111640625], // 当前视角的中心点，用经纬度表示
                aspectScale: 0.75, // 地图的长宽比
                z:1,
                zoom:1.2, // 当前视角的缩放比例。
                roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
                  min: 0.8,
                  max: 1.6
                },
                itemStyle: {
                  normal: {
                    areaColor: "#d0b6de",// 地图区域的颜色
                    shadowColor:"rgba(186,85,211,.5)",// 阴影颜色。支持的格式同color。
                    borderColor:'#503d27',
                    borderWidth: 1,
                    shadowBlur: 1,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowOffsetX:6, // 阴影水平方向上的偏移距离。
                    shadowOffsetY:6, // 阴影垂直方向上的偏移距离。
                  },
                  emphasis: {
                    label:{
                      show:false
                    }
                  }
                }
              },
              series: [
                {
                  type: "map",
                  map: "china",
                  center: [105.194115019531, 35.582111640625],
                  zoom:1.2,
                  z:2,
                  /*geoIndex: 1,*/
                  aspectScale: 0.75, //长宽比
                  roam: 'scale',
                  selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选
                  scaleLimit:{ // 滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1
                    min: 0.8,
                    max: 1.6
                  },
                  emphasis: {
                    label:{
                      show:true
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: "rgba(126,203,255,1)", // 地图区域的颜色
                      borderColor: "#fdfffd", // 地图区域图形的描边颜色 当前不支持整个地图的描边颜色
                      borderWidth: 1, // 描边线宽。为 0 时无描边,number类型
                    }
                  },
                  data:data,
                }
              ]
            };
          //  that.echarts.registerMap("china", response.data);
            that.chianMap = that.echarts.init(mapDom);
            that.chianMap.setOption(option2);
            that.chianMap.dispatchAction({
              type: 'showTip', // 图表行为
              seriesIndex: 0, // series系列 索引
              dataIndex: 0 // 序列data中数据元素的索引
            })
            that.chianMap.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: 0
            });
            var op = that.chianMap.getOption();
            var dataOption = op.series[0].data;
            var dataOptionLength = data.length;
            var currIndex = 1,preIndex;
            /**数据自动触发被选中高亮显示**/
            var intervalID = setInterval(function(){
              /**取消显示提示框showTip行为**/
              that.chianMap.dispatchAction({
                type: 'hideTip',// 图表行为
                seriesIndex: 0,// series系列 索引
                dataIndex: currIndex-1 // 序列data中数据元素的索引
              });
              /**取消地图选中行为**/
              that.chianMap.dispatchAction({
                type: 'mapUnSelect',
                seriesIndex: 0,
                dataIndex: currIndex-1
              });
              /**触发显示提示框showTip行为**/
              that.chianMap.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currIndex
              });
              /**触发地图选中行为**/
              that.chianMap.dispatchAction({
                type: 'mapSelect',
                seriesIndex: 0,
                dataIndex: currIndex
              });
              preIndex = currIndex;
              currIndex++;
              currIndex >= dataOptionLength?currIndex = 0: '';
            }, 2000);
            var intervalFlag = true;//是否启动自动触发
            that.chianMap.on('click', e=>{ // 处理click事件

              e.dataIndex < dataOptionLength ? currIndex = e.dataIndex+1 : currIndex = 0; // 手动点击，重置currIndex为当前点击区域的下一个区域
              if(intervalFlag){
                /**取消数据自动触发被选中高亮显示**/
                clearInterval(intervalID);
                if(preIndex != currIndex){
                  that.chianMap.dispatchAction({
                    type: 'mapUnSelect',
                    seriesIndex: 0,
                    dataIndex: preIndex
                  });
                  that.chianMap.dispatchAction({
                    type: 'mapUnSelect',
                    seriesIndex: 0,
                    dataIndex: preIndex
                  });
                }

              }else{
                intervalID = setInterval(function(){
                  that.chianMap.dispatchAction({
                    type: 'hideTip',
                    seriesIndex: 0,
                    dataIndex: currIndex-1
                  });
                  that.chianMap.dispatchAction({
                    type: 'mapUnSelect',
                    seriesIndex: 0,
                    dataIndex: currIndex-1
                  });
                  that.chianMap.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currIndex
                  });
                  that.chianMap.dispatchAction({
                    type: 'mapSelect',
                    seriesIndex: 0,
                    dataIndex: currIndex
                  });
                  preIndex = currIndex;
                  currIndex++;
                  currIndex >= dataOptionLength?currIndex = 0: '';
                }, 2000);
              }
              intervalFlag = !intervalFlag;
            });
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      clickMap: function (e) {
        console.log(e);
      },
    },
  }
</script>
<style scoped>
  .heating-power{
    margin-top: .26rem;
    display: flex;
    flex-direction: column;
    position: relative;

  }
  .heating-power span{
    font-family: PingFangSC-Regular;
    font-size: .34rem;
    color: #393E52;
    letter-spacing: 0;
    margin-left: .56rem;

  }
  .heating-power span:after{
    position: absolute;
    content: '';
    width: .05rem;
    height: .4rem;
    left: .32rem;
    background-image: linear-gradient(0deg, #96D7FE 18%, #1673D2 100%);
    border-radius: .15rem;
  }
  .heating-power-map{
    width: 100%;
    /* height: 4.62rem;
     width: 7rem;*/
    height: 7rem;
    margin-left: .2rem;
    margin-top: .35rem;
    padding-bottom: .25rem;
    /*background-color: rgba(10,22,58,.8);*/
    /* border-bottom: .01rem solid #CECECE;*/
    /*background-color: red;*/
  }
</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
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/108747?site