Parameter configuration in data:
// 多重环图
optionCircle: {
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} : {c} ({d}%)"
},
color: ['#3AB1EB', '#D48B6A', '#5B41C8', '#FE7E02'],
legend: {
orient: 'horizontal',
itemWidth: 30, // 图例标记的图形宽度。
itemHeight: 10, // 图例标记的图形高度。
itemGap: 15, //图例每项之间的间隔
right: 20,
top: 70,
icon: 'circle',
textStyle: {
fontSize: 12,
color: '#fff',
},
formatter: (name) => {
console.log(name)
var data = this.optionCircle.series;
var total = 0;
var tarValue = 0;
for (var i = 0, l = data.length; i < l; i++) {
console.log(data[i])
total += data[i].data[0].value;
if (data[i].data[0].name == name) {
tarValue = data[i].data[0].value;
}
}
var p = ((tarValue / total) * 100).toFixed(0);
return name + " " + " " + p + '%'
},
},
series: [
{
name: '及格',
type: 'pie',
radius: ['20%', '25%'],
center: ['35%', '50%'],
//环的位置
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true,
fontSize: '12',
}
},
data: [
{
value: 10, //需要显示的数据
name: '及格',
},
{
value: 50,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: '#4352A7 '
}
}
}
]
},
{
name: '良好',
type: 'pie',
radius: ['30%', '35%'],
center: ['35%', '50%'],
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true,
fontSize: '12',
// fontWeight: 'bold'
}
},
data: [
{
name: '良好',
value: 10,
},
{
value: 30,
itemStyle: {
normal: {
color: '#4352A7'
}
}
}
]
},
{
name: '优秀',
type: 'pie',
radius: ['40%', '45%'],
center: ['35%', '50%'],
//环的位置
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true,
fontSize: '12',
// fontWeight: 'bold'
}
},
data: [
{
value: 20, //需要显示的数据
name: '优秀',
},
{
value: 40,
//不需要显示的数据，颜色设置成和背景一样
itemStyle: {
normal: {
color: '#4352A7 '
}
}
}
]
},
{
name: '--',
type: 'pie',
radius: ['50%', '55%'],
center: ['35%', '50%'],
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true,
fontSize: '12',
}
},
data: [
{
name: '',
value: 0,
},
{
value: 20,
itemStyle: {
normal: {
color: '#0b1e5b '
}
}
}
]
},
{
name: '--',
type: 'pie',
radius: ['60%', '65%'],
center: ['35%', '50%'],
label: {
show: false,
position: 'center',
},
labelLine: {
normal: {
show: false
}
},
emphasis: {
label: {
show: true,
fontSize: '12',
}
},
data: [
{
name: '',
value: 0,
},
{
value: 10,
itemStyle: {
normal: {
color: '#0b1e5b '
}
}
}
]
}
]
}html:
<div class="byn_box">
<div id="lineEcharts" style="width:400px;height:300px"></div>
</div>methods:
drawLine(){
var myChart2 = echarts.init(document.getElementById('lineEcharts'));
myChart2.setOption(this.optionCircle);
}Called inside mounted:
mounted(){
this.drawLine()
}