yudao-dev/src/views/OperationalOverview/components/pileBarChart.vue

<!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
 * @LastEditTime: 2023-12-29 16:28:26
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'linearBarChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    borderRadius: {
      type: Array,
      default: () => [9, 9, 0, 0]
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 200
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    // nameList: {
    //   type: Array,
    //   default: () => []
    // },
    // dataList: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      chart: null,
      nameList: [],
      series: [{
        type: 'bar',
        data: [],
        barWidth: 6

      }]
    }
  },
  mounted() {
    console.log('mounted')
    // console.log('borderRadius: ', this.borderRadius)
    // console.log('33333', this.dataList)
    // let arr = []
    // this.dataList.forEach(ele => {
      // console.log(ele);
    // this.series = []
    this.initChart()
    // this.$nextTick(() => {
    //   // this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
      // console.log(1)
      this.chart = echarts.init(document.getElementById(this.id))
      let series = [
        {
          // 辅助系列
          name: '良品',
          type: 'bar',
          stack: 'total',
          // silent: true,
          // itemStyle: {
            color: '#0fdedb',
          // },
          barWidth: 10,
          data: passRateList
        },
        {
          type: 'bar',
          stack: 'total',
          name: '废品',
          data: wasteList,
          barWidth: 10,
          // barWidth: 15,
          // label: {
          //   position: [10, 10],
          //   normal: {
          //     position: [800, -24],
          //     show: true,
          //     textStyle: {
          //       color: '#2359ec',
          //       fontSize: 16,
          //     },
          //   },
          // },
        }
      ]
      // for (i = 0; i < 5; i++) {
      //   series.push({

      //   })
      // }
      this.chart.setOption({
        legend: {
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: 'auto',
          height: 'auto',
          containLabel: true
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: true,
              interval: 0, //横轴信息全部显
              splitNumber: 50,
              // boundaryGap: [20, 20],
              textStyle: {
                color: '#ffffff',
                verticalAlign: 'bottom',
                fontSize: 12,
                align: 'left',
                padding: [0, 0, 15, -5]
              }
            },
            data: topNameList
          },
          {
            type: 'category',
            inverse: true,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: true,
              interval: 0, //横轴信息全部显
              splitNumber: 50,
              // boundaryGap: [20, 20],
              textStyle: {
                color: '#ffffff',
                verticalAlign: 'bottom',
                fontSize: 12,
                align: 'right',
                padding: [0, 0, 15, -5]
              }
            },
            data: nameWasteList
          }
        ],
        xAxis: {
          // max: 120,
          show: false,
        },
        series:series
      })
    }
  }
}
</script>