深圳地圖echarts

<template>
    <div ref="projectMap" style="width:1000px;height:500px;"></div>
</template>
<script>
import cqmap from './map.json'// 就是這麼個意思
export default {
  methods: {
    echartsInit () {
      // 使用ref代替document.getElementById
      const echartsDom = this.$refs.projectMap
      if (echartsDom) {
        const myChart = window.echarts.init(echartsDom)
        // 此處的cqmap是通過上面地址下載好的重慶市地圖的json資料
        window.echarts.registerMap('CQ', cqmap)
        const options = {
          // title是標題，根據需求是否需要，不需要直接false，需要的話自己看api配置項；
          title: {
            show: false,
          },
          // 滑鼠移入展示的提示框，同樣參考api配置項，{a}{b}等都有各自的意義
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>工程專案：{c}',
          },
          // 工具欄   設定為false不展示，內建有匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具，暫不需要
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            // 自定義方法
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },
          visualMap: {
            show: false, // 雖然不展示視覺對映元件，但是下面的某些配置是生效的
            // min: 100,
            // max: 700,
            // text: ["High", "Low"],
            realtime: false,
            // calculable: true,
            inRange: {
              color: ['rgb(0,137,121)'],
            },
          },
          color: ['#fff'], // 展示的字型顏色
          series: [
            {
              // tooltip展示的標題，設定formatter後直接通過{b}展示區域name，此值的代號為{a}。
              name: '展示的名稱',
              type: 'map',
              mapType: 'CQ', // 自定義擴充套件圖表型別，必須和registerMap的第一個引數相同
              // roam: true, //可以拖拽和縮放
              label: {
                show: true,
                color: '#fff',
              },
              data: [
                { name: '羅湖區', value: this.randomData() },
                { name: '福田區', value: this.randomData() },
                { name: '南山區', value: this.randomData() },
                { name: '龍華區', value: this.randomData() },
                { name: '寶安區', value: this.randomData() },
                { name: '坪山區', value: this.randomData() },
                { name: '龍崗區', value: this.randomData() },
                { name: '城口縣', value: this.randomData() },
                { name: '大鵬新區', value: this.randomData() },
                { name: '光明區', value: this.randomData() },
                { name: '鹽田區', value: this.randomData() },
                // { name: '巫山縣', value: this.randomData() },
                // { name: '涪陵區', value: this.randomData() },
                // { name: '豐都縣', value: this.randomData() },
                // { name: '武隆區', value: this.randomData() },
                // { name: '南川區', value: this.randomData() },
                // { name: '秀山土家族苗族自治縣', value: this.randomData() },
                // { name: '黔江區', value: this.randomData() },
                // { name: '合川區', value: this.randomData() },
                // { name: '綦江區', value: this.randomData() },
                // { name: '忠縣', value: this.randomData() },
                // { name: '梁平區', value: this.randomData() },
                // { name: '巴南區', value: this.randomData() },
                // { name: '潼南區', value: this.randomData() },
                // { name: '永川區', value: this.randomData() },
                // { name: '墊江縣', value: this.randomData() },
                // { name: '渝北區', value: this.randomData() },
                // { name: '長壽區', value: this.randomData() },
                // { name: '大足區', value: this.randomData() },
                // { name: '銅梁區', value: this.randomData() },
                // { name: '榮昌區', value: this.randomData() },
                // { name: '璧山區', value: this.randomData() },
                // { name: '北碚區', value: this.randomData() },
                // { name: '萬盛區', value: this.randomData() },
                // { name: '九龍坡區', value: this.randomData() },
                // { name: '沙坪壩區', value: this.randomData() },
                // { name: '南岸區', value: this.randomData() },
                // { name: '江北區', value: this.randomData() },
                // { name: '大渡口區', value: this.randomData() },
                // { name: '渝中區', value: this.randomData() },
              ],
              // 自定義名稱對映，json中properties的name如果是英文代號的話，可以使用nameMap和中文名對應起來，如果name是中文的話則不需要nameMap
              // nameMap: {
              //   ckx: "城口縣"
              // },
            },
          ],
        }
        myChart.setOption(options)
      }
    },
    randomData () {
      return Math.round(Math.random() * 1000)
    },
  },
  // 使用mounted的原因是因為在mounted中dom已經載入完畢，否則會報錯，找不到getAttribute這個方法
  mounted () {
    this.$nextTick(() => {
      this.echartsInit()
    })
  },
}
</script>
<style lang="scss" scoped>

</style>

地圖json :http://datav.aliyun.com/tools/atlas/#&lat=22.859177836173288&lng=113.68440594166313&zoom=12.5