vue3+ts 堆叠条形图

<template>
  <div style="padding: 10px">
    <el-card>
      <div class="inner">
        <h4>123</h4>
        <div class="solt-data">
          <el-date-picker
            v-model="rangeValue"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            @change="timeChange"
          />
        </div>
        <div id="wander" ref="chartRef" style="width: 100%; height: 280px"></div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 这里的数据应该是定义在vue的data里边的
const patrolCharacters: any = {
  one: {
    text: '杨幂',
    tetxvalue: null,
    notetxvalue: null,
  },
  two: {
    text: '刘亦菲',
    tetxvalue: null,
    notetxvalue: null,
  },
  three: {
    text: '唐嫣',
    tetxvalue: null,
    notetxvalue: null,
  },
  four: {
    text: '戚薇',
    tetxvalue: null,
    notetxvalue: null,
  },
  five: {
    text: '刘诗诗',
    tetxvalue: null,
    notetxvalue: null,
  },
  six: {
    text: '杨紫',
    tetxvalue: null,
    notetxvalue: null,
  },
  seven: {
    text: '迪丽热巴',
    tetxvalue: null,
    notetxvalue: null,
  },
  ennter: {
    text: '秦岚',
    tetxvalue: null,
    notetxvalue: null,
  },
  night: {
    text: '秦海璐',
    tetxvalue: null,
    notetxvalue: null,
  },
}
const rangeValue = ref<any>([])
const comparison = ref<any>([])
const chartRef = ref<any>(null)
const patrolCharactersT = ref<any>([])
onMounted(() => {
  const today = dayjs(new Date())
  const oneMonthAgo = today.subtract(1, 'month')
  rangeValue.value = [oneMonthAgo.format('YYYY-MM-DD'), today.format('YYYY-MM-DD')]
  const va = markRaw(echarts.init(document.getElementById('wander') as HTMLElement))
  comparison.value = va
  patrolCharactersT.value = patrolCharacters
  window.onresize = () => {
    if (comparison.value.wander) {
      comparison.value.wander.resize()
    }
    if (comparison.value.conversion) {
      comparison.value.conversion.resize()
    }
  }
})
//
function timeChange(val: any) {
  if (val) {
    wanderInit(val[0], val[1])
  } else {
    wanderInit('', '')
  }
}

async function wanderInit(startTime: any, endTime: any) {
  echartOption()
}

function echartOption() {
  const ratioData = ref<any>([])
  ratioData.value = [
    {
      notetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      tetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      year: '2019',
    },
    {
      notetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      tetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      year: '2020',
    },
    {
      notetxvalue: {
        four: 0,
        six: 3,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 1,
        two: 1,
        three: 0,
      },
      tetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 1,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      year: '2021',
    },
    {
      notetxvalue: {
        four: 1,
        six: 4,
        night: 0,
        seven: 3,
        one: 4,
        ennter: 0,
        five: 2,
        two: 2,
        three: 1,
      },
      tetxvalue: {
        four: 0,
        six: 8,
        night: 1,
        seven: 14,
        one: 10,
        ennter: 0,
        five: 1,
        two: 0,
        three: 1,
      },
      year: '2022',
    },
    {
      notetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      tetxvalue: {
        four: 0,
        six: 1,
        night: 0,
        seven: 0,
        one: 1,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      year: '2023',
    },
    {
      notetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 0,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      tetxvalue: {
        four: 0,
        six: 0,
        night: 0,
        seven: 0,
        one: 1,
        ennter: 0,
        five: 0,
        two: 0,
        three: 0,
      },
      year: '2024',
    },
  ]
  const myChart: any = comparison.value
  let xAxisList = []
  xAxisList = Object.values(patrolCharactersT.value).map((v: any) => v.text)
  if (!document.getElementById('wander')) return
  comparison.value = markRaw(echarts.init(document.getElementById('wander') as HTMLElement))
  const comparisonA: any = {
    grid: {
      containLabel: true,
    },
    options3d: {
      enabled: true,
      alpha: 60,
      beta: 0,
    },

    legend: {
      bottom: '0%',
    },

    yAxis: [
      {
        type: 'category',
        axisLabel: {
          interval: 0,
          fontSize: 14,
          fontFamily: 'TencentSans',
          formatter: (value: any) => {
            if (value && value.length > 5) {
              return `${value.slice(0, 5)}...`
            }
            return value
          },
        },
        axisTick: { show: false },
        data: xAxisList,
      },
    ],
    xAxis: {
      type: 'value',
      minInterval: 1,
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
      },
    },
    series: [],
  }
  ratioData.value.forEach((item: any) => {
    window.console.log(item, 'item', item.year)
    comparisonA.series.push({
      name: '90后',
      type: 'bar',
      stack: item.year,

      itemStyle: {
        normal: {
          color: {
            type: 'linear',

            colorStops: [
              {
                offset: 0,
                color: '#9fe085',
              },
              {
                offset: 1,
                color: '#9fe085',
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            window.console.log(params, 'function')
            if (params.value === 0) {
              return ''
            }
            return item.year
          },
        },
      },
      data: [
        item.tetxvalue.one,
        item.tetxvalue.two,
        item.tetxvalue.three,
        item.tetxvalue.four,
        item.tetxvalue.five,
        item.tetxvalue.six,
        item.tetxvalue.seven,
        item.tetxvalue.ennter,
        item.tetxvalue.night,
      ],
    })
    comparisonA.series.push({
      name: '80后',
      type: 'bar',
      stack: item.year,
      itemStyle: {
        normal: {
          color: {
            type: 'linear',

            colorStops: [
              {
                offset: 0,
                color: '#ffde5e',
              },
              {
                offset: 1,
                color: '#ffde5e',
              },
            ],
            global: false,
          },
        },
      },
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            window.console.log(params, 'function')
            if (params.value === 0) {
              return ''
            }
            return item.year
          },
        },
      },
      data: [
        item.notetxvalue.one,
        item.notetxvalue.two,
        item.notetxvalue.three,
        item.notetxvalue.four,
        item.notetxvalue.five,
        item.notetxvalue.six,
        item.notetxvalue.seven,
        item.notetxvalue.ennter,
        item.notetxvalue.night,
        item.notetxvalue.three,
      ],
    })
  })
  myChart.setOption(comparisonA)
}
onBeforeUnmount(() => {
  if (comparison.value.wander) {
    comparison.value.wander.clear() // 清空图表
    comparison.value.wander.dispose() // 释放图表组件
    comparison.value.wander = null
  }
  if (comparison.value.conversion) {
    comparison.value.conversion.clear() // 清空图表
    comparison.value.conversion.dispose() // 释放图表组件
    comparison.value.conversion = null
  }
})
</script>
<style lang="scss" scoped>
.inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-bg-2);
  border-radius: 5px;
  box-shadow: 3px 3px 7px var(--color-bg-1);

  h4 {
    padding-left: 20px;
    color: var(--color-text-2);
    font-size: 20px;
    line-height: 50px;
    border-bottom: 1px solid #e3e3e3;
  }

  .solt-data {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}
</style>