echarts中国地图的使用

    echarts是最熟悉不过的第三方图表库，里面有n种图表，但是目前官方已经没有中国地图所以记录一次使用中国地图的属性，网络上有n篇这种文章，但是作为学习者还是总结记录一下

1、下载引入js

    虽然项目是基于vue的,但是前后端拿的是一个不知名的开源项目改的,这个项目对echarts有一定的限制，它采用的是导入echart.js的方式，但是因为导入的是echarts简化版，所以我去找了个完整版的echarts.js[http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js]和china.js[http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js]

    下载的的echarts.js南海诸岛显示有乱码,所以还是去了官方案例source下面下载的echarts.min.js.

2、地图使用

使用很简单直接贴代码，一目了然

  <div>
    <div id="china_map" style="height:400px"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'

  export default {
    data () {
      return {
        data: [
          {name: '海门', value: 9},
          {name: '鄂尔多斯', value: 12},
          {name: '招远', value: 12},
          {name: '舟山', value: 12},
          {name: '齐齐哈尔', value: 14},
          {name: '盐城', value: 15},
          {name: '赤峰', value: 16},
        ],
        geoCoordMap: {
          '海门': [121.15, 31.89],
          '鄂尔多斯': [109.781327, 39.608266],
          '招远': [120.38, 37.35],
          '舟山': [122.207216, 29.985295],
          '齐齐哈尔': [123.97, 47.33],
          '盐城': [120.13, 33.38],
          '赤峰': [118.87, 42.28],
          '青岛': [120.33, 36.07],
          '乳山': [121.52, 36.89],
          '金昌': [102.188043, 38.520089]
        }
      }
    },
    computed: {},
    mounted () {
      this.initChannelChinaMap()
    },
    activated () {
    },
    filters: {},
    methods: {
      convertData () {
        var res = []
        for (var i = 0; i < this.data.length; i++) {
          var geoCoord = this.geoCoordMap[this.data[i].name]
          if (geoCoord) {
            res.push({
              name: this.data[i].name,
              value: geoCoord.concat(this.data[i].value)
            })
          }
        }
        return res
      },

      randomValue () {
        return Math.round(Math.random() * 1000)
      },
      initChannelChinaMap () {
        let options = {
          tooltip: {},
          visualMap: {
            show: false,
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['High', 'Low'],
            seriesIndex: [1],
            inRange: {
              color: ['#29BFF7', '#fff']
            },
            calculable: true
          },
          geo: {
            map: 'china',
            roam: false,//是否可以拖拽放大
            // regions: [
            //   {
            //     name: '南海诸岛',
            //     value: 0,
            //     itemStyle: {
            //       normal: {
            //         opacity: 0,
            //         label: {
            //           show: false
            //         }
            //       }
            //     }
            //   }
            // ],
            zoom: 1.2,
            label: {
              show: false,
              color: 'rgba(0,0,0,0.4)'
            },
            itemStyle: {
              borderColor: '#cdccd0',
              // normal: {
              //   areaColor: '#eff2fb'
              // }
            },
            emphasis: {
              itemStyle: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.convertData(this.data),
              encode: {
                value: 2
              },
              symbolSize: 15,
              symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
              symbolRotate: 35,
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              itemStyle: {
                color: '#F06C00'
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: '发布情况',
              type: 'map',
              geoIndex: 0,
              data: [
                {name: '北京', value: this.randomValue()},
                {name: '天津', value: this.randomValue()},
                {name: '上海', value: this.randomValue()},
                {name: '福建', value: this.randomValue()},
                {name: '贵州', value: this.randomValue()},
                {name: '广东', value: this.randomValue()},
                {name: '青海', value: this.randomValue()},
                {name: '西藏', value: this.randomValue()},
                {name: '四川', value: this.randomValue()},
                {name: '宁夏', value: this.randomValue()},
                {name: '海南', value: this.randomValue()},
                {name: '台湾', value: this.randomValue()}
              ]
            }
          ]
        }
        this.mapDivPie = echarts.init(
          document.getElementById('china_map')
        )
        this.mapDivPie.setOption(options)
        window.addEventListener('resize', () => {
          this.mapDivPie.resize()
        })
      }
    }
  }
</script>
<style lang="scss" scope>
</style>

具体的地图上的自定义图标可以去iconfont网站上进行取

官方样例参考:https://echarts.apache.org/examples/zh/editor.html