vue地图实现

上代码

<template>
  <div>
      <div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
import '../utils/china'
export default {
    data() {
        return {
            
        }
    },
    mounted() {
      this.$nextTick(()=>{
          this.chinaConfigure();
      })
    },
    methods: {
        chinaConfigure() {
        let myChart = echarts.init(this.$refs.myEchart);  
        window.onresize = myChart.resize;
        myChart.setOption({ 
          backgroundColor: "#02AFDB",
          tooltip: {}, 
          dataRange: {
            show: true,
            min: 0,
            max: 1000,
            text: ['最低气温', '最高气温'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 重点配置区
            map: 'china', // 中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "西藏",
                "value": 599
              }, {
                "name": "青海",
                "value": 44
              }, {
                "name": "内蒙古",
                "value": 810
              }, {
                "name": "新疆",
                "value": 453
              }]
            }
          ]
        })
      },
    }
}
</script>

<style>

</style>