var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
label: {
color: "#fff"
},
animationDurationUpdate: 500,
series: {
type: 'pie',
id: 'sales',
radius: '50%',
data: [
{
value: 5,
name: 'A'
},
{
value: 2,
name: 'B'
},
{
value: 4,
name: 'C'
}
],
universalTransition: {
enabled: true,
divideShape: 'clone'
}
}
};
const drilldownData = [
{
value: 31,
name: 'a'
},
{
value: 12,
name: 'b'
},
{
value: 43,
name: 'c'
},
{
value: 13,
name: 'd'
},
{
value: 6,
name: 'e'
},
{
value: 62,
name: 'e1'
}
,
{
value: 6,
name: 'e3'
}
,
{
value: 6,
name: 'e4'
}
,
{
value: 6,
name: 'e5'
}
,
{
value: 6,
name: 'e6'
}
];
myChart.on('click', function (event) {
if (event.data) {
var subData = drilldownData
if (!subData) {
return;
}
console.log('subData', subData);
myChart.setOption({
series: {
type: 'pie',
id: 'sales',
radius: '50%',
data: subData,
universalTransition: {
enabled: true,
divideShape: 'clone'
}
},
graphic: [
{
type: 'text',
left: 50,
top: 20,
style: {
text: 'Back',
fontSize: 18,
fill: '#fff'
},
onclick: function () {
myChart.setOption(option);
}
}
]
});
}
});
option && myChart.setOption(option);
echarts饼图的下钻功能
最新推荐文章于 2024-07-30 10:14:26 发布