大屏调整

fuliqi

2024-09-23 22d285974b8c6552b4cb5901d613e7d715d18182

 src/views/screen/components/lineChart.vue

@@ -3,7 +3,6 @@
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'lineChart',
@@ -28,68 +27,70 @@
      const that = this
      let option = {
        grid: {
          width: '100%'
          left: '12%',
          right: '5%'
        },
        tooltip: {
          trigger: 'item',
              formatter: function (params) {
          formatter: function (params) {
            let str = '<div><p>' + params.name + '</p></div>'
            str += params.marker + params.seriesName + '：' + params.data
            return str
          },
          textStyle: {
            fontSize: 12
            fontSize: 16
          }
        },

        // 图例组件
        legend: {
          type: 'plain',
              top: 20,
              data: ['已处理工单数', '未处理工单数'],
              textStyle: {
            color: '#A0AEC0'
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0',
            fontSize: 14
          }
        },

        // X轴配置
        xAxis: {
          type: 'category',
              boundaryGap: false,
              axisTick: {
          boundaryGap: false,
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#A0AEC0',
                  type: 'solid'
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#A0AEC0',
                fontSize: 12,
                margin: 20,
                rotate: 30
            fontSize: 14,
            margin: 20,
            rotate: 30
          },
          data: that.name,
        },
        // Y轴配置
        yAxis: {
          type: 'value',
              splitLine: {
          splitLine: {
            lineStyle: {
              color: '#A0AEC0',
                  type: 'dashed'
              type: 'dashed'
            }
          },
          splitNumber: 5,
              axisLine: {
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#A0AEC0',
                fontSize: 12,
                margin: 15
            fontSize: 14,
            margin: 5
          }
        },
        // 系列列表（多个折线图）
@@ -138,6 +139,7 @@
          }
        ]
      }

      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(option)
      window.addEventListener('resize', function () {
@@ -149,9 +151,9 @@
  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        this.name =[]
        this.data1=[]
        this.data2=[]
        this.name = []
        this.data1 = []
        this.data2 = []
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);