本篇文章给大家带来的内容是关于echarts环形图点击旋转并高亮的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据startAngle这个属性来设定图形的开始渲染的角度，使点击某个扇形时圆环旋转使之始终对准某个点。
期间考虑到某扇形区域太小点击不到，来设置最小扇形区域。
const myChartContainer = document.getElementById( 'chart' );const myChart = echarts.init( myChartContainer );let minAngle = 30;// 最小扇形区域为30for ( let i = 0; i { return v.value;} )const sum = pieValue.reduce( ( prev, cur ) => {//数据值的总和 return prev + cur;}, 0 );const sum2 = pieValue.reduce( ( prev, cur ) => { if ( cur 0 ) {//某个值大于0小于总和的1/12即30时，按30计算和 return prev + sum / 12; } return prev + cur;}, 0 );let initPieValue = pieValue[ 0 ];// 初始值if ( initPieValue 0 ) { initPieValue = sum / 12;}const option = {tooltip: { show: false, trigger: 'item', formatter: '{a}
{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 0 ) { return prev + sum / 12; // 饼图的扇形最小角度设置为30，占圆的1/12 } return prev + cur; } return prev;}, 0 );let curPieValue = pieValue[ v.dataIndex ];if ( 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;} );
登录后复制
相关推荐：
vue+Echarts实现点击高亮（附代码）
vue结合Echarts实现点击高亮效果的示例
以上就是echarts环形图点击旋转并高亮的实现方法（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2740684.html
