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

<!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
 * @LastEditTime: 2024-04-19 15:43:08
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <div :id="id" :style="{ height:'75px', width: width }" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
import { raw } from 'body-parser';

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: 100
    },
    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')
    window.addEventListener('resize', () => {
      this.resize()
    })
    // 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: {
    resize() {
      this.chart.resize({
        width: 'auto',
        height: 90
      });;
    },
    initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
      if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
        return
      } else {
        let rawData = []
        let colors = ['#0fdedb', '#2359ec']
        rawData.push(passRateList, wasteList)
        const totalData = [];
        // if (rawData.length != 0 && raw,Data,length != 0) {
        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);
        }
        // }
        // rawData[1].map((d, did) =>
        //   console.log((d / totalData[did]).toFixed(3))
        //   // totalData[did] <= 0 ? 0 : d / totalData[did]
        // )
        console.log('total', totalData)
        const series = [
          '良品',
          '废品',
          // 'Affiliate Ad',
          // 'Video Ad',
          // 'Search Engine'
        ].map((name, sid) => {
          // console.log(sid)
          return {
            name,
            type: 'bar',
            stack: 'total',
            barWidth: 12,
            // 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]).toFixed(4)
            ) : []
          };
        });
        // this.charts.resize({
        //   //width: width,
        //   //height: height,
        //   // es6解构
        //   width,
        //   height
        // })
        this.chart = echarts.init(document.getElementById(this.id))
        let isFinished = false //标记 isFinished
        this.chart.on('finished', _ => {
          if (!isFinished) {
            console.log('我只执行一次')
            isFinished = true
            // this.isLoading = false //关闭loading
            this.chart.resize() //重新渲染charts大小
          }
          console.log(113, 'finished')
        })
        this.chart.setOption({
          legend: {
            formatter: function (name) {
              //通过name获取到数组对象中的单个对象
              let singleData = series.filter(function (item) {
                return item.name == name
              })
              return name + parseFloat((singleData[0].data * 100).toFixed(2)) + '%'
            },
            itemWidth: 12,
            itemHeight: 12,
            bottom: '20',
            left: '20',
            icon: 'roundRect',
            textStyle: {
              color: 'rgba(255,255,255,.9)',
              fontSize: 12,
            }
          },
          grid: {
            top: '0',
            left: '3%',
            right: '4%',
            // bottom: '3%',
            width: 'auto',
            height: '95',
            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: 'rgba(255,255,255,.9)',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'left',
                  padding: [0, 0, 10, -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: 'rgba(255,255,255,.9)',
                  verticalAlign: 'bottom',
                  fontSize: 16,
                  align: 'right',
                  padding: [0, 0, 10, -5]
                }
              },
              data: nameWasteList
            }
          ],
          xAxis: {
            // max: 120,
            show: false,
          },
          series: series
        })
        this.$nextTick(() => {
          setTimeout(() => {
            this.resize()
          }, 1000);
        })
      }

      // this.chart.resize({
      //   width: 'auto',
      //   height: 90
      // });;
    }
  }
}
</script>
<style scoped lang="scss">


</style>