标签:angle name idx list value 旋转 values 自动 echarts
const list=[ {value: 1048, name: '搜索引擎'}, {value: 735, name: '直接访问'}, {value: 580, name: '邮件营销'}, {value: 484, name: '联盟广告'}, {value: 300, name: '视频广告'} ] const values=list.map(o=>o.value) option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, selectedOffset:100, clockwise:true, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '访问来源', type: 'pie', // roseType:true, startAngle:152, radius: ['25%', '40%'], data: list, itemStyle:{ // shadowOffsetX: 10, borderWidth:20, borderColor:"pink", decal:{ symbolSize:0.2 } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; const sum=list=>list.reduce((a,b)=>a+b,0) var idx =0 var angle=0 setInterval(()=>{ idx++ if(idx>=list.length){ idx=0 } angle=(360*(sum(values.slice(0,idx))+values[idx]/2)/sum(values)+90)%360 console.log(currentAngle,angle) myChart.setOption({ series:[{ startAngle:angle, selectedOffset:0, selectedMode:true, // datasetIndex:idx, select:{ focus: 'series', label:{ show:true, }, itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }); myChart.dispatchAction({ type: 'select', dataIndex:idx, }); },5000) myChart.on('click',(args)=>{ console.log(args,angle) const index=args.dataIndex angle=(360*(sum(values.slice(0,index))+values[index]/2)/sum(values)+90)%360 //点击后自动旋转的时候就在指定的扇面后旋转 idx = index myChart.setOption({ series:[{ startAngle:angle }] }) })
标签:angle,name,idx,list,value,旋转,values,自动,echarts 来源: https://www.cnblogs.com/llcdbk/p/15802748.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。