web前端|js教程
echarts
web前端-js教程
本篇文章给大家带来的内容是关于echarts环形图点击旋转并高亮的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
android语音聊天源码,ubuntu是哪个软件,登陆tomcat默认密码,爬虫的项目,html转化为php,梅州抖音seo优化抖音搜索排名lzw
通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据startAngle这个属性来设定图形的开始渲染的角度，使点击某个扇形时圆环旋转使之始终对准某个点。
狗扑源码 密码,如何使用ubuntu命令,海龟爬虫修补视频,php分歧,高唐seo培训lzw
期间考虑到某扇形区域太小点击不到，来设置最小扇形区域。
培训门户网源码,vscode配置当前目录,ubuntu 硬盘不足,tomcat 分布部署,sqlite数据库的大小,爬虫的相关书籍和论文,php 相似图片,谷歌seo真实例子,下载类网站源码asp,易语言 获取网页源码 失败,好看的手机云电影网站模板lzw
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: old } }},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 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实现点击高亮效果的示例
