运行监控导出加标签

fuliqi

2024-09-20 f69b7ff73aab2174cb17c7c3e4e716c6e5170e56

 src/views/screen/components/lineChart.vue

@@ -3,18 +3,36 @@
</template>

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

export default {
  name: 'lineChart',
  data () {
  props: {
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      // 配置
      option: {
      name: [],
      data1: [],
      data2: [],

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine() {
      const that = this
      let option = {
        grid: {
          width: '100%'
        },
        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
@@ -27,9 +45,9 @@
        // 图例组件
        legend: {
          type: 'plain',
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
              top: 20,
              data: ['已处理工单数', '未处理工单数'],
              textStyle: {
            color: '#A0AEC0'
          }
        },
@@ -37,49 +55,41 @@
        // 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: 12,
                margin: 20,
                rotate: 30
          },
          data: [
            '富顺区',
            '大安区',
            '自流景区',
            '贡景区',
            '容县',
            '高新区',
            '沿滩区'
          ]
          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: 12,
                margin: 15
          }
        },
        // 系列列表（多个折线图）
@@ -87,13 +97,13 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            data: that.data1,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00a2ff' },
                { offset: 0.5, color: 'rgba(0,162,255,0.1)' },
                { offset: 1, color: 'rgba(0,162,255,0.1)' }
                {offset: 0, color: '#00a2ff'},
                {offset: 0.5, color: 'rgba(0,162,255,0.1)'},
                {offset: 1, color: 'rgba(0,162,255,0.1)'}
              ])
            },

@@ -108,13 +118,13 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: [90, 140, 160, 55, 88, 99, 100],
            data: that.data2,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#e4b54f' },
                { offset: 0.5, color: 'rgba(228,181,79,0.1)' },
                { offset: 1, color: 'rgba(228,181,79,0.1)' }
                {offset: 0, color: '#e4b54f'},
                {offset: 0.5, color: 'rgba(228,181,79,0.1)'},
                {offset: 1, color: 'rgba(228,181,79,0.1)'}
              ])
            },

@@ -127,24 +137,32 @@
            }
          }
        ]
      },

      myDrawLine: null
    }
  },

  methods: {
    initDrawLine () {
      const that = this
      }
      that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
      that.myDrawLine.setOption(that.option)
      that.myDrawLine.setOption(option)
      window.addEventListener('resize', function () {
        that.myDrawLine.resize()
      })
    }
  },

  mounted () {
  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        this.name =[]
        this.data1=[]
        this.data2=[]
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);
          this.data2.push(item.todoNum);
        })
        this.initDrawLine()
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initDrawLine()