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

<!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
 * @LastEditTime: 2024-03-25 18:37:26
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <div :id="id" class="productChart" :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) {
      let rawData = []
      let colors = ['#0fdedb', '#2359ec']
      if (passRateList && wasteList) {
        rawData.push(passRateList, wasteList)
        // console.log(1)
        const totalData = [];
        for (let i = 0; i < rawData[0].length; ++i) {
          let sum = 0;
          for (let j = 0; j < rawData.length; ++j) {
            sum += rawData[j][i];
          }
          totalData.push(sum);
        }
        console.log('total', totalData);
      }
      this.chart = echarts.init(document.getElementById(this.id))
      const series = [
        '良品',
        '废品',
        // 'Affiliate Ad',
        // 'Video Ad',
        // 'Search Engine'
      ].map((name, sid) => {
        // console.log(sid)
        return {
          name,
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
          },
          color:colors[sid],
          data: rawData.length != 0 ? rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did]
          ) : []
        };
      });
      // let series = [
      //   {
      //     // 辅助系列
      //     name: '良品',
      //     type: 'bar',
      //     stack: 'total',
      //     // silent: true,
      //     // itemStyle: {
      //       color: '#0fdedb',
      //     // },
      //     // barCategoryGap: '10%',
      //     barWidth: 10,
      //     data: passRateList
      //   },
      //   {
      //     type: 'bar',
      //     stack: 'total',
      //     name: '废品',
      //     // barCategoryGap: '10%',
      //     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: {
          itemWidth: 12,
          itemHeight: 12,
          top:'10',
          icon: 'rect',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top:'80',
          left: '3%',
          right: '4%',
          // bottom: '3%',
          width: 'auto',
          height: '300',
          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>
<style scoped lang="scss">


</style>