echarts市级县城地图加散点(圆点)

链接: 借鉴.

// An highlighted block
<template>
  <div class="div"></div>
</template>

<script>
import 'echarts/lib/component/geo'
import echarts from 'echarts/lib/echarts'
import JSON from 'echarts/map/json/341200'
export default {
  data () {
    return {
      shTempData: [{ name: '安徽阜阳宝龙开闭所', value: [116, 33] }]
    }
  },
  created () {
    console.log(echarts)
    console.log(JSON)
  },
  methods: {
  },
  mounted () {
    let myChart = echarts.init(document.querySelector('.div'))
    myChart.on('click', (params) => {
    //   window.location.href = '/#/overview'
      console.log(11111)
    })
    echarts.registerMap('阜阳市', JSON, { }) // 这个是关键，之前拿到的青州各街道数据
    // console.log(JSON)
    let option = {
      geo: {
        map: '阜阳市', // js 地图包要和echarts.registerMap()里面的名字保持一致
        type: 'map', // 地图
       	// mapType: '阜阳市', // 自定义地区要和echarts.registerMap()里面的名字保持一致
        coordinateSystem: 'geo',
        roam: true,
        zoom: 1,
        zlevel: 2,
        // data: this.shTempData, // 圆点进度纬度
        label: { // 显示地区名
          normal: {
            show: true,
			// 提示内容 里面渲染的是data里面的数据
            formatter: params => {
              return params.name
            },
            position: 'top', // 提示方向
            color: '#fff'
          },
          emphasis: {
            show: true // 点
          }
        },
        itemStyle: { // 颜色配置
          normal: {
            color: 'orangered', // 圆球拨动的颜色
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 0.5,
            areaColor: '#021642'
          },
          emphasis: {
            areaColor: 'orangered', // 滑过高亮颜色
            borderColor: '#111'
          }
          // areaColor: '#021642'
        },
        nameMap: {
          阜南县: '阜南县', // 在画图时候起的名字和data的name这个对应
          界首市: '界首市',
          临泉县: '临泉县',
          太和县: '太和县',
          颍东区: '颍东区',
          颍泉区: '颍泉区',
          颍上县: '颍上县',
          颍州区: '颍州区'
        }
      },
      title: {// 提示标题
        // text: '阜阳大数据人口流动分布图 ',
        x: 'center',
        roam: true
      },
      // 提示框
      tooltip: {
        trigger: 'item',
        formatter: function (data) {
        //   return data.data.name + '异常人数：' + data.data.valuea
        }
      },
      // 工具箱
      //   toolbox: {
      //     show: true,
      //     orient: 'vertical',
      //     left: 'right',
      //     top: 'center',
      //     // 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性
      //     feature: {
      //       dataView: { readOnly: false },
      //       restore: {},
      //       saveAsImage: {}
      //     }
      //   },
      //   visualMap: {
      //     min: 0,
      //     max: 1,
      //     text: ['异常', '正常'],
      //     realtime: false,
      //     calculable: true,
      //     inRange: {
      //       color: ['green', 'red']
      //     }
      //   },
      series: [
        {
          name: ' ',
          type: 'effectScatter', // 涟漪动画
          mapType: '阜阳市', // 自定义扩展图表类型
          coordinateSystem: 'geo',
          roam: true,
          zoom: 1,
          zlevel: 2,
          symbol: 'circle', // 标记的图形。
          symbolSize: 15, // 标记的大小。
          rippleEffect: {
            period: 4, // 动画速度，值越小，动画越快
            brushType: 'stroke' // 波纹的绘制方式
          },
          label: {
            normal: {
              show: true,
              // 提示内容
              formatter: params => {
                return params.name
              },
              position: 'top', // 提示方向
              color: '#fff'
            },
            emphasis: {
              show: true // 点
            }
          },
          itemStyle: {
            normal: {
              color: 'orangered', // 圆球拨动的颜色
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 0.5,
              areaColor: '#021642'
            },
            emphasis: {
              areaColor: 'orangered', // 滑过高亮颜色
              borderColor: '#111'
            }
            // areaColor: '#021642'
          },
          data: this.shTempData, //  在 type为'effectScatter'时就是圆点进度纬度
          nameMap: {
            阜南县: '阜南县', // 在画图时候起的名字和data的name这个对应
            界首市: '界首市',
            临泉县: '临泉县',
            太和县: '太和县',
            颍东区: '颍东区',
            颍泉区: '颍泉区',
            颍上县: '颍上县',
            颍州区: '颍州区'
          }
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style>
.div {
  width: 810px;
  height: 580px;
  margin: 0 auto;
}
</style>