vue2项目实践十：Echarts地图绘制_Vue.js

1、基础地图绘制

2、地图区域样式设置

3、地图文字和立体设置

<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>
<script>
import geojson from '@/assets/data.json' //引入地图数据
export default {
  data() {
    return {}
  },
  mounted() {
    let mychart = this.$echarts.init(document.getelementbyid('main'))
    this.$echarts.registermap('china', geojson)
    console.log(geojson)
    let option = {
      backgroundcolor: 'rgb(121,145,209)',
      geo: {
        map: 'china',
        aspectscale: 0.75,
        zoom: 1.1,
        itemstyle: {
          normal: {
            areacolor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorstops: [
                {
                  offset: 0,
                  color: '#09132c'
                },
                {
                  offset: 1,
                  color: '#274d68'
                }
              ],
              globalcoord: true
            },
            shadowcolor: 'rgb(58,115,192)',
            shadowoffsetx: 10,
            shadowoffsety: 11,
          }

        },
        regions: [{
          name: '南海诸岛',
          itemstyle: {
            opacity: 0.5
          }
        }]
      },
      series: [
        {
          type: 'map',
          label: {
            normal: {
              show: true,
              textstyle: {
                color: '#1de9b6'
              }
            },
            emphasis: {
              textstyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },
          zoom: 1.1,
          map: 'china',
          itemstyle: {
            normal: {
              backgroundcolor: 'rgb(147,1235,148)',
              borderwidth: 1,
              areacolor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorstops: [
                  {
                    offset: 0,
                    color: 'rgb(31,54,150)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(89,128,142)'
                  }
                ],
                globalcoord: true
              }
            },
            emphasis: {
              areacolor: 'rgb(46,229,206)',
              borderwidth: 0.1

            }
          },
        }
      ]
    }
    mychart.setoption(option)
  }
}
</script>
<style>
.map-view {
  width: 100%;

  #main {
    width: 100%;
    height: 600px;
  }
}
</style>