Heim  >  Artikel  >  Web-Frontend  >  Implementierungsmethode zum Klicken zum Drehen und Hervorheben des Echarts-Donut-Diagramms (Code)

Implementierungsmethode zum Klicken zum Drehen und Hervorheben des Echarts-Donut-Diagramms (Code)

不言
不言Original
2018-09-14 17:30:322872Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode (Code) zum Drehen und Hervorheben des Echarts-Donut-Diagramms. Ich hoffe, dass es für Sie hilfreich ist.

Ermitteln Sie den Winkel eines bestimmten Sektors, indem Sie den Prozentsatz des Werts des Sektors im gesamten Kreis berechnen, und legen Sie dann den Winkel fest, bei dem die Grafik basierend auf dem Attribut startAngle gerendert wird, sodass der Ring entsteht dreht sich, wenn ein Sektor angeklickt wird. Zielen Sie immer auf einen bestimmten Punkt. Während

wird unter Berücksichtigung der Tatsache, dass ein bestimmter fächerförmiger Bereich zu klein zum Klicken ist, der minimale fächerförmige Bereich festgelegt.

const myChartContainer = document.getElementById( 'chart' );
const myChart = echarts.init( myChartContainer );
let minAngle = 30;// 最小扇形区域为30
for ( let i = 0; i < obj.data.length; i++ ) { //某项数据为0时,最小扇形区域为0
 if ( obj.data[ i ].value === 0 ) {
  minAngle = 0;
  break;
 }
}
const pieValue = obj.data.map( v => { 
 return v.value;
} )
const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和
 return prev + cur;
}, 0 );
const sum2 = pieValue.reduce( ( prev, cur ) => {
 if ( cur < sum / 12 && cur > 0 ) {//某个值大于0小于总和的1/12即30时,按30计算和
  return prev + sum / 12;
 }
 return prev + cur;
}, 0 );
let initPieValue = pieValue[ 0 ];// 初始值
if ( initPieValue < sum / 12 && initPieValue > 0 ) {
 initPieValue = sum / 12;
}
const option = {
tooltip: {
 show: false,
 trigger: &#39;item&#39;,
 formatter: &#39;{a} <br/>{b}: {c} ({d}%)&#39;
},
legend: {
 show: false,
 orient: &#39;vertical&#39;,
 x: &#39;left&#39;
},
color: [ &#39;#44bbf8&#39;, &#39;#93e588&#39;, &#39;#ffd87b&#39;, &#39;#f88071&#39; ],
series: [
{
 name: &#39;&#39;,
 type: &#39;pie&#39;,
 radius: [ &#39;45%&#39;, &#39;79%&#39; ],
 clockWise: false,
 startAngle: 167 - ( initPieValue / sum2 * 360 / 2 ),
 minAngle: minAngle,
 avoidLabelOverlap: false,
itemStyle: {
 emphasis: {
  radius: [ &#39;46%&#39;, &#39;100%&#39; ]
 }
},
label: {
 normal: {
  show: false,
  position: &#39;center&#39;
 },
 emphasis: {
  show: false,
  textStyle: {
  fontSize: &#39;30&#39;,
  fontWeight: &#39;bold&#39;
  }
 }
},
labelLine: {
  normal: {
   show: false
  }
},
 data: obj.data
  }
 ]
};
myChart.setOption( option );
if ( minAngle === 30 ) {  //最小扇形区域30时
myChart.dispatchAction( { type: &#39;highlight&#39;, seriesIndex: 0, dataIndex: 0 } );
}
let preDataIndex = 0;
myChart.on( &#39;click&#39;, ( v ) => {
 if ( v.dataIndex === preDataIndex ) {
  myChart.dispatchAction( {
  type: &#39;highlight&#39;,
  seriesIndex: 0,
  dataIndex: v.dataIndex
 } );
 return;
}
const sum1 = pieValue.reduce( ( prev, cur, index ) => {
 if ( index < v.dataIndex ) {
  if ( cur < sum / 12 && cur > 0 ) {
   return prev + sum / 12; // 饼图的扇形最小角度设置为30,占圆的1/12
  }
  return prev + cur;
 }
 return prev;
}, 0 );
let curPieValue = pieValue[ v.dataIndex ];
if ( curPieValue < sum / 12 && curPieValue > 0 ) {
 curPieValue = sum / 12;
}
option.series[ 0 ].startAngle = 167 - ( sum1 / sum2 * 360 + curPieValue / sum2 * 360 / 2 );// 开始渲染图形的角度
myChart.setOption( option );
preDataIndex = v.dataIndex;
window.setTimeout( () => {
 myChart.dispatchAction( {
 type: &#39;highlight&#39;,
 seriesIndex: 0,
 dataIndex: v.dataIndex
 } );
}, 400 );
this.mrkName = v.data.name;
this.mrkValue = v.data.value;
} );

Verwandte Empfehlungen:

vue+Echarts zur Implementierung der Klickhervorhebung (mit Code)

vue kombiniert mit Echarts zu Klick umsetzen Beispiel für Hervorhebungseffekt

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum Klicken zum Drehen und Hervorheben des Echarts-Donut-Diagramms (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn