ly.fan
/
xy-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式优化添加echarts

Browse Source
ds1.0
fanluyan 2 years ago
parent c50d9597a0
commit a8c6a339c5
5 changed files with 12886 additions and 0 deletions
Show Stats Download Patch File Download Diff File

4181
public/aa.json
View File

File diff suppressed because it is too large Load Diff

4181
public/bb.json
View File

File diff suppressed because it is too large Load Diff

4181
public/cc.json
View File

File diff suppressed because it is too large Load Diff

337
src/echartsDemo.vue
Unescape Escape View File

@ -0,0 +1,337 @@
<template>
<div class="echartsBox">
<div class="gropName">
<el-checkbox-group v-model="checkList">
<el-checkbox
v-for="item in qtOption"
:label="item.groupName"
:key="item.groupName"
><span v-if="item.groupName == 'H2'">{{ item.groupName }}(氢气)</span>
<span v-if="item.groupName == 'CO'"
>{{ item.groupName }}(一氧化碳)</span
>
<span v-if="item.groupName == 'CH4'">{{ item.groupName }}(甲烷)</span>
<span v-if="item.groupName == 'C2H4'"
>{{ item.groupName }}(乙烯)</span
>
<span v-if="item.groupName == 'C2H6'"
>{{ item.groupName }}(乙烷)</span
>
<span v-if="item.groupName == 'C2H2'"
>{{ item.groupName }}(乙炔)</span
></el-checkbox
>
</el-checkbox-group>
</div>
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "",
data() {
return {
checkList: [], //选中勾选框
qtOption: [], //气体数据
myChart: "",
xData1: [], //横坐标
lineData1: [], //纵坐标
yMax1: "", //y轴最大值
xData2: [], //横坐标
lineData2: [], //纵坐标
yMax2: "", //y轴最大值
xData3: [], //横坐标
lineData3: [], //纵坐标
yMax3: "", //y轴最大值
};
},
created() {
this.getMenuData1();
this.getMenuData2();
this.getMenuData3();
},
mounted() {},
watch: {},
methods: {
//图表1
getMenuData1() {
axios
.get("/aa.json")
.then((res) => {
console.log("getMenuData", res);
// this.qtOption = res.data.config.channels[0].crests;//气体
// console.log(this.qtOption);
this.lineData1 = res.data.data[0]; //纵坐标数据
this.yMax1 = res.data.config.yMax; //y轴最大值
var timeSpan = 1; //时间间隔
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
console.log(i);
this.xData1.push(i);
}
//横坐标数据
this.getEchart1();
})
.catch((error) => {
console.log(error);
});
},
//图表2
getMenuData2() {
axios
.get("/bb.json")
.then((res) => {
this.lineData2 = res.data.data[0]; //纵坐标数据
this.yMax2 = res.data.config.yMax; //y轴最大值
var timeSpan = 1; //时间间隔
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
console.log(i);
this.xData2.push(i);
}
//横坐标数据
this.getEchart2();
})
.catch((error) => {
console.log(error);
});
},
//图表3
getMenuData3() {
axios
.get("/cc.json")
.then((res) => {
this.lineData3 = res.data.data[0]; //纵坐标数据
this.yMax3 = res.data.config.yMax; //y轴最大值
var timeSpan = 1; //时间间隔
for (
var i = 0;
i < res.data.config.numberOfData * timeSpan;
i = i + timeSpan
) {
console.log(i);
this.xData3.push(i);
}
//横坐标数据
this.getEchart3();
})
.catch((error) => {
console.log(error);
});
},
//装置数量统计
getEchart1() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo1"));
let option = {
title: {
text: "图表一",
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData1, // 把时间组成的数组接过来，放在x轴上
boundaryGap: false,
showMaxLabel: true,
},
yAxis: {
type: "value",
// min: 20000,
//max: this.yMax1,
},
series: [
{
data: this.lineData1,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
//装置数量统计
getEchart2() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo2"));
let option = {
title: {
text: "图表二",
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "slider",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData2, // 把时间组成的数组接过来，放在x轴上
boundaryGap: false,
showMaxLabel: true,
},
yAxis: {
type: "value",
// min: 20000,
// max: this.yMax2,
},
series: [
{
data: this.lineData2,
type: "line",
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
//装置数量统计
getEchart3() {
this.$nextTick(() => {
let that = this;
that.myChart = this.$echarts.init(document.getElementById("demo3"));
let option = {
title: {
text: "图表三",
left: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: false,
},
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
type: "category",
data: this.xData3, // 把时间组成的数组接过来，放在x轴上
boundaryGap: false,
showMaxLabel: true,
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
// min: 20000,
//max: this.yMax3,
},
series: [
{
data: this.lineData3,
type: "line",
showAllSymbol: true,
smooth: true,
symbol: "none",
sampling: "lttb",
itemStyle: {
color: "rgb(255, 70, 131)",
},
},
],
};
that.myChart.setOption(option);
window.addEventListener("resize", () => {
that.myChart.resize();
});
});
},
},
};
</script>
<style lang="less">
.echartsBox {
height: calc(100% - 32px);
padding: 16px;
display: flex;
flex-direction: column;
// justify-content: space-around;
#demo1,
#demo2,
#demo3 {
height: 400px;
width: 80%;
}
.gropName {
.el-checkbox-group {
display: flex;
flex-direction: column;
.el-checkbox {
height: 40px;
line-height: 40px;
}
}
}
}
</style>

6
src/router/index.js
Unescape Escape View File

@ -132,6 +132,12 @@ const routes = [
import(/* webpackChunkName: "tabs" */ "../views/waterMark/index.vue"),
meta: { title: "水印下发", icon: "" },
},
{
path: "/echarts",
component: () =>
import(/* webpackChunkName: "tabs" */ "../echartsDemo.vue"),
meta: { title: "echarts图表", icon: "" },
},
],
},

Write Preview
Loading…
Cancel
Save