如何使用echarts做饼状图

2025-03-10 15:22:58
推荐回答(2个)
回答1:


2
3
4
5 饼状图练习
6
13
14
15
16


17
89
90

回答2:

看代码就好:
var myChartones = echarts.init(document.getElementById('Genders'));
var myChartoneoption = {
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
legend: {
x: 'center',
y: 'bottom',
data:['自理','轻度依赖','中度依赖','严重依赖'],

},
series : [
{

type:'pie',
radius : [40, 60],
center : ['50%', '50%'],
roseType : 'radius',
},
{
name:'面积模式',
type:'pie',
radius : [30, 150],
center : ['50%', '50%'],
roseType : 'area',
data:[
{value:10, name:'自理',itemStyle:{normal:{color:'#f03f37'}}},
{value:5, name:'轻度依赖',itemStyle:{normal:{color:'#f7941c'}}},
{value:15, name:'中度依赖',itemStyle:{normal:{color:'#f86961'}}},
{value:25, name:'严重依赖',itemStyle:{normal:{color:'#bf1d2d'}}}

]
}
]
}

myChartones = document.getElementById('Genders');
var myChartone= echarts.init(myChartones);
var resizeContainers = function (obj) {
myChartones.style.width = (window.innerWidth/2) +'px';
myChartones.style.height = (window.innerHeight/2)+'px';
};
resizeContainers(myChartones);
myChartone.resize();
myChartone.setOption(myChartoneoption);
$(window).resize(function(){
resizeContainers(myChartones);
myChartone.resize();
});