echarts环形图点击旋转并高亮
程序员文章站
2023-11-30 16:37:52
const myChartContainer = document.getElementById( 'chart' ); const myChart = echarts.init( myChartContainer ); let minAngle = 30; for ( let i = 0; i < ......
const mychartcontainer = document.getelementbyid( 'chart' );
const mychart = echarts.init( mychartcontainer );
let minangle = 30;
for ( let i = 0; i < obj.data.length; i++ ) {
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 ) {
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 ) {
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 );
// console.log( 'sum', sum1, sum2, v.dataindex );
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;
} );
上一篇： html5新特性与用法大全了解一下