let echarts = require('echarts');
var BorderWidth = '10';
//反方向剩下部分的样式
var placeHolderStyle = {
normal: {
label: {
show: false,
position: "outside"
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
/* color: "rgba(0,0,0,0)",
borderColor: "rgba(0,0,0,0)",*/
borderWidth: BorderWidth,
/*shadowBlur: 40,*/
borderColor: "#BEBEBE"
},
emphasis: {
color: "#dedede",
borderColor: "#dedede",
borderWidth: 0
}
};
// 初始化echarts实例
let fruitChart = echarts.init(document.getElementById('fruit'));
fruitChart.setOption({
title: {
text: '水果统计',
/*subtext: '纯属虚构',*/
left: 'center'
},
/* backgroundColor: '#000',*/
color: ['#53f1f2', '#4ebefd', '#30ed9d', '#faa234'],
legend: {
show: true,
orient: 'vertical',
left: 'left',
top: 'middle',
data: ['苹果', '香蕉', '梨', '葡萄'],
textStyle: {
/*color: '#fff',*/
fontSize: 16
}
},
series: [{
name: '葡萄',
type: 'pie',
clockWise: true, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [100, 101],
itemStyle: {
normal: {
label: {
show: false,
position: 'outside'
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: BorderWidth,
/*shadowBlur: 40,*/
borderColor: "#53f1f2"
/*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
}
},
data: [{
value: 7,
name: '70%'
},
{
value: 3,
name: '',
itemStyle: placeHolderStyle
}
]
}, {
name: '梨',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: [80, 81],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: BorderWidth,
/* shadowBlur: 40,*/
borderColor: "#4ebefd",
/* shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
}
},
data: [{
value: 6,
name: '60%'
},
{
value: 4,
name: '',
itemStyle: placeHolderStyle
}
]
}, {
name: '香蕉',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: [60, 61],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: BorderWidth,
/*shadowBlur: 40,*/
borderColor: "#30ed9d",
/*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
}
},
data: [{
value: 5,
name: '40%'
},
{
value: 5,
name: '',
itemStyle: placeHolderStyle
}
]
}, {
name: '苹果',
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: [40, 41],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: BorderWidth,
/* shadowBlur: 40,*/
borderColor: "#faa234",
/*shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影*/
}
},
data: [{
value: 5,
name: '30%'
},
{
value: 5,
name: '',
itemStyle: placeHolderStyle
}
]
}]
});
echarts实现多重环形图
最新推荐文章于 2024-08-11 12:50:45 发布