Vue.js ECharts图表展示：学习任务和任务管理完成情况
mounted() {
this.getuserstudy();
// 通过ref获取div元素
const chartDom = this.$refs.chart;
const pieChartDom = this.$refs.pieChart;
// 初始化echarts实例
const chartInstance = echarts.init(chartDom);
const pieChartInstance = echarts.init(pieChartDom);
// 设置图表配置项和数据
const pieOptionstudy = {
title: {
text: '学习任务完成情况',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['已完成', '未完成']
},
series: [
{
name: '学习任务完成情况',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 16, name: '已完成'},
{value: 4, name: '未完成'}
]
}
]
};
const pieOptiontask = {
title: {
text: '任务管理完成情况',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['已完成', '未完成']
},
series: [
{
name: '任务管理完成情况',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 16, name: '已完成'},
{value: 4, name: '未完成'}
]
}
]
};
pieChartInstance.setOption(pieOptionstudy);
pieChartInstance.setOption(pieOptiontask);
// 设置学习任务的柱状图配置项和数据
const option = {
title: {
text: '学习任务完成情况',
subtext: '最近30天',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['已完成', '未完成'],
top: 30
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7'],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '已完成',
type: 'bar',
stack: '任务',
barWidth: '60%',
label: {
show: true,
position: 'insideRight'
},
data: [10, 20, 30, 40, 50, 60, 70]
},
{
name: '未完成',
type: 'bar',
stack: '任务',
barWidth: '60%',
label: {
show: true,
position: 'insideRight'
},
data: [5, 10, 15, 20, 25, 30, 35]
}
]
};
chartInstance.setOption(option);
// 设置任务管理的柱状图配置项和数据 const taskOption = { title: { text: '任务管理完成情况', subtext: '最近30天', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['已完成', '未完成'], top: 30 }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7'], axisTick: { alignWithLabel: true } }, yAxis: { type: 'value' }, series: [ { name: '已完成', type: 'bar', stack: '任务', barWidth: '60%', label: { show: true, position: 'insideRight' }, data: [10, 20, 30, 40, 50, 60, 70] }, { name: '未完成', type: 'bar', stack: '任务', barWidth: '60%', label: { show: true, position: 'insideRight' }, data: [5, 10, 15, 20, 25, 30, 35] } ] }; pieChartInstance.setOption(taskOption);
原文地址: https://www.cveoy.top/t/topic/mDV4 著作权归作者所有。请勿转载和采集!