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