vue+echarts市级地图展示

vue+echarts市级地图展示

json文件获取地址：http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

<style scoped>
  .o-echarts {
    width: 800px;
    height: 600px;
    background-color: #f3f3f3;
  }
</style>
<template>
 <el-card class="mapBox1">
   <div :id="id" class="o-echarts"></div>
 </el-card>
</template>

<script>
  import echarts from 'echarts'
  // import JSON from 'echarts/map/json/xuzhou.json'
  import JSON from '@/store/json/xuzhou.json'

  export default {
    name: 'echart-map',
    data () {
      return {
        id: 'echarts_',
        echartObj: null,
        radioList: {
          A: '农村人口',
          B: '城镇人口'
        },
        radioActive: 'A',
        option: {
          title: {
            text: '选择所要查询的农村/城镇人口',
            top: '3%',
            left: 'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 500,
              color: '#000000'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
          },
          legend: {
            orient: 'vertical',
            top: '9%',
            left: '35%',
            icon: 'circle',
            data: [],
            selectedMode: 'single',
            selected: {},
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 30,
            inactiveColor: '#55007f',
            textStyle: {
              color: '#55ffff',
              fontSize: 14,
              fontWeight: 300,
              padding: [0, 0, 0, 15]
            }
          },
          visualMap: {
            min: 0,
            max: 500,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          geo: { // 设置地图的显示信息
            map: '徐州',
            label: {
              normal: { // 设置字体相关信息
                show: true,
                color: '#000'
              },
              emphasis: { // 设置鼠标移上去hover效果
                show: true,
                color: '#fff'
              }
            },
            // 是否开启缩放
            // roam: true,
            itemStyle: { // 设置地图块的相关显示信息
              normal: {
                // areaColor: '#8db200',
                // borderColor: '#6367ad',
                borderWidth: 1
              },
              emphasis: {
                // areaColor: '#feb6aa' // hover效果
              }
            },
            left: '5%',
            right: '5%',
            top: '5%',
            bottom: '5%'
          },
          series: [{ // 地图块的相关信息
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: []
          }]
        }
      }
    },
    mounted () {
      // 初始化并渲染
      this.echartObj = echarts.init(document.getElementById(this.id))
      echarts.registerMap('徐州', JSON)
      this.echartObj.setOption(this.getOptions(), true)
      // 左上角的按钮点击事件
      this.echartObj.on('legendselectchanged', params => {
        this.radioActive = Object.keys(this.radioList).filter(item => this.radioList[item] === params.name)[0]
        this.echartObj.clear()
        this.echartObj.setOption(this.getOptions())
      })
      // 监听浏览器大小变化重渲染组件
      window.addEventListener('resize', () => {
        if (this.echartObj && this.echartObj.resize) {
          this.echartObj.resize()
        }
      })
    },
    methods: {
      getOptions () {
        this.setOptions('legend', {
          data: Object.values(this.radioList),
          selected: (list => {
            const obj = {}
            Object.keys(list).map((item, index) => {
              obj[list[item]] = item === this.radioActive
            })
            return obj
          })(this.radioList)
        })
        this.setOptions('series', (() => {
          const arr = []
          Object.values(this.radioList)
            .map((item, index) => {
              arr[this.radioList[this.radioActive] === item ? 'unshift' : 'push']({
                name: item,
                type: 'map',
                geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                data: this.getSeriesData(item)
              })
            })
          return arr
        })())
        return this.option
      },
      // getSeriesData 获取模拟数据方法
      getSeriesData (item) {
        return this.radioList[this.radioActive] === item ? JSON.features.map(item => {
          return {
            name: item.properties.name,
            value: Math.ceil(Math.random() * 500),
            obj: {
              a: Math.ceil(Math.random() * 500),
              b: Math.ceil(Math.random() * 500)
            }
          }
        }) : []
      },
      // setOptions 设置option里面的配置信息
      setOptions (objKey, objVal) {
        if (this.option[objKey] && typeof this.option[objKey] === 'object' && !Array.isArray(this.option[objKey])) {
          this.option[objKey] = Object.assign(this.option[objKey], objVal)
        } else {
          this.option[objKey] = objVal
        }
        this.$set(this.option, objKey, this.option[objKey])
      }
    }
  }
</script>