网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于echarts环形图点击旋转并高亮的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据startAngle这个属性来设定图形的开始渲染的角度，使点击某个扇形时圆环旋转使之始终对准某个点。
期间考虑到某扇形区域太小点击不到，来设置最小扇形区域。
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: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
show: false,
orient: 'vertical',
x: 'left'
},
color: [ '#44bbf8', '#93e588', '#ffd87b', '#f88071' ],
series: [
{
name: '',
type: 'pie',
radius: [ '45%', '79%' ],
clockWise: false,
startAngle: 167 - ( initPieValue / sum2 * 360 / 2 ),
minAngle: minAngle,
avoidLabelOverlap: false,
itemStyle: {
emphasis: {
radius: [ '46%', '100%' ]
}
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: obj.data
}
]
};
myChart.setOption( option );
if ( minAngle === 30 ) { //最小扇形区域30时
myChart.dispatchAction( { type: 'highlight', seriesIndex: 0, dataIndex: 0 } );
}
let preDataIndex = 0;
myChart.on( 'click', ( v ) => {
if ( v.dataIndex === preDataIndex ) {
myChart.dispatchAction( {
type: 'highlight',
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: 'highlight',
seriesIndex: 0,
dataIndex: v.dataIndex
} );
}, 400 );
this.mrkName = v.data.name;
this.mrkValue = v.data.value;
} );