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

<!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
 * @LastEditTime: 2024-04-03 15:48:43
 * @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) {
      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]
          ) : []
        };
      });
      // 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>