echarts环形图点击旋转并高亮

番茄西红柿发布于2019-04-23 13:23 / 3140人阅读

摘要：通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据这个属性来设定图形的开始渲染的角度，使点击某个扇形时圆环旋转使之始终对准某个点。期间考虑到某扇形区域太小点击不到，来设置最小扇形区域。

通过计算某个扇形区域的值占整个圆的百分比来得到这个扇形的角度，从而根据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}
{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; } );

云服务器混合云 html点击球体旋转 js点击焦点图切换环形队列环形缓冲

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1808.html

HTML5，不只是看上去很美（第一弹：彩虹爆炸图）

摘要：为了不在这个问题上站错对，我们还是给他重新起一个更加响亮霸气的中文名字彩虹爆炸图，怎么样仔细研究一下彩虹爆炸图的结构，无非就是一个树形结构，并采用发射状的布局。经过一天的折腾，终于做出了一个还算过得去的彩虹爆炸图。前言 25年过去了，Brooks博士著名的没有银弹的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的炸弹：发展迅速、势不可挡。随着HTM...

wangym 2019-08-05 18:17 评论0 收藏0
数据可视化实践

摘要：但如果数据可视化做的较弱，反而会带来负面效果错误的表达往往会损害数据的传播，完全曲解和误导用户，所以更需要我们多维的展现数据，就不仅仅是单一层面，目前有多种第三方库来实现数据的可视化等。数据可视化的具体实现这里基于两种实现方式，一种一种。数据可视化的目的其实就是直观地展现数据，例如让花费数小时甚至更久才能归纳的数据量，转化成一眼就能读懂的指标；通过加减乘除、各类公式权衡计算得到的两组...

PrototypeZ 2019-08-23 13:40 评论0 收藏0
数据可视化实践

摘要：但如果数据可视化做的较弱，反而会带来负面效果错误的表达往往会损害数据的传播，完全曲解和误导用户，所以更需要我们多维的展现数据，就不仅仅是单一层面，目前有多种第三方库来实现数据的可视化等。数据可视化的具体实现这里基于两种实现方式，一种一种。数据可视化的目的其实就是直观地展现数据，例如让花费数小时甚至更久才能归纳的数据量，转化成一眼就能读懂的指标；通过加减乘除、各类公式权衡计算得到的两组...

xialong 2019-08-05 15:34 评论0 收藏0
每周前端开源推荐第六期

摘要：每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用，解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

Salamander 2019-08-28 17:53 评论0 收藏0
每周前端开源推荐第六期

摘要：每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用，解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...

channg 2019-08-19 14:23 评论0 收藏0