fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 src/components/Echarts/LineChart2.vue

@@ -1,4 +1,3 @@
<<<<<<< HEAD
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>
@@ -7,35 +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
    },
    chartData: {
      type: Object,
      required: true,
      required: true
    },
    interval: {
      type: Number,
      default: 1,
    },
      default: 1
    }
    // xdata: {
    //   type: Array,
    //   required: true
@@ -43,7 +46,7 @@
  },
  data() {
    return {
      chart: null,
      chart: null
    }
  },
  watch: {
@@ -51,8 +54,8 @@
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
      }
    }
    // xdata: {
    //   deep: true,
    //   handler(val) {
@@ -80,75 +83,158 @@
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      // console.log(val,'123');
      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
      }

      // console.log('组件设置的数据')
      const that = this
      if (this.isMouse) {
        this.chart.on('mouseover', function(params) {
          that.chart.setOption({
            series: [
              {
                name: params.seriesName,
                label: {
                  show: true,
                  fontSize: 16,
                  position: [10, -15],
                  formatter: '{c}'
                }
              }
            ]
          })
        })
        // 增加监听，mouseout事件（鼠标离开）
        this.chart.on('mouseout', function(params) {
          that.chart.setOption({
            series: [
              {
                name: params.seriesName,
                lineStyle: {
                  width: 2
                },
                label: {
                  show: false
                },
                endLabel: {
                  show: false
                }
              }
            ]
          })
        })
      }
      this.chart.setOption(
        {
          title: {
            text: val.text,
            textStyle: {
              color: '#000000',
            },
              color: '#000000'
            }
          },
          xAxis: {
            data: val.xAxis,
            boundaryGap: false,
            axisTick: {
              show: true,
            },
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // },
            // axisLabel: {
            //   interval: this.interval
            // }
              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',
            position: function (pt) {
              return [pt[1], '-13%']
            formatter: function(a) {
              const 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提示框的大小
              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 (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: {
            axisTick: {
              show: false, // 轴线刻度
              show: true // 轴线刻度
            },
            axisLine: {
              show: true // 不显示坐标轴线
            },
            axisLabel: {
              show: true // 不显示坐标轴上的文字
            }
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
@@ -158,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>