echarts + vue 实现人口热力图显示，包含数据结构

echarts + vue 实现人口热力图显示，包含数据结构

<!-- 热力图 -->
<template>
  <div id="myChart" style="width:1500px;height:700px"></div>
</template>

<script>
  import echarts from 'echarts'

  import 'echarts/map/js/china'
  import mapJson from '@/store/json/xuzhou.json'

  export default {
    props: {
      cityConfig: {
        type: Object,
        default () {
          return {
            name: '徐州市',
            dataJson: mapJson
          }
        }
      }
    },
    data () {
      return {
        data: [
          {name: '沛县', value: 150},
          {name: '泉山区', value: 42},
          {name: '铜山区', value: 102},
          {name: '鼓楼区', value: 81}
        ],
        toolTipData: [
          {name: '沛县', value: [{name: '农村人口', value: 10}, {name: '城市人口', value: 10}]},
          {name: '泉山区', value: [{name: '农村人口', value: 22}, {name: '城市人口', value: 20}]},
          {name: '铜山区', value: [{name: '农村人口', value: 60}, {name: '城市人口', value: 42}]},
          {name: '鼓楼区', value: [{name: '农村人口', value: 40}, {name: '城市人口', value: 41}]}
        ]
      }
    },
    components: {},
    created () {
    },
    mounted () {
      this.init()
    },
    computed: {},
    methods: {
      loadMap (mapName, data) {
        if (data) {
          echarts.registerMap(mapName, data)
        }
      },
      init () {
        var myChart = echarts.init(document.getElementById('myChart'))
        if (this.cityConfig.dataJson) {
          this.loadMap(this.cityConfig.name, this.cityConfig.dataJson)
        }
        var mapName = '徐州'

        var geoCoordMap = {}

        /* 获取地图数据 */
        myChart.showLoading()
        var mapFeatures = this.cityConfig.dataJson.features
        myChart.hideLoading()``
        mapFeatures.forEach(function (v) {
            // 地区名称
          var name = v.properties.name
            // 地区经纬度
          geoCoordMap[name] = v.properties.center
        })
        var max = 480,
          min = 9 // todo
        var maxSize4Pin = 100,
          minSize4Pin = 20

        var convertData = function (data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              })
            }
          }
          return res
        }
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              if (typeof (params.value)[2] === 'undefined') {
                var toolTiphtml = ''
                for (var i = 0; i < this.toolTipData.length; i++) {

                  if (params.name == this.toolTipData[i].name) {
                    toolTiphtml += this.toolTipData[i].name + ':<br>'
                    for (var j = 0; j < this.toolTipData[i].value.length; j++) {
                      toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'
                    }
                  }
                }
                return toolTiphtml
              } else {
                var toolTiphtml = ''
                for (var i = 0; i < this.toolTipData.length; i++) {
                  if (params.name == this.toolTipData[i].name) {
                    toolTiphtml += this.toolTipData[i].name + ':<br>'
                    for (var j = 0; j < this.toolTipData[i].value.length; j++) {
                      toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'
                    }
                  }
                }
                return toolTiphtml
              }
            }
          },
          // legend: {
          //     orient: 'vertical',
          //     y: 'bottom',
          //     x: 'right',
          //     data: ['credit_pm2.5'],
          //     textStyle: {
          //         color: '#fff'
          //     }
          // },
          visualMap: {
            show: true,
            min: 0,
            max: 200,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
              color: ['#00467F', '#A5CC82'] // 蓝绿

            }
          },
          geo: {
            show: true,
            map: mapName,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: { // 设置地图块的相关显示信息
              normal: {
                areaColor: '#d1def3',
                borderColor: '#b4caef',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#9abfff' // hover效果
              }
            }
          },
          series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(this.data),
            symbolSize: function (val) {
              return val[2] / 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#05C3F9'
              }
            }
          },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: this.data
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', // 气泡
            symbolSize: function (val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min)
              var b = minSize4Pin - a * min
              b = maxSize4Pin - a * max
              return a * val[2] + b
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 9
                },
                formatter: '{@[2]}'
              }
            },
            itemStyle: {
              normal: {
                color: '#F62157' // 标志颜色
              }
            },
            zlevel: 6,
            data: convertData(this.data)
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(this.data.sort(function (a, b) {
              return b.value - a.value
            }).slice(0, 5)),
            symbolSize: function (val) {
              return val[2] / 10
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          }

          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style scoped lang="scss">
</style>