• 隐藏饼图的legend，重写legend列表。

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

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

    1. <template>
    2.   <div class="index_div">
    3.     <a-spin :spinning="aLoading">
    4.       <scalescreen
    5.         :width="1920"
    6.         :height="1080"
    7.         :selfAdaption="true"
    8.         class="scale-wrap"
    9.       >
    10.                   <div class="pieMulBox">
    11.                     <div class="pieMulChart">
    12.                       <div class="pie_mul_box">
    13.                         <div class="innPieBg">
    14.                           <div class="number">{{curStorageRate}}</div>
    15.                         </div>
    16.                         <div class="pieChart">
    17.                           <pie_mul ref="pie_mul" />
    18.                         </div>
    19.                       </div>
    20.                       <p style="margin-top: 17px;">当前系统访问率</p>
    21.                     </div>
    22.  
    23.                     <div class="pieMulMsg">
    24.                       <ul>
    25.                         <li v-for="(item,index) in pieMulData" :key="index" @click="clickPiechart(item, index)">
    26.                           <span>{{item.label}}</span><strong>{{item.value}}</strong>
    27.                         </li>
    28.                       </ul>
    29.                     </div>
    30.  
    31.                   </div>
    32.               
    33.       </scalescreen>
    34.     </a-spin>
    35.   </div>
    36. </template>
    37.  
    38. <script>
    39.   import { deepClone } from '@/utils/util'
    40.   import pie_mul from './Analysis/pie_mul'
    41.   import scalescreen from './Analysis/scale-screen.vue'
    42.   import { energyStateAnalysis } from '@/api/analysis/index'
    43.  
    44.   
    45.   export default {
    46.     name: "Analysis",
    47.     components: {
    48.       pie_mul,
    49.       scalescreen
    50.     },
    51.     data() {
    52.       return {
    53.         aLoading: true,
    54.         pieMulData: [],
    55.         hidePieData: [], // 点击隐藏的值
    56.         showPieData: [] // 点击显示的值
    57.          
    58.       }
    59.     },
    60.     created() {
    61.       this.getEnergyStateAnalysis()
    62.       setTimeout(()=>{
    63.         this.aLoading = false
    64.       }, 3000)
    65.     },
    66.     methods: {
    67.       
    68.       getEnergyStateAnalysis() {
    69.         energyStateAnalysis().then((res) => {
    70.           // console.log('energyStateAnalysis', res)
    71.           if (res.success) {
    72.             let data = res.result
    73.             this.curStorageRate = data.curStorageRate
    74.  
    75.             // let dataList = [
    76.             //   { value: 62.2, label: "小1" },
    77.             //   { value: 17.3, label: "基1" },
    78.             //   { value: 6.2, label: "移1" },
    79.             //   { value: 9.1, label: "农1" },
    80.             //   { value: 3.2, label: "三1" },
    81.             // ];
    82.             // this.pieMulData = dataList
    83.             // this.$refs.pie_mul.draw(dataList);
    84.  
    85.             if(data.list && data.list.length > 0) {
    86.               let dataList = []
    87.               this.$nextTick(() => {
    88.                 data.list.map(v=>{
    89.                   dataList.push({ value: v.cnt, label: v.itemName })
    90.                 });
    91.                 this.pieMulData = dataList
    92.                 this.showPieData = deepClone(dataList)
    93.                 this.$refs.pie_mul.draw(dataList);
    94.               })
    95.             }
    96.             
    97.           }
    98.         })
    99.       },
    100.       // 点击饼图旁边的列表，显示和隐藏饼图数据。
    101.       clickPiechart(item, idx) {
    102.         const index = this.hidePieData.indexOf(item.label);
    103.         if (index > -1) {
    104.           this.hidePieData.splice(index, 1);
    105.           this.showPieData[idx] = item
    106.         } else {
    107.           this.hidePieData.push(item.label);
    108.           this.showPieData[idx] = {}
    109.         }
    110.         this.$refs.pie_mul.draw(this.showPieData);
    111.       }, 
    112.  
    113.     }
    114.   }
    115. </script>
    116.  
    117. <style scoped lang="less">
    118. .index_div {
    119.   margin: -12px -12px 0;
    120.   padding: 12px 12px 0;
    121.   background: #01091D;
    122. }
    123. ul, li {
    124.   list-style: none none outside;
    125.   padding: 0;
    126.   margin-bottom: 0;
    127. } 
    128. .pieMulBox {
    129.         display: flex;
    130.         flex-direction: row;
    131.         padding-left: 12px;
    132.         .pieMulChart {
    133.           text-align: center;
    134.           .pie_mul_box {
    135.             position: relative;
    136.             width: 150px;
    137.             height: 150px;
    138.             border: 3px solid rgba(14, 98, 121, 0.3);
    139.             border-radius: 1000px;
    140.             display: flex;
    141.             align-items: center;
    142.             justify-content: center;
    143.  
    144.             &::before {
    145.               content: '';
    146.               display: block;
    147.               width: 7px;
    148.               height: 7px;
    149.               background: #3AB9FC;
    150.               border-radius: 1000px;
    151.               position: absolute;
    152.               top: -4px;
    153.               left: 68px;
    154.             }
    155.             &::after {
    156.               content: '';
    157.               display: block;
    158.               width: 7px;
    159.               height: 7px;
    160.               background: #3AB9FC;
    161.               border-radius: 1000px;
    162.               position: absolute;
    163.               bottom: -4px;
    164.               left: 68px;
    165.             }
    166.             .pieChart {
    167.               position: absolute;
    168.               left: 0;
    169.               top: 0;
    170.               right: 0;
    171.               bottom: 0;
    172.               display: flex;
    173.               align-items: center;
    174.               justify-content: center;
    175.             }
    176.             .innPieBg {
    177.               width: 93px;
    178.               height: 93px;
    179.               border: 6px solid rgba(14, 98, 121, 0.1);
    180.               border-radius: 1000px;
    181.               position: relative;
    182.  
    183.               .number {
    184.                 font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
    185.                 font-weight: normal;
    186.                 font-size: 26px;
    187.                 color: #FFFFFF;
    188.                 line-height: 35px;
    189.                 text-align: center;
    190.                 font-style: normal;
    191.                 position: absolute;
    192.                 left: 0;
    193.                 top: 21px;
    194.                 right: 0;
    195.                 bottom: 0;
    196.                 z-index: 9;
    197.               }
    198.             }
    199.           }
    200.           p {
    201.             font-family: PingFangSC, PingFang SC;
    202.             font-weight: 400;
    203.             font-size: 18px;
    204.             color: #F0F0F0;
    205.             line-height: 25px;
    206.           }
    207.         }
    208.         .pieMulMsg {
    209.           margin-left: 68px;
    210.           padding-top: 19px;
    211.           ul {
    212.             li {
    213.               position: relative;
    214.               padding-left: 23px;
    215.               padding-bottom: 6px;
    216.               margin-bottom: 12px;
    217.  
    218.               &::before {
    219.                 content: '';
    220.                 display: inline-block;
    221.                 width: 8px;
    222.                 height: 8px;
    223.                 border-radius: 1000px;
    224.                 position: absolute;
    225.                 left: 0;
    226.                 top: 6px;
    227.               }
    228.  
    229.               &::after {
    230.                 content: '';
    231.                 display: inline-block;
    232.                 width: 118px;
    233.                 height: 1px;
    234.                 background: linear-gradient( 90deg, #0E7FC8 0%, rgba(9,159,216,0.16) 100%);
    235.                 box-shadow: 0px 20px 11px 11px rgba(0,21,38,0.01);
    236.                 opacity: 0.5;
    237.                 position: absolute;
    238.                 left: 20px;
    239.                 bottom: 0;
    240.               }
    241.  
    242.               &:nth-child(1)::before { background: linear-gradient( 180deg, #469C94 0%, #6AE6C8 100%) }
    243.               &:nth-child(2)::before { background: linear-gradient( 180deg, #21C5F5 0%, #043748 100%) }
    244.               &:nth-child(3)::before { background: linear-gradient( 180deg, #23A9FF 0%, #0321BD 100%) }
    245.               &:nth-child(4)::before { background: linear-gradient( 180deg, #FF7500 0%, #FF7500 100%) }
    246.               &:nth-child(5)::before { background: linear-gradient( 180deg, #a72a21 0%, #803d37 100%) }
    247.               &:nth-child(6)::before { background: linear-gradient( 180deg, #7b0488 0%, #3c1e69 100%) }
    248.               &:nth-child(7)::before { background: linear-gradient( 180deg, #ff00bf 0%, #651754 100%) }
    249.               span {
    250.                 display: inline-block;
    251.                 width: 110px;
    252.                 font-family: PingFangSC, PingFang SC;
    253.                 font-weight: 400;
    254.                 font-size: 16px;
    255.                 color: rgba(255,255,255,0.8);
    256.                 line-height: 22px;
    257.               }
    258.               strong {
    259.                 font-weight: normal;
    260.                 font-size: 18px;
    261.                 color: #FFFFFF;
    262.                 line-height: 19px;
    263.               }
    264.             }
    265.           }
    266.         }
    267.       }
    268.  
    269. </style>

    echarts的饼图组件：pie_mul.vue 

    1. <template>
    2.   <div class="bg">
    3.     <div id="mulPieChart" style="width: 150px;height:150px;"></div>
    4.   </div>
    5. </template>
    6.  
    7. <script>
    8. // import * as echarts from 'echarts';
    9.  
    10. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    11. import * as echarts from 'echarts/core';
    12. // 引入图表，图表后缀都为 Chart
    13. // import { LineChart } from 'echarts/charts';
    14. // import { BarChart } from 'echarts/charts';
    15. // import { CustomChart } from 'echarts/charts';
    16. import { PieChart } from 'echarts/charts';
    17. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    18. import {
    19.   // TitleComponent,
    20.   TooltipComponent,
    21.   GridComponent,
    22.   DatasetComponent,
    23.   TransformComponent,
    24.   // MarkLineComponent,
    25.   // MarkAreaComponent,
    26.   // MarkPointComponent
    27. } from 'echarts/components';
    28. // 标签自动布局、全局过渡动画等特性
    29. import { LabelLayout, UniversalTransition } from 'echarts/features';
    30. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    31. import { CanvasRenderer } from 'echarts/renderers';
    32.  
    33. // 注册必须的组件
    34. echarts.use([
    35.   // TitleComponent,
    36.   TooltipComponent,
    37.   GridComponent,
    38.   DatasetComponent,
    39.   TransformComponent,
    40.   // MarkLineComponent,
    41.   // MarkAreaComponent,
    42.   // MarkPointComponent,
    43.   // LineChart,
    44.   // BarChart,
    45.   // CustomChart,
    46.   PieChart,
    47.   LabelLayout,
    48.   UniversalTransition,
    49.   CanvasRenderer
    50. ]);
    51.  
    52. export default {
    53.   data() {
    54.     return {
    55.       status: 'loading',
    56.       loading: true,
    57.       chart: null
    58.     }
    59.   },
    60.   created() {
    61.     
    62.   },
    63.   mounted() {
    64.  
    65.   },
    66.   beforeDestroy() {
    67.  
    68.   },
    69.   methods: {
    70.     draw(sourceData) {
    71.       // console.log(sourceData)
    72.       // 基于准备好的dom，初始化echarts实例
    73.       if (!this.chart) {
    74.         this.chart = echarts.init(document.getElementById('mulPieChart'));
    75.       }
    76.       
    77.       // 指定图表的配置项和数据
    78.       let option = {
    79.         tooltip: {
    80.           trigger: 'item'
    81.         },
    82.         series: [
    83.           {
    84.             type: 'pie',
    85.             name: '',
    86.             radius: [55, 62],
    87.             legendHoverLink: false,
    88.             avoidLabelOverlap: false,
    89.             selectedOffset: 0,
    90.             padAngle: 2,
    91.             itemStyle: {
    92.               borderRadius: 2
    93.             },
    94.             label: {
    95.               show: true,
    96.               position: 'center'
    97.             },
    98.             emphasis: {
    99.               label: {
    100.                 show: false,
    101.                 fontSize: 40,
    102.                 fontWeight: 'bold'
    103.               }
    104.             },
    105.             labelLine: {
    106.               show: false
    107.             },
    108.             data: sourceData, 
    109.             itemStyle: {
    110.               normal: {
    111.                 color: function (params) {
    112.                   var colorList = [
    113.                     ['#469C94', '#6AE6C8'],
    114.                     ['#21C5F5', '#043748'],
    115.                     ['#23A9FF', '#0321BD'],
    116.                     ['#FF7500', '#FF7500'],
    117.                     ['#a72a21', '#803d37'],
    118.                     ['#7b0488', '#3c1e69'],
    119.                     ['#ff00bf', '#651754'],
    120.                   ];
    121.                   var index = params.dataIndex;
    122.                   return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
    123.                     {
    124.                       offset: 0,
    125.                       color: colorList[index][0]
    126.                     },
    127.                     {
    128.                       offset: 1,
    129.                       color: colorList[index][1]
    130.                     }
    131.                   ]);
    132.                 }
    133.               }
    134.             }
    135.           }
    136.         ]
    137.       }
    138.  
    139.       this.chart.setOption(option)
    140.     }
    141.   }
    142. }
    143. </script>
    144.  
    145. <style lang="scss" scoped>
    146. </style>
    147.

     scale-screen.vue

    1. <template>
    2.     <div class="screen-wrapper" :class="{'opacity': opacity}" ref="screenWrapper" :style="wrapperStyle">
    3.       <slot></slot>
    4.     </div>
    5.   </template>
    6.   <script>
    7.  
    8.   /**
    9.    * 防抖函数
    10.    * @param {T} fn
    11.    * @param {number} delay
    12.    * @return
    13.    */
    14.   function debounce(fn, delay) {
    15.     let timer = null;
    16.     return function (...args) {
    17.       timer = setTimeout(
    18.         () => {
    19.           typeof fn === "function" && fn.apply(null, args);
    20.           clearTimeout(timer);
    21.         },
    22.         delay > 0 ? delay : 100
    23.       );
    24.     };
    25.   }
    26.   
    27.   export default {
    28.     name: "VScaleScreen",
    29.     props: {
    30.       width: {
    31.         type: [String, Number],
    32.         default: 1920,
    33.       },
    34.       height: {
    35.         type: [String, Number],
    36.         default: 1080,
    37.       },
    38.       fullScreen: {
    39.         type: Boolean,
    40.         default: false,
    41.       },
    42.       autoScale: {
    43.         type: [Object, Boolean],
    44.         default: true,
    45.       },
    46.       selfAdaption: {
    47.         type: Boolean,
    48.         default: true,
    49.       },
    50.       delay: {
    51.         type: Number,
    52.         default: 500,
    53.       },
    54.       boxStyle: {
    55.         type: Object,
    56.         default: () => ({}),
    57.       },
    58.       wrapperStyle: {
    59.         type: Object,
    60.         default: () => ({}),
    61.       },
    62.     },
    63.     data() {
    64.       return {
    65.         currentWidth: 0,
    66.         currentHeight: 0,
    67.         originalWidth: 0,
    68.         originalHeight: 0,
    69.         onResize: null,
    70.         observer: null,
    71.         opacity: false
    72.       };
    73.     },
    74.     watch: {
    75.       selfAdaption(val) {
    76.         if (val) {
    77.           this.resize();
    78.           this.addListener();
    79.         } else {
    80.           this.clearListener();
    81.           this.clearStyle();
    82.         }
    83.       },
    84.     },
    85.     computed: {
    86.       screenWrapper() {
    87.         return this.$refs["screenWrapper"];
    88.       },
    89.     },
    90.     methods: {
    91.       initSize() {
    92.         return new Promise((resolve, reject) => {
    93.           // console.log("初始化样式");
    94.           //给父元素设置 overflow:hidden
    95.           this.screenWrapper.parentNode.style.overflow = "hidden";
    96.           this.screenWrapper.parentNode.scrollLeft = 0;
    97.           this.screenWrapper.parentNode.scrollTop = 0;
    98.   
    99.           this.$nextTick(() => {
    100.             // region 获取大屏真实尺寸
    101.             if (this.width && this.height) {
    102.               this.currentWidth = this.width;
    103.               this.currentHeight = this.height;
    104.             } else {
    105.               this.currentWidth = this.screenWrapper.clientWidth;
    106.               this.currentHeight = this.screenWrapper.clientHeight;
    107.             }
    108.             // endregion
    109.             // region 获取画布尺寸
    110.             if (!this.originalHeight || !this.originalWidth) {
    111.               this.originalWidth = window.screen.width;
    112.               this.originalHeight = window.screen.height;
    113.             }
    114.             // endregion
    115.             resolve();
    116.           });
    117.         });
    118.       },
    119.       updateSize() {
    120.         if (this.currentWidth && this.currentHeight) {
    121.           this.screenWrapper.style.width = `${this.currentWidth}px`;
    122.           this.screenWrapper.style.height = `${this.currentHeight}px`;
    123.         } else {
    124.           this.screenWrapper.style.width = `${this.originalWidth}px`;
    125.           this.screenWrapper.style.height = `${this.originalHeight}px`;
    126.         }
    127.       },
    128.       handleAutoScale(scale) {
    129.         if (!this.autoScale) return;
    130.         const screenWrapper = this.screenWrapper;
    131.         const domWidth = screenWrapper.clientWidth;
    132.         const domHeight = screenWrapper.clientHeight;
    133.         const currentWidth = document.body.clientWidth - 232;
    134.         const currentHeight = document.body.clientHeight - 111;
    135.         screenWrapper.style.transform = `scale(${scale},${scale}) `;
    136.         let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
    137.         let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
    138.         if (typeof this.autoScale === "object") {
    139.           // @ts-ignore
    140.           !this.autoScale.x && (mx = 0);
    141.           // @ts-ignore
    142.           !this.autoScale.y && (my = 0);
    143.         }
    144.         this.screenWrapper.parentNode.style.height = (this.height * scale) + 'px'
    145.         setTimeout(() => {
    146.           this.opacity = true
    147.         }, 500)
    148.       },
    149.       updateScale() {
    150.         const screenWrapper = this.screenWrapper;
    151.         // 获取真实视口尺寸
    152.         const currentWidth = document.body.clientWidth - 232;
    153.         const currentHeight = document.body.clientHeight - 111;
    154.         // 获取大屏最终的宽高onResize
    155.         const realWidth = this.currentWidth || this.originalWidth;
    156.         const realHeight = this.currentHeight || this.originalHeight;
    157.         // 计算缩放比例
    158.         const widthScale = currentWidth / realWidth;
    159.         const heightScale = currentHeight / realHeight;
    160.         // console.log({currentWidth, currentHeight,realWidth,realHeight});
    161.         // 若要铺满全屏，则按照各自比例缩放
    162.         if (this.fullScreen) {
    163.           screenWrapper.style.transform = `scale(${widthScale},${heightScale})`;
    164.           return false;
    165.         }
    166.         // 按照宽高最小比例进行缩放
    167.         const scale = Math.max(widthScale, heightScale);
    168.         this.handleAutoScale(scale);
    169.       },
    170.       initMutationObserver() {
    171.         const screenWrapper = this.screenWrapper;
    172.         const observer = (this.observer = new MutationObserver(() => {
    173.           this.onResize();
    174.         }));
    175.   
    176.         observer.observe(screenWrapper, {
    177.           attributes: true,
    178.           attributeFilter: ["style"],
    179.           attributeOldValue: true,
    180.         });
    181.       },
    182.       clearListener() {
    183.         window.removeEventListener("resize", this.onResize);
    184.       },
    185.       addListener() {
    186.         window.addEventListener("resize", this.onResize);
    187.       },
    188.       clearStyle() {
    189.         const screenWrapper = this.screenWrapper;
    190.         screenWrapper.parentNode.style.overflow = "auto";
    191.         screenWrapper.style = "";
    192.       },
    193.       async resize() {
    194.         if (!this.selfAdaption) {
    195.           return;
    196.         }
    197.         await this.initSize();
    198.         this.updateSize();
    199.         this.updateScale();
    200.       },
    201.     },
    202.     mounted() {
    203.       this.onResize = debounce(() => {
    204.         this.resize();
    205.       }, this.delay);
    206.       this.$nextTick(() => {
    207.         if (this.selfAdaption) {
    208.           this.resize();
    209.           this.addListener();
    210.         }
    211.       });
    212.     },
    213.     beforeDestroy() {
    214.       this.clearListener();
    215.     },
    216.   };
    217.   </script>
    218.   
    219.   <style scoped>
    220.   .screen-box {
    221.     overflow: hidden;
    222.     background-size: 100% 100%;
    223.     background: #000;
    224.     width: 100vw;
    225.     height: 100vh;
    226.   }
    227.   
    228.   .screen-wrapper {
    229.     transition-property: all;
    230.     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    231.     transition-duration: 500ms;
    232.     position: relative;
    233.     overflow: hidden;
    234.     z-index: 100;
    235.     transform-origin: left top;
    236.     opacity: 0;
    237.   }
    238.  
    239.   .opacity {
    240.     opacity: 1;
    241.   }
    242.   </style>

  • 相关阅读:
    不知道什么的复习题
    【AlphaHoldem】端到端强化学习玩德州扑克
    【HDU No. 1232】 畅通工程
    消息队列与快递柜之间的奇妙关系
    【数据结构】时间复杂度和空间复杂度
    Spring Boot 热部署与日志
    图像处理： ImageKit.NET 3.0.10704 Crack
    dpdk实现dns
    【AI视野·今日NLP 自然语言处理论文速览 四十九期】Fri, 6 Oct 2023
    生成网络论文阅读styleGAN1（一）：论文速览
  • 原文地址：https://blog.csdn.net/qq_42080594/article/details/139412321