echarts地图map

 在vue中使用echarts绘制图表

npm install echarts --save // 全局安装echarts

具体代码及注释如下 ：

<template>
  <div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="map" :style="{width: '700px', height: '500px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// 引入中国地图数据
import china from 'echarts/map/json/china.json'
// 注册地图
echarts.registerMap('china', china)
export default {
  data() {
    return {}
  },
  mounted() {
    this.map()
  },
  methods: {
    map() {
      // 基于准备好的dom，初始化echarts实例
      let map = this.$el.querySelector('#map')
      function resizeMyChart() {
        map.style.width = (document.body.offsetWidth / 2) + 'px'//页面一半的大小
      }
      resizeMyChart();
      // 绘制地图