[vue] [Echarts] Pie chart with a circle of lines – cycle highlight – configuration of label and labelLine_echarts labelline_Yamagaki Tsuruno’s Blog

class=”markdown_views prism-atom-one-dark”>

About Echarts implementation of a pie chart with a circle of lines – circular highlighting – configuration of label and labelLine


1. Key code

//option configuration
  this.option = {
     
     tooltip: {
     
       trigger: 'item',
       show: false,
     },
     legend: {
      show: false}  ,
     series: [
         //pie chart
       {
     
         type: 'pie',
         hoverAnimation: false,//Hide the move-in animation
         selectedMode: 'single',//highlight effect
         radius: [0, '56%'],,//display range
         center: ['45%', '55%']  , //The position of the picture, the distance from the left to the top
         labelLine: {
      show: false,   },
         label: {
      show: false,   },
         data: this.dataList1
       },
       //edge
       {
     
         type: 'pie',
         radius: ['63%', '64%']  ,
         center: ['45%', '55%']  ,
         hoverAnimation: false,
         selectedMode: 'single',
         labelLine: { show: false,   },
         label: {
      show: false,   },
         data: this.dataList
       },
     ]
 };
 

Cycle highlighting – and configuration of indicator lines

//Set timer timing cycle
 this.time = setInterval(() => {
     
     this.highIndex++
     this.highIndex = this.highIndex >= this.dataLen "token number">0 : this.highIndex;
     this.dataList[this.highIndex].  selected = true;//Highlight moving effect
     this.dataList1[this.highIndex].  selected = true;//Highlight moving effect
     // instruction text configuration
     this.dataList1[this.highIndex].  label = {
     
       normal: {
     
         show: true,
         formatter: '{per|{d}%}\n{b|{b}}',//format
         padding: [0, -90],//position
         rich: {
     //style
           b: {
     
             color: '#fff',
             fontSize: 18,
             lineHeight: 33,
             align: 'center',
           },
           per: {
     
             lineHeight: 33,
             fontSize: 22,
             color: '#fff',
             fontWeight: 'bold',
             padding: [25, 0],
             align: 'center'
           }
         },
       },
     };
     //Indicator line configuration
     this.dataList1[this.highIndex].  labelLine = {
     
       normal: {
     
         show: true,
         lineStyle: {
      color: '#fff' },
         smooth: 0.2,
         length: 20,//The length of the first line
         length2: 90,//The length of the second line
       }
     };
     if (this.highIndex == 0)  {
     
       this.dataList[this.dataLen - 1  ].selected = false;
       this.dataList1[this.dataLen - 1  ].selected = false;
       if (this.dataList1[this.dataLen  - 1].lab
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 2rem;
       .left {
     
         display: flex;
         align-items: center;
       }
       .icon {
     
         width: 2.9rem;
         height: 0.4rem;
         margin-right: 1.5rem;
       }
       .name {
     
         font-size: 2.1rem;
         font-family: Source Han Sans CN;
         font-weight: 500;
         color: #ffffff;
       }
     }
   }
   .con {
     
     height: 100%;
     width: 75%;
     position: absolute;
     bottom: 0%;
     overflow: hidden;
     .cityGreenLand-charts {
     
       position: absolute;
       left: -0%;
       bottom: 5%;
       z-index: 2;
       height: 100%;
       width: 100%;
       // transform: scale(1.5);
     }
     .offlineBack {
     
       position: absolute;
       height: 100%;
       width: 60%;
       bottom: 2%;
       left: 3%;
       z-index: 1;
       transform: rotateZ(0deg);
       background-size: contain;
       overflow: hidden;
       .title {
     
         position: absolute;
         top: 15%;
         left: 50%;
         transform: translateX(-50%);
         z-index: 5;
         font-size: 2.8rem;
         font-family: Source Han Sans CN;
         font-weight: bold;
         text-shadow: 0 0 8px #fff, 0 0 15px #00c8ff;
         // font-style: italic;
         color: #ffffff;
         text-align: center;
       }
       // height: 200px;
       // animation: round-animate 5s linear infinite;
       img {
     
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: auto;
       }
     }
   }
 }
 /style
 

bottom: 2%;
left: 3%;
z–index: 1;
transform: rotateZ(0deg);
background–size: contain;
overflow: hidden;
.title {

position: absolute;
top: 15%;
left: 50%;
transform: translateX(–50%);
z–index: 5;
font–size: 2.8rem;
font–family: Source Han Sans CN;
font–weight: bold;
text–shadow: 0 0 8px #fff, 0 0 15px #00c8ff;
// font-style: italic;
color: #ffffff;
text–align: center;
}
// height: 200px;
// animation: round-animate 5s linear infinite;
img {

position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
}
}
}
}
/style