小工具知识网

当前位置: 首页 > 行业知识 > 隐藏饼图的legend,重写legend列表。

行业知识

隐藏饼图的legend,重写legend列表。

2026-11-13 17:31:17 来源:互联网转载

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

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

                                                                                                                          {  {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

上一篇:[MySQL] MySQL表的约束

下一篇:12123服务器怎么办?