登录  /  注册
首页 > web前端 > js教程 > 正文

echarts环形图点击旋转并高亮的实现方法(代码)

不言
发布: 2018-09-14 17:30:32
原创
2587人浏览过

本篇文章给大家带来的内容是关于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: &#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;
} );
登录后复制

相关推荐:

vue+Echarts实现点击高亮(附代码)

vue结合Echarts实现点击高亮效果的示例

以上就是echarts环形图点击旋转并高亮的实现方法(代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号