src/views/screen/components/lineChart.vue
@@ -3,7 +3,6 @@
</template>
<script>
import * as echarts from "echarts";
export default {
  name: 'lineChart',
@@ -13,17 +12,29 @@
      default: null,
    },
  },
  data () {
  data() {
    return {
      dataList: {
        name: [],
        data1: [],
        data2: [],
      },
      // 配置
      option: {
      name: [],
      data1: [],
      data2: [],
      myDrawLine: null
    }
  },
  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },
    initDrawLine() {
      const that = this
      let option = {
        grid: {
          width: '100%'
          left: '15%',
          right: '5%'
        },
        tooltip: {
          trigger: 'item',
@@ -33,7 +44,7 @@
            return str
          },
          textStyle: {
            fontSize: 12
            fontSize: this.setFontSize(16)
          }
        },
@@ -43,7 +54,8 @@
          top: 20,
          data: ['已处理工单数', '未处理工单数'],
          textStyle: {
            color: '#A0AEC0'
            color: '#A0AEC0',
            fontSize: this.setFontSize(14)
          }
        },
@@ -62,11 +74,11 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            fontSize: this.setFontSize(14),
            margin: 20,
            rotate: 30
          },
          data: this.dataList.name,
          data: that.name,
        },
        // Y轴配置
        yAxis: {
@@ -83,8 +95,8 @@
          },
          axisLabel: {
            color: '#A0AEC0',
            fontSize: 12,
            margin: 15
            fontSize: this.setFontSize(14),
            margin: 5
          }
        },
        // 系列列表(多个折线图)
@@ -92,13 +104,13 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: this.dataList.data1,
            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)'}
              ])
            },
@@ -113,13 +125,13 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: this.dataList.data2,
            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)'}
              ])
            },
@@ -132,17 +144,10 @@
            }
          }
        ]
      },
      }
      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()
      })
@@ -152,26 +157,20 @@
  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);
        this.name = []
        this.data1 = []
        this.data2 = []
        newV.map((item) => {
          this.name.push(item.area);
          this.data1.push(item.doneNum);
          this.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 () {
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initDrawLine()