master

分支 (1)

管理

管理

master

echarts_chart_collection
/
map_slider.html

<!--
 * @Author: sunday
 * @Date: 2020-06-15 10:59:52
 * @LastEditors: sunday
 * @LastEditTime: 2020-08-03 09:54:42
 * @Description: file content
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复杂地图-自动轮播</title>
  <style>
    #map {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: #333;
    }
  </style>
</head>

<body>
  <div id="map">123</div>
  <script src="./js/rem.js"></script>
  <script src="./js/jquery-1.8.3.min.js"></script>
  <script src="./js/echarts.min.js"></script>
  <!-- <script src="./js/map-xihu.js"></script> -->
  <script>
    $(function () {
      //获取随机范围内的整数
      function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
      }


      function chart_map() {
        var uploadedDataURL = "./js/mapdata/lanxi.json";
        var myChart = echarts.init(document.getElementById('map'));
        var data_map = [];
        var point_data = [];
        var name = 'keqiao';
        $.get(uploadedDataURL, function (geoJson) {
          console.log(geoJson);

          for (key in geoJson.features) {
            var item_name = geoJson.features[key].properties.name;
            data_map.push({
              name: item_name,
              value: getRandomIntInclusive(10, 800)
            })
          }
          var max = 0;
          var min = 800;
          data_map.forEach(function (item) {
            max = item.value > max ? item.value : max;
            min = item.value < min ? item.value : min;
          });

          // 基于准备好的dom，初始化echarts实例
          echarts.registerMap(name, geoJson);

          // 指定图表的配置项和数据
          var option = {
            visualMap: {
              min: min,
              max: max,
              right: '15%',
              bottom: '1%',
              itemWidth: 25,
              itemHeight: 100,
              text: ['高', '低'],
              realtime: false,
              calculable: true,
              textStyle: {
                color: '#fff',
                fontSize: '20'
              },
              // inRange: {
              //   color: ['#0559AE', '#02EDFF']
              // }
            },
            tooltip: {
              trigger: 'item',
            },
            dataRange: {
              min: min,
              max: max,
              x: '5%',
              y: '80%',
              splitList: [{
                  start: 0,
                  end: 300,
                  label: '0-300',
                  color: 'green'
                },
                {
                  start: 300,
                  end: 600,
                  label: '300-600',
                  color: '#e43737'
                },
                {
                  start: 600,
                  end: max,
                  label: '>600',
                  color: '#8c0e0e'
                },
              ],
              textStyle: { //图例文字颜色 字体大小
                color: '#fff',
                fontSize: '20'
              },

            },
            //背景阴影
            geo: {
              map: name,
              label: {
                show: false
              },
              top: 'center',
              left: 'center',
              // roam: false,
              // width: '85%',
              // height: '85%',
              zoom: 1.2,
              itemStyle: {
                areaColor: '#3196fa',
                borderColor: '#3196fa',
                shadowColor: '#3196fa',
                shadowBlur: 10,
                borderWidth: 2,
              }
            },
            series: [{
              name: '西湖区',
              type: 'map',
              mapType: name,
              zoom: 1.2,
              left: 'center',
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    var str = '{a|' + params.value + '\n}' + '{b|' + params.name + '}'
                    return str
                  },
                  textStyle: {
                    color: '#333',
                    fontSize: '12'
                  },
                  rich: {
                    a: {
                      color: '#CCD62E',
                      width: 50,
                      height: 50,
                      backgroundColor: {
                        image: './assets/img/icon-jinbi.png'
                      }
                    },
                    b: {
                      padding: 5
                    },
                  }
                },
                emphasis: {
                  show: true,
                  formatter: function (params) {
                    var str = '{a|' + params.value + '\n}' + '{b|' + params.name + '}'
                    return str
                  },
                  textStyle: {
                    color: '#fff',
                    fontSize: '16'
                  },
                  rich: {
                    a: {
                      color: '#CCD62E',
                      width: 50,
                      height: 50,
                      backgroundColor: {
                        image: './assets/img/icon-jinbi.png'
                      }
                    },
                    b: {
                      padding: 5
                    },
                  }
                },

              },
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  return params.name + "：" + params.value + '人';
                }
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: 'rgba(7,157,233,0.4)',
                  borderColor: '#ddd',
                  // shadowColor: '#ccc',
                  // shadowBlur: 5,
                  // borderWidth: 2,
                },
                emphasis: {
                  areaColor: '#3093d8' //鼠标移入高亮颜色
                }
              },
              data: data_map,
            }]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          //轮播逻辑
          // auto_hover_old(data_map.length, 3000)
          function auto_hover_old(length, time) {
            var index = 0;
            setInterval(() => {
              if (index == length) {
                index = 0;
              }
              if (index == 0) {
                myChart.dispatchAction({
                  type: 'mapUnSelect',
                  name: data_map[length - 1].name
                });
              } else {
                myChart.dispatchAction({
                  type: 'mapUnSelect',
                  name: data_map[index - 1].name
                });
              }
              myChart.dispatchAction({
                type: 'mapSelect',
                name: data_map[index].name
              });
              // setTimeout(() => {
              //     myChart.dispatchAction({
              //         type: 'showTip',
              //         seriesIndex: 0, //第几条series
              //         dataIndex: index - 1, //第几个tooltip
              //     });
              // }, 0);

              index++;
              console.log(index);

            }, time);

          }
        })

      }
      chart_map();
    })
  </script>
</body>

</html>