echarts圆环

/* eslint-disable */
export default {
name: ‘AccumulativeHomeWork’,
data() {
let vm = this
return {
name: ‘’,
option: {
backgroundColor: ‘#2f435e’,
title: {
text: ‘特殊作业累计量’,
x: ‘left’,
textStyle: {
color: ‘rgba(218, 218, 218, 1)’,
fontSize: 18
}
},
tooltip: {
trigger: ‘item’,
formatter: ‘{a}
{b}: {c} ({d}%)’
},
legend: {
orient: ‘vertical’,
top: ‘20%’,
right: ‘3%’,
data: [{ name: ‘已完成’ }, { name: ‘待完成’ }],
formatter: function (name) {
const that = this
let total = vm.option.series[0].data[0].value // 总计
let data = vm.option.series[1].data // 各数据
let target
for (const index in data) {
if (data[index].name == name) {
target = data[index].value
}
}
let arr = [
‘{a|’ + name +’}’,
‘{b|共计’ + target + ’ 占比’ + ((target / total) * 100).toFixed(2) + ‘%}’
]
return arr.join(’\n’)
},
textStyle: {
rich: {
a: {
fontSize: 16,
verticalAlign: ‘top’,
align: ‘center’,
padding: [0, 0, 10, 0],
color: ‘#DEA952’,
},
b: {
fontSize: 14,
align: ‘center’,
padding: [0, 5, 0, 0],
color: ‘#DEA952’,
lineHeight: 25
}
}
}
},
grid: {
left: ‘3%’,
right: ‘3%’,
bottom: ‘1%’,
containLabel: true
},
color: [’#6BB96B’, ‘#EE514F’],
series: [
{
name: ‘访问来源’,
type: ‘pie’,
center: [‘30%’, ‘55%’],
radius: [‘35%’, ‘55%’],
avoidLabelOverlap: false,
label: {
normal: { // normal 是图形在默认状态下的样式
show: true,
position: ‘center’,
color: ‘#57A1F0’,
fontSize: 22,
formatter: ‘{c}\n’, // {b}:数据名； {c}：数据值； {d}：百分比,
},
emphasis: {
show: true,
textStyle: {
fontSize: ‘12’,
fontWeight: ‘bold’
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
borderWidth: 5, //设置border的宽度有多大
borderColor: ‘#2f435e’,
},
data: [
{ value: 123, name: ‘总计’ }
]
},
{
name: ‘访问来源’,
type: ‘pie’,
center: [‘30%’, ‘55%’],
radius: [‘35%’, ‘55%’],
avoidLabelOverlap: false,
label: {
normal: { // normal 是图形在默认状态下的样式
show: true,
position: ‘center’,
color: ‘rgba(218, 218, 218, 0.6)’,
fontSize: 14,
formatter: ‘\n总计’, // {b}:数据名； {c}：数据值； {d}：百分比,
},
emphasis: {
show: true,
textStyle: {
fontSize: ‘12’,
fontWeight: ‘bold’
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
borderWidth: 5,
borderColor: ‘#2f435e’,
},
data: [
{ value: 55, name: ‘已完成’ },
{ value: 45, name: ‘待完成’ },
]
}
]
}
}
},
mounted() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …arts.init(this.refs.content).setOption(this.option)
})
},
destroyed() { // 离开此组件的操作
window.removeEventListener(‘resize’, function () {
echarts.init(document.getElementById(‘contentHomeWork’)).resize()
}, 20)
},
methods: {
}
}