fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 src/components/Echarts/LineChart2.vue

@@ -6,39 +6,39 @@
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
// import resize from './mixins/resize'

export default {
  mixins: [resize],
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%',
      default: '100%'
    },
    height: {
      type: String,
      default: '350px',
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true,
      default: true
    },
    isMouse: {
      type: Boolean,
      default: false,
      default: false
    },
    chartData: {
      type: Object,
      required: true,
      required: true
    },
    interval: {
      type: Number,
      default: 1,
    },
      default: 1
    }
    // xdata: {
    //   type: Array,
    //   required: true
@@ -46,7 +46,7 @@
  },
  data() {
    return {
      chart: null,
      chart: null
    }
  },
  watch: {
@@ -54,8 +54,8 @@
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
      }
    }
    // xdata: {
    //   deep: true,
    //   handler(val) {
@@ -84,17 +84,17 @@
    },
    setOptions(val) {
      function fontSize(res) {
        let clientWidth =
        const clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth
        if (!clientWidth) return
        let fontSize = 100 * (clientWidth / 1920)
        const fontSize = 100 * (clientWidth / 1920)
        return res * fontSize
      }
      let that = this
      const that = this
      if (this.isMouse) {
        this.chart.on('mouseover', function (params) {
        this.chart.on('mouseover', function(params) {
          that.chart.setOption({
            series: [
              {
@@ -110,7 +110,7 @@
          })
        })
        // 增加监听，mouseout事件（鼠标离开）
        this.chart.on('mouseout', function (params) {
        this.chart.on('mouseout', function(params) {
          that.chart.setOption({
            series: [
              {
@@ -134,38 +134,38 @@
          title: {
            text: val.text,
            textStyle: {
              color: '#000000',
            },
              color: '#000000'
            }
          },
          xAxis: {
            data: val.xAxis,
            boundaryGap: false,
            axisTick: {
              show: true,
            },
              show: true
            }
          },
          grid: {
            left: '5%',
            right: '5%',
            top: '5%',
            containLabel: true,
            height: fontSize(4.3),
            height: fontSize(4.3)
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none',
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {},
            },
              saveAsImage: {}
            }
          },
          tooltip: {
            backgroundColor: 'rgba(50,50,50,0.5)',
            borderWidth: '0',
            trigger: 'axis',
            formatter: function (a) {
              let list = []
            formatter: function(a) {
              const list = []
              let listItem = ''
              for (var i = 0; i < a.length; i++) {
                list.push(
@@ -184,34 +184,33 @@
              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坐标位置
            position: function(point, params, dom, rect, size) {
              // 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
              const x = point[0]//
              const y = point[1]
              const viewWidth = size.viewSize[0]
              const viewHeight = size.viewSize[1]
              const boxWidth = size.contentSize[0]
              const boxHeight = size.contentSize[1]
              let posX = 0// x坐标位置
              let posY = 0// y坐标位置

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

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

              return [posX, posY]
            },
            axisPointer: {
              type: 'cross',
@@ -228,13 +227,13 @@

          yAxis: {
            axisTick: {
              show: true, // 轴线刻度
              show: true // 轴线刻度
            },
            axisLine: {
              show: true, //不显示坐标轴线
              show: true // 不显示坐标轴线
            },
            axisLabel: {
              show: true, //不显示坐标轴上的文字
              show: true // 不显示坐标轴上的文字
            }
            // axisLine: {
            //   lineStyle: {
@@ -245,35 +244,35 @@
          legend: {
            data: val.title,
            tooltip: {
              show: true,
              show: true
            },
            textStyle: {
              fontSize: fontSize(0.15),
              fontSize: fontSize(0.15)
            },
            widht: 'auto',
            height: 'auto',
            top: fontSize(5.5),
            top: fontSize(5.5)
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100,
              end: 100
            },
            {
              start: 0,
              end: 20,
              top: fontSize(4.8),
              height: fontSize(0.5),
            },
              height: fontSize(0.5)
            }
          ],
          series: val.series,
          series: val.series
        },
        true
      )
      window.onresize = this.chart.resize
    },
  },
    }
  }
}
</script>