fix:监测因子趋势echarts样式修改

quanyawei

2023-09-19 7c5c458225e1e6ab32bba352c5efd33c6a78f023

 src/components/Echarts/LineChart2.vue

@@ -1,4 +1,3 @@
<<<<<<< HEAD
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>
@@ -80,7 +79,6 @@
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      // console.log(val,'123');
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
@@ -90,8 +88,7 @@
        let fontSize = 100 * (clientWidth / 1920)
        return res * fontSize
      }

      // console.log('组件设置的数据')
      let that = this
      this.chart.setOption(
        {
          title: {
@@ -106,18 +103,6 @@
            axisTick: {
              show: true,
            },
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // },
            // axisLabel: {
            //   interval: this.interval
            // }
          },
          grid: {
            left: '5%',
@@ -136,13 +121,69 @@
            },
          },
          tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
            borderWidth: '0',
            trigger: 'axis',
            position: function (pt) {
              return [pt[1], '-13%']
            formatter: function (a) {
              let list = []
              let listItem = ''
              for (var i = 0; i < a.length; i++) {
                list.push(
                  '<span style="display: inline-block;padding: 0px 0;" >' +
                  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                  a[i].color +
                  ';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
                  '</span>' +
                  a[i].seriesName +
                  '&nbsp&nbsp&nbsp&nbsp' +
                  a[i].value +
                  '</span>'
                )
              }
              listItem = list.join('<br/>')
              return ' <div div style = "width:15px; display:inline-block;" > ' + a[0].name +
                '</div>' + '<div style="padding:0px;">' + listItem + '</div>'
            },
            position: function (point, params, dom, rect, size) {
              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              let x = point[0];//
              let y = point[1];
              let viewWidth = size.viewSize[0];
              let viewHeight = size.viewSize[1];
              let boxWidth = size.contentSize[0];
              let boxHeight = size.contentSize[1];
              let posX = 0;//x坐标位置
              let posY = 0;//y坐标位置

              if (x < boxWidth) {//左边放不开
                posX = 5;
              } else {//左边放的下
                posX = x - boxWidth;
              }

              if (y < boxHeight) {//上边放不开
                posY = 5;
              } else {//上边放得下
                posY = y - boxHeight;
              }
              if (params && params.length > 20) {
                posX = point[1],
                  posY = '-10%';
              }
              return [posX, posY];

            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            textStyle: {
              color: 'rgb(255, 255, 255);',
              fontSize: fontSize(0.117), // 字体大小
            },
              lineHeight: 0
            }
          },

          yAxis: {