vue-cli使用echarts系列之漣漪效果地圖effectScatter

項目githup地址 https://github.com/shengbid/echarts-series

效果圖

 

實現步驟

1.下載地圖json數據到項目中,我的地圖下載地址 http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5

2.在項目中引入

import xilinguole from '@/utils/map/xilinguole.json' // 有子級區域

3.提供echarts展示的DOM元素,注冊地圖

<template>
  <div class="container">
    <div id="lineChart" style="height:500px"></div>
  </div>
</template>

<script>
import xilinguole from '@/utils/map/xilinguole.json' // 有下級區域
// import xilinguole from '@/utils/map/xilinguo2.json' // 無下級區域

export default {
  name: 'effectScatter',
  data() {
    return {
      option: {
        tooltip: {},
        geo: {
          map: 'city',
          zoom: 1.2,
          roam: true,
          itemStyle: {
            areaColor: '#4474ec', // 區域顏色
            borderColor: '#fff' // 區域邊線顏色
          },
          label: {
            show: true // 是否展示名稱
          },
          emphasis: {
            label: {
              // show: false
            },
            itemStyle: {
              areaColor: '#4474ec', // 高亮時區域顏色
            }
          }
        }
      },
      mapChart: ''
    }
  },
   mounted() {
    this.getMapChart()
  },
  methods: {
    // echarts初始化
    getMapChart() {
      this.mapChart = this.$echart.init(document.getElementById('lineChart'))

      this.$echart.registerMap('city', xilinguole);
      this.mapChart.setOption(this.option)
    }
  }
}
</script>

 

4.完成第三步就能在頁面中看到地圖了

 

5.增加漣漪效果, data中value數據的坐標就是下載的地圖json數據中的center數值

series: [
      { // 漣漪效果
      name: 'Top 6',
      type: 'effectScatter',
      coordinateSystem: 'geo', // 該系列使用的坐標系
      data: [{ // 數據映射
        name: "蘇尼特左旗", // 對應地圖中的name
        value: [113.653412, 43.854108, 4500] // value值,前面兩個是X軸,Y軸坐標, 后面的數據自定義,可以設置多個
        },
        {
        name: "二連浩特市",
        value: [111.97981, 43.652895, 3560]
        },
        {
        name: "阿巴嘎旗",
        value: [114.970618, 44.022728, 3300]
        },
        {
        name: "蘇尼特右旗",
        value: [112.65539, 42.746662, 2800]
        },
        {
        name: "正鑲白旗",
        value: [115.031423, 42.286807, 2100]
        },
        {
        name: "太仆寺旗",
        value: [115.28728, 41.895199, 1900]
        }
      ],
      symbolSize: function (val) { // 漣漪圖大小 val就是data中value數組
          return val[2] / 200;
      },
      encode: {
          value: 2 // 可以定義 data 的哪個維度被編碼成什么.這里的意思是把data數據的第2項(從0開始)編譯為value
      },
      showEffectOn: 'render', // 配置何時顯示特效
      rippleEffect: {
          brushType: 'stroke',
          color: 'red'
      },
      emphasis: {
        scale: false
      },
      label: {
          formatter: '{b}',
          position: 'right',
          show: false
      },
      itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(230, 10, 10, 1)',
          color: 'red'
      },
      zlevel: 1
    }
  ]

 

6.這樣就完成一個漣漪效果的地圖了,以官網的地圖為例, https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap看一下配置對應的效果

 

 

完整代碼:

<template>
  <div class="container">
    <div id="lineChart" style="height:500px"></div>
  </div>
</template>

<script>
import xilinguole from '@/utils/map/xilinguole.json' // 有下級區域
// import xilinguole from '@/utils/map/xilinguo2.json' // 無下級區域

export default {
  name: 'effectScatter',
  data() {
    return {
      option: {
        tooltip: {},
        geo: {
          map: 'city',
          zoom: 1.2,
          roam: true,
          itemStyle: {
            areaColor: '#4474ec',
            borderColor: '#fff'
          },
          label: {
            show: true
          },
          emphasis: {
            label: {
              // show: false
            },
            itemStyle: {
              areaColor: '#4474ec',
            }
          }
        },
        series: [
           { // 漣漪效果
            name: 'Top 6',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [{
              name: "蘇尼特左旗",
              value: [113.653412, 43.854108, 4500]
              },
              {
              name: "二連浩特市",
              value: [111.97981, 43.652895, 3560]
              },
              {
              name: "阿巴嘎旗",
              value: [114.970618, 44.022728, 3300]
              },
              {
              name: "蘇尼特右旗",
              value: [112.65539, 42.746662, 2800]
              },
              {
              name: "正鑲白旗",
              value: [115.031423, 42.286807, 2100]
              },
              {
              name: "太仆寺旗",
              value: [115.28728, 41.895199, 1900]
              }
            ],
            symbolSize: function (val) {
                return val[2] / 200;
            },
            encode: {
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke',
                color: 'red'
            },
            emphasis: {
              scale: false
            },
            label: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(230, 10, 10, 1)',
                color: 'red'
            },
            zlevel: 1
          }
        ]
      },
      mapChart: ''
    }
  },
   mounted() {
    this.getMapChart()
  },
  methods: {
    // echarts初始化
    getMapChart() {
      this.mapChart = this.$echart.init(document.getElementById('lineChart'))

      this.$echart.registerMap('city', xilinguole);
      this.mapChart.setOption(this.option)

    }
  }
}
</script>

 

echarts系列文章:

  vue-cli項目使用echarts系列https://www.cnblogs.com/steamed-twisted-roll/p/14376368.html

  vue-cli使用echarts系列之K線圖Candlestickhttps://www.cnblogs.com/steamed-twisted-roll/p/14368766.html

  vue-cli使用echarts系列之地圖type: map https://www.cnblogs.com/steamed-twisted-roll/p/14378535.html