Echart 条形堆叠图自定义工具提示内容（解析 HTML 标记和样式）

<script lang="ts" setup>
import { useDark } from '@vueuse/core'
import { computed, ref } from 'vue'
import VueEcharts from 'vue-echarts'
import { regulatoryBodiesIdStore } from '@/stores/insuiList'
import { storeToRefs } from 'pinia'
const { regulatoryBodiesId } = storeToRefs(regulatoryBodiesIdStore())
import parametersuperApi from '@/api/parametersuper/index'
const coalStorageRateList = ref([])
const complaintRateList = ref([])
const dataCompletionRateList = ref([])
const heatingFailureRateList = ref([])
const orgNameList = ref([])
const temperatureStandardRateList = ref([])
const threeModificationCompletionRateList = ref([])
const totalScoreList = ref([])
// 请求接口拿数据
const get_comprehensive_static_rank = () => {
  parametersuperApi.get_comprehensive_static_rank_api(regulatoryBodiesId.value).then((res: any) => {
    coalStorageRateList.value = res.data.coalStorageRateList
    complaintRateList.value = res.data.complaintRateList
    dataCompletionRateList.value = res.data.dataCompletionRateList
    heatingFailureRateList.value = res.data.heatingFailureRateList
    orgNameList.value = res.data.orgNameList
    temperatureStandardRateList.value = res.data.temperatureStandardRateList
    threeModificationCompletionRateList.value = res.data.threeModificationCompletionRateList
    totalScoreList.value = res.data.totalScoreList
  })
}

get_comprehensive_static_rank()
const isDark = useDark()
// 监听主题的变化
const chartTheme = computed(() => {
  return isDark.value ? 'dark' : 'light'
})
// 计算总分方法
const getSumScore = (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => {
  return v1 + v2 + v3 + v4 + v5 + v6
}
// echart图表配置
const chartOption = computed(() => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params: any) {
        // 自定义提示框内容格式   可以解析html标签和样式
        return `${params[0].name}<br/>
        <div style="height: 20px;width: 50px;position: relative;">
        <div style="width: 10px;height: 10px;position: absolute;left:0;top:5px;border-radius: 5px;background-color: red;"></div>
        <div style="width: 30px;height: 20px;position: absolute;left:20px;top:0;">总分：${getSumScore(params[0].value, params[1].value, params[2].value, params[3].value, params[4].value, params[5].value)}
        </div>
        </div>
        <div style="height: 20px;width: 50px;position: relative;">
        <div style="width: 10px;height: 10px;position: absolute;left:0;top:5px;border-radius: 5px;background-color: green;"></div>
        <div style="width: 30px;height: 20px;position: absolute;left:20px;top:0;">${params[0].seriesName}: ${params[0].value}
        </div>
        </div>
        ${params[1].seriesName}: ${params[1].value}<br/>${params[2].seriesName}: ${params[2].value}<br/>${params[3].seriesName}: ${params[3].value}<br/>${params[4].seriesName}: ${params[4].value}<br/>${params[5].seriesName}: ${params[5].value}`
      }
    },
    // tooltip: {
    //   trigger: 'axis',
    //   formatter: function (params: any) {
    //     return `${params.value} 个`
    //   }
    // },

    backgroundColor: isDark.value ? 'transparent' : '#ffffff', // 暗黑模式下透明，其他模式下白色
    legend: {},
    grid: {
      left: '1%',
      right: '6%',
      bottom: '10%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    // y轴  公司名
    yAxis: {
      type: 'category',
      data: orgNameList.value
    },
    // 堆叠图  每个系列图配置
    series: [
      // {
      //   name: '总分',
      //   type: 'bar',
      //   stack: 'total',
      //   emphasis: {
      //     focus: 'series'
      //   },
      //   data: totalScoreList.value
      // },
      {
        name: '投诉率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: complaintRateList.value
      },
      {
        name: '室温达标率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: temperatureStandardRateList.value
      },
      {
        name: '供热故障影响率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: heatingFailureRateList.value
      },
      {
        name: '储煤率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: coalStorageRateList.value
      },
      {
        name: '数据完整率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: dataCompletionRateList.value
      },
      {
        name: '三修完成率',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: threeModificationCompletionRateList.value
      }
    ],
    // 放大缩小  工具条
    dataZoom: [
      {
        type: 'slider',
        show: true,
        yAxisIndex: [0]
      },
      {
        type: 'inside',
        yAxisIndex: [0]
      }
    ]
  }
})
</script>
<template>
  <VueEcharts
    style=""
    :update-options="{
      notMerge: true
    }"
    :theme="chartTheme"
    :option="chartOption"
    autoresize
  />
</template>