<template>
<div class="zhuzhuangtu">
<div style="display: flex">
<!-- 饼图 -->
<div class="echarts">
<div id="pie" style="width: 500px; height: 300px; margin: 10px"></div>
</div>
<!-- 饼图 -->
<div class="main">
<div id="main" style="width: 500px; height: 300px; margin: 10px"></div>
</div>
</div>
<div style="margin-top: 10px; display: flex">
<!-- 饼图 -->
<div class="echarts">
<div id="MonthTAerm" style="width: 500px; height: 300px; margin: 10px"></div>
</div>
<!-- 饼图实际评课总数量对比 -->
<div class="main">
<div id="semester" style="width: 500px; height: 300px; margin: 10px"></div>
</div>
</div>
</div>
</template>
<script>
const echarts = require("echarts"); //引入图表
export default {
name: "about",
data() {
return {
pie: {
title: {
text: "本周-教研员评课数量",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["实际评课总数量", "标准评估总数量/天"],
left: "50",
bottom: 0,
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name:"时间",
data: ["周一", "周二", "周三", "周四", "周五"],
},
],
yAxis: [
{
type: "value",
name:"数量(节)",
},
],
series: [
{
name: "实际评课总数量",
type: "bar",
data: [5.0, 6.04, 6.69, 9.0, 10],
markPoint: {
// data: [
// { type: "max", name: "最大值" },
// { type: "min", name: "最小值" },
// ],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
{
name: "标准评估总数量/天",
type: "bar",
data: [8.0, 8.0, 8.0, 8.0, 8.0],
markPoint: {
data: [{ name: "年最高", value: 10, xAxis: 7, yAxis: 10 }],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
],
},
MonthTAerm: {
title: {
text: "本学期-教研员评课数量",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["实际评课总数量", "标准评估总数量/学期"],
left: "50",
bottom: 0,
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name:"时间",
data: ["第一月", "第二月", "第三月", "第四月"],
},
],
yAxis: [
{
type: "value",
name: "数量(节)",
min: 0,
max: 200,
axisLabel: {
formatter: function (value) {
var texts = [];
if (value == 0) {
texts.push("0");
} else if (value <= 50) {
texts.push("50");
} else if (value <= 100) {
texts.push("100");
} else if (value <= 150) {
texts.push("150");
} else {
texts.push("200");
}
return texts;
},
},
},
],
series: [
{
name: "实际评课总数量",
type: "bar",
data: [180, 190, 170, 160],
markPoint: {
// data: [
// { type: "max", name: "最大值" },
// { type: "min", name: "最小值" },
// ],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
{
name: "标准评估总数量/学期",
type: "bar",
data: [160,160,160,160],
markPoint: {
data: [{ name: "年最高", value: 10, xAxis: 7, yAxis: 10 }],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
],
},
main: {
title: {
text: "本周-教研员评课数量",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["实际评课总数量", "标准评估总数量/周"],
left: "50",
bottom: 0,
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name:"时间",
data: ["周一", "周二", "周三", "周四"],
},
],
yAxis: [
{
type: "value",
name:"数量(节)",
min: 0,
max: 80,
axisLabel: {
formatter: function (value) {
var texts = [];
if (value == 0) {
texts.push("0");
} else if (value <= 20) {
texts.push("20");
} else if (value <= 40) {
texts.push("40");
} else if (value <= 60) {
texts.push("60");
} else {
texts.push("80");
}
return texts;
},
},
},
],
series: [
{
name: "实际评课总数量",
type: "bar",
data: [50, 60, 70, 40],
markPoint: {
// data: [
// { type: "max", name: "最大值" },
// { type: "min", name: "最小值" },
// ],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
{
name: "标准评估总数量/周",
type: "bar",
data: [40, 40, 40, 40, 40],
markPoint: {
data: [{ name: "年最高", value: 80, xAxis: 7, yAxis: 80 }],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
],
},
semester: {
title: {
text: "实际评课总数量对比/学期",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["实际评课总数量", "标准评估总数量/学期"],
left: "50",
bottom: 0,
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
calculable: true,
xAxis: [
{
type: "category",
name:"时间",
data: ["上学期","本学期"],
},
],
yAxis: [
{
type: "value",
name:"数量(节)",
min: 0,
max: 680,
axisLabel: {
formatter: function (value) {
var texts = [];
if (value == 0) {
texts.push("0");
} else if (value <= 400) {
texts.push("400");
} else if (value <= 500) {
texts.push("500");
} else if (value <= 600) {
texts.push("600");
} else if(value<=680){
texts.push("680");
}
return texts;
},
},
},
],
series: [
{
name: "实际评课总数量",
type: "bar",
data: [650,670],
markPoint: {
// data: [
// { type: "max", name: "最大值" },
// { type: "min", name: "最小值" },
// ],
},
markLine: {
data: [{ type: "average", name: "平均值" }],
},
},
{
name: "标准评估总数量/学期",
type: "bar",
data: [640,640],
// markPoint: {
// data: [{ name: "年最高", value: 80, xAxis: 7, yAxis: 80 }],
// },
// markLine: {
// data: [{ type: "average", name: "平均值" }],
// },
},
],
},
};
},
methods: {
initEcharts() {
let pie = echarts.init(document.getElementById("pie"));
pie.setOption(this.pie);
let main = echarts.init(document.getElementById("main"));
main.setOption(this.main);
let MonthTAerm = echarts.init(document.getElementById("MonthTAerm"));
MonthTAerm.setOption(this.MonthTAerm);
let semester = echarts.init(document.getElementById("semester"));
semester.setOption(this.semester);
},
},
mounted() {
this.initEcharts();
},
};
</script>
<style scoped>
.zhuzhuangtu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
</style>
分组柱状图
最新推荐文章于 2024-05-07 10:00:00 发布