最近有一个效果，就是在vue项目中使用echarts图表，点击图表的时候，弹一个框，在点击图表其它部分，弹框消失，并且，弹框要显示在图表范围内，不可超出图表区域。
看一下效果图

上代码：
css代码

#gxid {
  height: 100%;
  width: 100%;
  border: 1px solid #efefef;
}

.con_box{
  position: relative;
   height: 600px;
  width: 900px;
  margin: 0 auto;
}
.vshow{
  position: absolute;
    width: 300px;
    height: 280px;
    background: lightcoral;
}

html

<template>
  <div class="con_box">
      <div id="gxid" @click.prevent="boxss"></div>
      <div class="vshow" v-if="modelShow" :style="modelStyle">
        <div @click="bons">123132</div>
      </div>
  </div>
</template>

<script>
import axios from "@/assets/js/axios.js";
import ECharts from 'echarts'
export default {
  data() {
    return {
      msg: "",
      modelShow:false,
      modelLeft:'',
      modelright:'',
      ecbox:{//图表宽高
         width:900,
         height:600
      },
      ecmodel:{//弹框宽高
        width:300,
        height:280
      },
      modelStyle:{
        left:'',
        top:''
      }

    };
  },
  mounted() {
    this.gxec();
  },
  methods: {
    bons(){
    console.log(11)
  },
  boxss(){
    this.modelShow=false
  },
    gxec() {
      axios.get("../a.json").then((res) => {
         this.gxecharts(res.data) 
      });
    },
    gxecharts(graph) {
        const _this= this
      var myChart = ECharts.init(document.getElementById("gxid")); //注意获取id方式
      console.log(graph)

      var categories = [];
      for (var i = 0; i < 9; i++) {
        categories[i] = {
          name: "类目" + i,
        };
      }
      graph.nodes.forEach(function (node) {
        node.itemStyle = null;
        node.value = node.symbolSize;
        node.symbolSize /= 1.5;
        node.label = {
          show: node.symbolSize > 30,
        };
        node.category = node.attributes.modularity_class;
      });
     let option = {
        title: {
          text: "Les Miserables",
          subtext: "Default layout",
          top: "bottom",
          left: "right",
        },
        tooltip: {},
        legend: [
          {
            // selectedMode: 'single',
            data: categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "Les Miserables",
            type: "graph",
            layout: "none",
            data: graph.nodes,
            links: graph.links,
            categories: categories,
            roam: true,
            focusNodeAdjacency: true,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.3)",
            },
            label: {
              position: "right",
              formatter: "{b}",
            },
            lineStyle: {
              color: "source",
              curveness: 0.3,
            },
            emphasis: {
              lineStyle: {
                width: 10,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      myChart.on('click',function(params){
      //点击空白处阻止默认事件
          params.event.event.stopPropagation()
          console.log(params)
           //当图表被点击的时候，
        _this.modelShow=true;
        let mw=window.event;
         
        //当model框显示时，判断是否有足够的空间
        if((_this.ecbox.width - mw.offsetX -20)>_this.ecmodel.width){
            _this.modelStyle.left=mw.offsetX+20 +"px"
        }else{
            _this.modelStyle.left=mw.offsetX - _this.ecmodel.width -20 + 'px'
        }
        
         if((_this.ecbox.height - mw.offsetY - 10 )>_this.ecmodel.height){
            _this.modelStyle.top=mw.offsetY +"px"
        }else{
            _this.modelStyle.top=mw.offsetY-_this.ecmodel.height + 'px'

        } 
      })
    },
  },
  
};
</script>

这是全部代码，直接复制引入echarts就可以