echarts在一个div图例中显示多个饼图。实例

最新推荐文章于 2025-01-25 20:40:22 发布

原创最新推荐文章于 2025-01-25 20:40:22 发布 · 2.1w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts绘制三个并排的饼图，并详细解释了背景颜色设置、提示框配置、图例位置、工具箱功能及系列个性化样式等关键配置。

var myChart = echarts.init(document.getElementById("1"));

myChart.setOption({

backgroundColor: '#f7f7f7',//背景颜色
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
data:['班车','包车']
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable:false,
series : [
{
name:'3',
type:'pie',
center: ['20%', '50%'],
radius : [40,50],
data:[
{value:214, name:'班车'},
{value:300, name:'包车'},
],
itemStyle: {//系列级个性化
normal: {
color: function(params) {
var colorList = [
'#339CD1','#FE8463','#9BCA63','#FAD860'
];
return colorList[params.dataIndex]
},
labelLine:{//饼图不显示线条
length:2,
show:false
},
label:{//饼图不显示文字
show:true,
position : 'inner',//饼图图上显示百分比
formatter : function (params) {
return (params.percent - 0).toFixed(0) + '%'
},
textStyle:{
fontSize:14
}
},
}
}
},
{
name:'1',
type:'pie',
center: ['45%', '50%'],
radius : [40,50],
data:[
{value:314, name:'班车'},
{value:200, name:'包车'},
],
itemStyle: {//系列级个性化
normal: {
color: function(params) {
var colorList = [
'#339CD1','#FE8463','#9BCA63','#FAD860'
];
return colorList[params.dataIndex]
},
labelLine:{//饼图不显示线条
length:2,
show:false
},
label:{//饼图不显示文字
show:true,
position : 'inner',//饼图图上显示百分比
formatter : function (params) {
return (params.percent - 0).toFixed(0) + '%'
},
textStyle:{
fontSize:14
}
}
}
}
}, {
name:'2',
type:'pie',
center: ['70%', '50%'],
radius : [40,50],
data:[
{value:314, name:'班车'},
{value:200, name:'包车'},
],
itemStyle: {//系列级个性化
normal: {
color: function(params) {
var colorList = [
'#339CD1','#FE8463','#9BCA63','#FAD860'
];
return colorList[params.dataIndex]
},
labelLine:{//饼图不显示线条
length:2,
show:false
},
label:{//饼图不显示文字
show:true,
position : 'inner',//饼图图上显示百分比
formatter : function (params) {
return (params.percent - 0).toFixed(0) + '%'
},
textStyle:{
fontSize:14
}
}
}
}
}
]
});
myChart.setOption(option);