因为要实现的饼图效果较复杂，所以，需要重新写列表。

点击右侧列表的圆点，实现隐藏左侧饼图相应环状。

// 饼图，点击自定义列表，显示和隐藏饼图对应的环状数据<template>
<div class="index_div">
<a-spin :spinning="aLoading"><div class="pieMulBox"><div class="pieMulChart">
<div class="pie_mul_box">
<div class="innPieBg">
<div class="number">{{curStorageRate}}</div>
</div>
<div class="pieChart"><pie_mul ref="pie_mul" /></div>
</div>
</div><div class="pieMulMsg">
<ul>
<li v-for="(item,index) in pieMulData" :key="index" @click="clickPiechart(item, index)">
<span>{{item.label}}</span><strong>{{item.value}}</strong>
</li>
</ul>
</div></div></a-spin>
</div>
</template><script>
import { deepClone } from '@/utils/util'
import pie_mul from './pie_mul'
import {energyStateAnalysis} from '@/api/index'export default {
name: "Analysis",
components: {pie_mul},
data() {
return {
aLoading: true,
curStorageRate： null,
pieMulData: [],
hidePieData: [], // 点击隐藏的值
showPieData: [] // 点击显示的值
}
},
created() {
this.getEnergyStateAnalysis()
setTimeout(()=>{
this.aLoading = false
}, 3000)
},
methods: {
// 实时储能状态分析
getEnergyStateAnalysis() {
energyStateAnalysis().then((res) => {
// console.log('energyStateAnalysis', res)
if (res.success) {
let data = res.result
this.curStorageRate = data.curStorageRate
if(data.list && data.list.length > 0) {
let dataList = []
this.$nextTick(() => {
data.list.map(v=>{
dataList.push({ value: v.cnt, label: v.itemName })
});
this.pieMulData = dataList
this.showPieData = deepClone(dataList)
this.$refs.pie_mul.draw(dataList);
})
}
}
})
},
// 点击饼图旁边的列表，显示和隐藏饼图数据。
clickPiechart(item, idx) {
const index