Mainly used framework VUE + Element UI + Echarts
First on the renderings:
This project uses VUE Element Ui Echarts.
Please import it in main.js, or import it separately in the page. I introduced it globally, so I didn't introduce components in this page.
Design the layout and diagrams first. (The background is a picture and can be ignored)
HTML part
The layout uses element's layout.
<template>
<el-container>
<div class="head">
<el-row>
<el-col :span="20">
<div class="title">Top5作业布置量</div>
</el-col>
<el-col :span="4">
<el-button-group size="small">
<el-button size="small" @click="changeOutColor(1)" :type="outColor">本月</el-button>
<el-button size="small" @click="changeinColor(2)" :type="inColor">本年</el-button>
</el-button-group>
</el-col>
</el-row>
<el-row>
<div
id="callOutChart"
v-show="showChart == 1"
:style="{
height: '340px',
width: '750px',
}"
></div>
<!-- 图表一 -->
<div
id="callInChart"
v-show="showChart == 2"
:style="{
height: '340px',
width: '750px',
}"
></div>
<!-- 图表二 -->
</el-row>
</div>
</el-container>
</template>Style code:
<style scoped>
.head {
height: 35px;
width: 100%;
line-height: 35px;
}
.title {
font-weight: bold;
font-size: 20px;
background-image: -webkit-linear-gradient(
right,
#3fb5ff,
#6fe2ff
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} //标题文字
.el-button--danger {
color: #fff;
background-color: #1d86f0 !important;
border-color: #1d86f0 !important;
} //按钮被选中
.el-button {
color: #fff;
background-color: #0a307e;
border-color: #1d86f0;
} 按钮
</style>Implementation code:
<script>
import api from "@/api/charts"; //引入接口js
export default {
mounted() {
this.charts1();
this.charts2();
},
data() {
return {
loading: false,
outColor7: "danger", //默认显示按钮
inColor7: "",
showChart: 1,
xdata: [],
ydata: [],
adata: [],
bdata: [],
cdata: [],
ddata: [],
edata: [],
ydata1: [],
adata1: [],
bdata1: [],
cdata1: [],
ddata1: [],
edata1: [],
};
},
methods: {
async charts1() {
await api.charts1().then((data) => {
this.loading = false;
data.map((item) => {
this.ydata.push(item.grade);
this.adata.push(item.language);
this.bdata.push(item.math);
this.cdata.push(item.english);
this.ddata.push(item.science);
this.edata.push(item.chemistry);
});
});
// 基于准备好的dom，初始化echarts实例
let callOutChart7 = this.$echarts.init(
document.getElementById("callOutChart7")
);
// 绘制图表
callOutChart7.setOption({
legend: {
bottom: "5%",
itemGap: 35,
textStyle: {
color: "#fff",
boderRadius: "20%",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
x: 35,
y: 25,
x2: 25,
y2: 75,
},
xAxis: {
type: "category",
data: this.ydata,
axisLine: {
show: true,
lineStyle: {
color: "#234691",
width: 0,
type: "solid",
},
},
axisLabel: {
show: true,
interval: 0,
rotate: 0,
textStyle: {
color: "#fff",
},
},
axisTick: {
alignWithLabel: true,
},
},
yAxis: {
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: ["#234691"],
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
},
//柱状图柱子颜色渐变处理
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(238,118,37,0.4)" },
{ offset: 0, color: "rgb(238,118,37)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(241,178,28,0.4)" },
{ offset: 0, color: "rgb(241,178,28)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(14,223,157,0.4)" },
{ offset: 0, color: "rgb(14,223,157)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(19,130,233,0.4)" },
{ offset: 0, color: "rgb(19,130,233)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(6,184,235,0.4)" },
{ offset: 0, color: "rgb(6,184,235)" },
],
},
],
series: [
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "语文",
data: this.adata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "数学",
data: this.bdata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "英语",
data: this.cdata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "科学",
data: this.ddata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "化学",
data: this.edata1,
},
],
});
},
async charts2() {
await api.charts2().then((data) => {
this.loading = false;
data.map((item) => {
this.ydata1.push(item.grade);
this.adata1.push(item.language);
this.bdata1.push(item.math);
this.cdata1.push(item.english);
this.ddata1.push(item.science);
this.edata1.push(item.chemistry);
});
});
let callInChart7 = this.$echarts.init(
document.getElementById("callInChart7")
);
callInChart7.setOption({
legend: {
bottom: "5%",
itemGap: 35,
textStyle: {
color: "#fff",
boderRadius: "20%",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
x: 35,
y: 25,
x2: 25,
y2: 75,
},
xAxis: {
type: "category",
data: this.ydata1,
axisLine: {
show: true,
lineStyle: {
color: "#234691",
width: 0,
type: "solid",
},
},
axisLabel: {
show: true,
interval: 0,
rotate: 0,
textStyle: {
color: "#fff",
},
},
axisTick: {
alignWithLabel: true,
},
},
yAxis: {
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: ["#234691"],
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
},
//柱状图柱子颜色渐变处理
color: [
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(238,118,37,0.4)" },
{ offset: 0, color: "rgb(238,118,37)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(241,178,28,0.4)" },
{ offset: 0, color: "rgb(241,178,28)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(14,223,157,0.4)" },
{ offset: 0, color: "rgb(14,223,157)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(19,130,233,0.4)" },
{ offset: 0, color: "rgb(19,130,233)" },
],
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 1, color: "rgba(6,184,235,0.4)" },
{ offset: 0, color: "rgb(6,184,235)" },
],
},
],
series: [
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "语文",
data: this.adata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "数学",
data: this.bdata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "英语",
data: this.cdata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "科学",
data: this.ddata1,
},
{
type: "bar",
barGap: "0%",
barWidth: "10%",
name: "化学",
data: this.edata1,
},
],
});
},
//图表切换功能
changeOutColor7(val) {
this.showChart = val;
if (this.outColor7 == "") {
this.outColor7 = "danger";
this.inColor7 = "";
}
},
changeinColor7(val) {
this.showChart = val;
if (this.inColor7 == "") {
this.inColor7 = "danger";
this.outColor7 = "";
}
},
},
};
</script>If a page needs to introduce multiple charts, remember not to make the chart IDs have the same name, otherwise they will not be displayed.
The color of the five histograms is set separately in the color. If you do not need gradient processing, you can directly set the color in the series, or use the default color of echarts without setting.
API encapsulation code:
import Vue from 'vue'
export default class {
static charts (query) {
return new Promise((resolve, reject) => {
Vue.http.get('你的接口地址', query).then(res => {
if (res && res.data.error) {
reject(res.data)
} else {
resolve(res.data)
}
}).catch(res => {
reject(res)
})
})
}
static charts (query) {
return new Promise((resolve, reject) => {
Vue.http.get('你的接口地址', query).then(res => {
if (res && res.data.error) {
reject(res.data)
} else {
resolve(res.data)
}
}).catch(res => {
reject(res)
})
})
}
}Note that the component version used in this project is relatively low.
echarts 4.5.0
element 2.13.0
vue 2.5.16