Vue中echarts渲染中国地图

下载echarts

npm i echarts@4.9.0

关于echarts跟随屏幕大小缩放问题

在多个组件用echarts实现resize，用addEvenListener监听屏幕大小，每写一个都是单独
  新建一个监听回调，相较于window.onresize只能生成一个监听回调，无论新建多少个onresize只生成一个resize回调，所以就出现只能生效一个onresize监听其他不生效的问题

推荐以下写法：
  window.addEventListener('resize',()=>{

          this.chartResize=myChart.resize()
   }) 

<template>
   <div id='mapId' ref='myEchart' :style="{width:'100%',height:'600px'}">

    </div>
</template>

<script>   
/**

@使用echarts渲染地图
*/


import echarts from 'echarts' 

import '../../../node_modules/echarts/map/js/china.js'

export default {
   name: "echarts", 
    data() {
      return {
        chart: null，
        chartResize:''
      };
    },
    mounted() {
      this.chinaConfigure();
      //销毁resize监听
      window.removeEventListener('resize',this.chartResize)
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() { 
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        myChart.setOption({ // 进行相关配置
          // backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: true,
            left:'center',
            align:'bottom',
            orient:'horizontal',
            // min: 0,
            // max: 1000,
            range: null,
            text: ['2k','0'],
            textStyle: {
              color: '#eee'
            },
            realtime: false,
            calculable: false,//隐藏地图下方的进度条
            color: ['#004599', '#0A73DA', '#1890FF','#45A7FF','#69C0FF','#91D5FF','#BAE7FF']
          },
          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": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            }
          ]
        }) 
        window.addEventListener('resize',()=>{
            this.chartResize=myChart.resize()
        }) 
      }
    }
}
</script>

重点在这网上有很多china文件，但都不合适，直接引入即可

import '../../../node_modules/echarts/map/js/china.js'

如果帮到大家就点个赞吧