zy-largeScreen-3/src/components/DeliveryRateLine.vue

<template>
    <div class="delivery-rate-line" ref="DeliveryRateLine" v-if="workOrderOnTime.length>0"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'DeliveryRateLine',
  data () {
    return {
      myChart: null,
      workOrderOnTimeNum: [],
      workOrderOnTimeName: []
    }
  },
  props: {
    workOrderOnTime: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 画图
    draw () {
      this.myChart = echarts.init(this.$refs.DeliveryRateLine)
      const option = {
        title: {
          text: '按时送达率（%）',
          left: 15,
          textStyle: {
            color: '#d4d6d7',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#d4d6d7', // 更改坐标轴文字颜色
              fontSize: 12 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: '#709cc2' // 更改坐标轴颜色
            }
          },
          axisTick: {
            show: false
          },
          data: this.workOrderOnTimeName
        },
        yAxis: {
          type: 'value',
          max: 1,
          min: 0,
          interval: 0.25,
          axisLabel: {
            formatter (value) {
              return value * 100
            },
            show: true,
            textStyle: {
              color: '#d4d6d7', // 更改坐标轴文字颜色
              fontSize: 12 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: '#709cc2' // 更改坐标轴颜色
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            // 网格线
            lineStyle: {
              color: ['rgba(255,255,255,0.1)'],
              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
            },
            show: true // 隐藏或显示
          }
        },
        grid: {
          top: '20%',
          bottom: '25%',
          left: '5%',
          right: '2%',
          borderColor: 'rgba(255,255,255,0.1)'
        },
        series: [
          {
            data: this.workOrderOnTimeNum,
            type: 'line',
            symbol: 'circle',
            symbolSize: 4,
            label: {
              show: true,
              position: 'top',
              textStyle: '#fff',
              formatter (params) {
                return (params.value * 100).toFixed(2) + '%'
              }
            },
            itemStyle: {
              normal: {
                color: '#70c282', // 折点颜色
                lineStyle: {
                  color: '#70c282' // 折线颜色
                }
              }
            }
          }
        ]
      }
      this.myChart.setOption(option)
    }
  },
  updated () {
    this.workOrderOnTimeNum = []
    this.workOrderOnTimeName = []
    if (this.workOrderOnTime.length > 0) {
      this.workOrderOnTime.forEach(item => {
        this.workOrderOnTimeNum.push(item[1] / 100)
        this.workOrderOnTimeName.push(item[0])
      })
      this.draw()
    }
  }
}
</script>

<style lang="less">
.delivery-rate-line {
  height: 1.9375rem;
  margin: 0.2rem auto 0;
}
</style>