echarst vue 折线图 鼠标经过区域显示tooltip，鼠标可以滑进弹框。

 let myChart = this.$echarts.init(document.getElementById("myChart"));

      // 绘制图表

      myChart.setOption({

        title: {

          // text: "堆叠区域图"

        },

        tooltip: {

          trigger: "axis",

          show: true,

          // extraCssText: "width:120px;",

          enterable: true,

          // trigger: 'item',

          position: function(point, params, dom, rect, size) {//设置鼠标能够划进提示框，将提示框定在鼠标左上角

            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下

            // 提示框位置

            var x = 0; // x坐标位置

            var y = 0; // y坐标位置

 

            // 当前鼠标位置

            var pointX = point[0];

            var pointY = point[1];

 

            // 外层div大小

            // var viewWidth = size.viewSize[0];

            // var viewHeight = size.viewSize[1];

 

            // 提示框大小

            var boxWidth = size.contentSize[0];

            var boxHeight = size.contentSize[1];

 

            // boxWidth > pointX 说明鼠标左边放不下提示框

            if (boxWidth > pointX) {

              x = 5;

            } else {

              // 左边放的下

              x = pointX - boxWidth;

            }

 

            // boxHeight > pointY 说明鼠标上边放不下提示框

            if (boxHeight > pointY) {

              y = 5;

            } else {

              // 上边放得下

              y = pointY - boxHeight;

            }

 

            return [x, y];

          },

          axisPointer: {

            type: "cross",

            label: {

              backgroundColor: "#6a7985"

            }

          },

          // triggerOn: "click", //触发方式

          // alwaysShowContent: true, //鼠标离开区域不消失

          formatter: function(params) {//自定义提示框内容

            let images = _that.img;

            var res = params[0].name;

 

            let color = ["#038eed", "green"];

            for (let i = 0; i < params.length; i++) {

              res += `<p><span style="background-color:${color[i]};display: inline-block;width:10px;height:10px;margin-right:5px;border-radius: 50%;"></span>${params[i].seriesName}:<span style="padding-left:4px"></span>${params[i].data} </p>`;

            }

            for (let j = 0; j < images.length; j++) {

              if (params[0].name == images[j].time) {

                res += `<a href="${host}${images[j].img}" target="_blank"><div style="width:125px;height:125px;padding-bottom:5px">

                

                "<img style='width:100%;height:100%;' id="specialLook" src='${images[j].img}' /> </div></a>`;

              }

            }

            return res;

          }

        },

        legend: {

          data: ["出勤人数", "抬头人数"],

          width: 100,

          right: 30

        },

 

        // toolbox: {

        //   feature: {

        //     saveAsImage: {}

        //   }

        // },

        grid: {

          left: "3%",

          right: "4%",

          bottom: "3%",

          containLabel: true

        },

        xAxis: [

          {

            type: "category",

            boundaryGap: false,

            data: this.xdata

          }

        ],

        yAxis: [

          {

            type: "value",

            minInterval: 1

          }

        ],

        series: [

          {

            name: "出勤人数",

            type: "line",

            smooth: true,

            // stack: "总量",

            // areaStyle: {

            //   color:"#038eed"

            // },

            itemStyle: {

              color: "#038eed" // 0% 处的颜色

              // color: {

 

              // type: "linear",

              // x: 0,

              // y: 0,

              // x2: 0,

              // y2: 1,

              // colorStops: [

              //   {

              //     offset: 0,

              //     color: "#1CD8D2" // 0% 处的颜色

              //   },

              //   {

              //     offset: 1,

              //     color: "#ffffff" // 100% 处的颜色

              //   }

              // ],

              // global: false // 缺省为 false

              // }

            },

            data: this.chuqinY//y坐标数据请求后端返回数据，push到chuqinY数组里

          },

          {

            name: "抬头人数",

            type: "line",

            smooth: true,

            // stack: "总量",

            // areaStyle: {},

            data: this.taitouY,// y坐标数据请求后端返回数据，push到taitouY数组里

            itemStyle: {

              color: "green" // 0% 处的颜色

            }

          }

        ]

      });