yudao-dev/src/views/base/dataBoard/components/LeftBottom.vue

<template>
  <div class='leftBottomBox'>
    <div class='title'>
      <svg-icon icon-class="dataBoard2" class='icon'/>
      <span>投入产出及良品率</span>
    </div>
    <div v-if='xData.length === 0' class='noData'>暂无数据</div>
    <div v-else>
      <div class="top_legend">
        <span class="chart_legend_icon1">投入</span>
        <span class="chart_legend_icon2">产出</span>
        <span><span class="chart_legend_icon3"></span>良品率</span>
      </div>
      <div id='inOutputChart' style='width: 400px;height: 290px;'></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'LeftBottom',
  props: {
    dataObj: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataObj(val) {
      this.xData = []
      this.inputData = []
      this.outputData = []
      this.goodRateData = []
      val.monthBar && val.monthBar.forEach(item => {
        this.xData.push(item.dataType)
        this.inputData.push(item.inputNum)
        this.outputData.push(item.outputNum)
        this.goodRateData.push(item.goodRate)
      })
      this.$nextTick(()=>{
      this.initChart();
      })
    }
  },
  data() {
    return {
      chartDom: '',
      chart: '',
      xData:[],
      inputData:[],
      outputData:[],
      goodRateData:[],
    }
  },
  mounted() {},
  methods: {
    initChart() {
      if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
      this.chartDom = document.getElementById('inOutputChart')
      this.chart = echarts.init(this.chartDom)
      var option;
      option = {
        grid: { top: 40, right: 10, bottom: 5, left: 10, containLabel: true },
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: this.xData,
          axisLabel: {
            color: "#fff",
            fontSize: 10,
            interval: 0,
            rotate:30
          },
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              width: 2,
              color: "#5982B2",
            },
          },
        },
        yAxis: [{
          name: "单位/片",
          nameTextStyle: {
            color: "#DFF1FE",
            fontSize: 12,
          },
          type: "value",
          axisLabel: {
            color: "#DFF1FE",
            fontSize: 12,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: "#5982B2",
            },
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: "#5982B2",
            },
          },
        },{
          name: "良品率/%",
          nameTextStyle: {
            color: "#DFF1FE",
            fontSize: 12,
          },
          type: "value",
          axisLabel: {
            color: "#DFF1FE",
            fontSize: 12,
            formatter: "{value}",
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 2,
              color: "#5982B2",
            },
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: "#5982B2",
            },
          },
        }],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          className: "qhd-chart-tooltip",
          show: true,
        },
        series: [
          {
            data: this.inputData,
            type: "bar",
            barWidth: 10,
            barGap:0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(157, 234, 245, 1)' },
                { offset: 1, color: 'rgba(110, 249, 222, 1)' },
              ]),
            },
          },
          {
            data:this.outputData,
            type: "bar",
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(92, 183, 255, 1)' },
                { offset: 1, color: 'rgba(54, 75, 254, 1)' },
              ]),
            },
          },
          {
            data:this.goodRateData,
            type: "line",
            yAxisIndex: 1,
            symbol:'circle',
            symbolSize: 7,
            color:'rgba(18, 255, 245, 1)',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(18, 255, 245, 0.8)' },
                { offset: 0.2, color: 'rgba(18, 255, 245, 0.2)' },
                { offset: 0.4, color: 'rgba(18, 255, 245, 0)' },
              ]),
            }
          }
        ],
      }
      option && this.chart.setOption(option);
    }
  }
}
</script>
<style lang='scss' scoped>
.leftBottomBox {
  width: 402px;
  height: 332px;
  background: url('../../../../assets/images/dataBoard/left-bottom.png') no-repeat;
  background-size: 100%;
  position: absolute;
  left: 23px;
  bottom:23px;
  .title {
    margin: 7px 0 0 15px;
    .icon {
      width: 32px;
      height: 32px;
      margin-right: 5px;
      vertical-align:middle;
      margin-top: 5px;
    }
    span {
      font-size: 24px;
      color: #52FFF1;
      line-height: 24px;
      vertical-align:middle;
    }
  }
  .top_legend {
    color: #fff;
    font-size: 14px;
    position: absolute;
    left:120px;
    top:50px;
    .chart_legend_icon1{
      margin-right: 10px;
    }
    .chart_legend_icon2{
      margin-right: 14px;
    }
    .chart_legend_icon1:before {
      display: inline-block;
      content: "";
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 2px;
      background: #73F8E0;
    }
    .chart_legend_icon2:before {
      display: inline-block;
      content: "";
      width: 10px;
      height: 10px;
      margin-right: 5px;
      border-radius: 2px;
      background: #497EFF;
    }
    .chart_legend_icon3 {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-radius: 4px;
      background: #73F8E0;
      position:relative;
    }
    .chart_legend_icon3:before {
      display: inline-block;
      content: "";
      width: 16px;
      height:2px;
      background: #73F8E0;
      position:absolute;
      top:3px;
      left:-4px;
    }
  }
}
.noData  {
  font-size: 24px;
  text-align: center;
  padding-top: 100px;
}
</style>
<style>
.qhd-chart-tooltip {
  background: #0a2b4f77 !important;
  border: none !important;
  backdrop-filter: blur(12px);
}
.qhd-chart-tooltip * {
  color: #fff !important;
}
</style>