新大屏数据对接

fuliqi

2024-09-17 5f6abeedb7ce43853ad486731a5e99b340ec6392

 src/views/screen/components/lineChart.vue

@@ -3,10 +3,23 @@
</template>

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

export default {
  name: 'lineChart',
  props: {
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data () {
    return {
      dataList: {
        name: [],
        data1: [],
        data2: [],
      },
      // 配置
      option: {
        grid: {
@@ -53,15 +66,7 @@
            margin: 20,
            rotate: 30
          },
          data: [
            '富顺区',
            '大安区',
            '自流景区',
            '贡景区',
            '容县',
            '高新区',
            '沿滩区'
          ]
          data: this.dataList.name,
        },
        // Y轴配置
        yAxis: {
@@ -87,7 +92,7 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            data: this.dataList.data1,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -108,7 +113,7 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: [90, 140, 160, 55, 88, 99, 100],
            data: this.dataList.data2,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -144,6 +149,28 @@
    }
  },

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