javascript
复制代码
<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>
