首页 > js教程 > 正文

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

原创 2018-09-14 17:30:32 0 5
本篇文章给大家带来的内容是关于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;
} );

相关推荐:

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

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

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

  • 相关标签:echarts
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • ECharts仪表盘实例代码(附源码下载)_javascript技巧
  • 使用Echarts实现动态曲线图表
  • javascript - Echarts中的图例legend过多可否加滚动条
  • 关于echarts图表数据的转换,怎么输出固定格式得数据。
  • ECharts 在同一个页面添加多个图表_html/css_WEB-ITnose
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • JavaScript教程 JavaScript教程
  • JavaScript 入门教程 JavaScript 入门教程
  • JavaScript高级框架设计视频教程 JavaScript高级框架设计视频教程
  • 妙味课堂JavaScript视频教程 妙味课堂JavaScript视频教程
  • 相关视频章节