在Vue中使用Echarts地图

引入Echarts

首先我们需要在自己的项目main.js中全局引入Echarts

import echarts from 'echarts';
Vue.prototype.$echarts=echarts;

全局使用Echarts

之后我们就可以全局使用echarts，我是在index.vue中引入的echarts地图，代码如下：

<template>
    <div>
        <div ref="map" :style="{width:'100%',height:'100%'}"></div>
    </div>
</template>
<script>
    import 'echarts/map/js/china.js'//引入中国地图
    import bar from '../data/map'//引入map.js
    export default{
        data(){
            return{
                bar,
                base:{},
                initOptions: {
                  renderer:  'canvas'
                },
            }
        };
        methods:{
            windowResize(chart) {//调整浏览器大小所触发的事件
              window.addEventListener('resize', () => {
                  chart.resize();//echarts自适应屏幕大小
                  return (() => {
                    window.screenWidth = document.body.clientWidth;
                    this.screenWidth = window.screenWidth;
                  })()
              })
            },
        }；
        watch:{
       'screenWidth':function(val){ //监听屏幕宽度变化
          if(val<1300){//判断屏幕宽度的大小重新给地图设置样式
            this.bar.visualMap.top="47%";
            this.bar.visualMap.itemHeight=70;
            this.bar.visualMap.itemWidth=13
          }
          else{
            this.bar.visualMap.top="50%";
            this.bar.visualMap.itemHeight=85;
            this.bar.visualMap.itemWidth=15
          };
          this.chart.setOption(this.bar);//重新渲染页面
        },
    },
    }
</script>