因为要实现的饼图效果较复杂,所以,需要重新写列表。
点击右侧列表的圆点,实现隐藏左侧饼图相应环状。
{ {curStorageRate}} 当前系统访问率
- { {item.label}}{ {item.value}}
import { deepClone } from '@/utils/util' import pie_mul from './Analysis/pie_mul' import scalescreen from './Analysis/scale-screen.vue' import { energyStateAnalysis } from '@/api/analysis/index' export default { name: "Analysis", components: { pie_mul, scalescreen }, data() { return { aLoading: true, 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 // let dataList = [ // { value: 62.2, label: "小1" }, // { value: 17.3, label: "基1" }, // { value: 6.2, label: "移1" }, // { value: 9.1, label: "农1" }, // { value: 3.2, label: "三1" }, // ]; // this.pieMulData = dataList // this.$refs.pie_mul.draw(dataList); 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 = this.hidePieData.indexOf(item.label); if (index > -1) { this.hidePieData.splice(index, 1); this.showPieData[idx] = item } else { this.hidePieData.push(item.la