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

<!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
 * @LastEditTime: 2023-12-27 19:47:27
 * @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',
        // label: {
        //   show: true
        // },
        emphasis: {
          focus: 'series'
        },
        data: passRateList,
        itemStyle: {
          normal: { color: '#2359ec' }
        }
      },
      {
        name: '废片面积',
        type: 'bar',
        stack: 'total',
        // label: {
        //   show: true
        // },
        emphasis: {
          focus: 'series'
        },
        barWidth: 12,
        data: wasteList,
        itemStyle: {
          normal: { color: '#745fe4' }
        }
      },]
      // for (i = 0; i < 5; i++) {
      //   series.push({

      //   })
      // }
      const yAxisDataLeft = topNameList;
      // const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
      const yAxisDataRight = nameWasteList
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: 'auto',
          height: 'auto',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          axisLabel: {
            show: false, // 不显示坐标轴上的文字
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: [
          {
            inverse: true,
            data: yAxisDataLeft,
            axisLabel: {
              show: true,
              inside: true,
              textStyle: {
                color: '#ffffff',
                fontSize: 12,
                align: 'left',
              },
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'transparent',
                  lineHeight: 24,
                }
              }
            },
            //offset: 30,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          {
            inverse: false,
            data: yAxisDataRight,
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#ffffff',
                fontSize: 12,
                align: 'right',
              },
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'transparent',
                  lineHeight: 24,
                  fontFamily: 'digital'
                }
              }
            },
            offset: 0,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: series
      })
    }
  }
}
</script>