[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:…