wangqiujuan0808
/
hsgy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

dev_zt
wangqiujuan0808 2023-11-01 22:18:41 +08:00
parent f27285b72a
commit e2c0c45d7e
6 changed files with 824 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
src/components/BarEchartB.vue Normal file
View File

@ -0,0 +1,298 @@
<template>
<div class="echart-div">
<div class="top-title">
<div class="title">{{echartData.title}}</div>
</div>
<div class="echart" :id="echartData.id">
</div>
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import * as echarts from "echarts";
import bus from '../utils/bus.js'
export default {
name: "LineEchart",
props: {
echartData: Object
},
setup(props) {
const store = useStore();
let myChart = null;
let data = {};
const state = reactive({
});
onMounted(() => {
bus.on('foo', e => {
console.log(e)
getEchart();
})
getEchart();
});
const getEchart = () => {
if (store.state.selectDate === 1) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230],
value2: [19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
};
} else if (store.state.selectDate === 2) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
],
value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 18203, 23489, 29034, 104970, 29034],
value2: [19325, 23438, 31000, 121594, 19325, 23438, 31000, 121594, 134141, 681807,19325, 134141],
};
} else if (store.state.selectDate === 0) {
var data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
],
value1: [18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230,18203, 23489, 29034, 104970, 131744, 630230],
value2: [19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807,19325, 23438, 31000, 121594, 134141, 681807],
};
}
let dom = document.getElementById(props.echartData.id);
if (dom) {
myChart = echarts.init(dom);
loadlineChart(myChart, data);
}
};
const loadlineChart = (myChart, data) => {
console.log(data);
var option = {
grid: {
left: "8%", //画布左移位置
top: "10%",
width: "90%", //画布宽度
height: "65%", //画布高度
},
legend: {},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLabel: {
margin: 10, //X轴标签与轴线之间的距离
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
rotate: -60,
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //X轴线颜色
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
data: data.xData,
},
yAxis: {
type: "value",
axisLabel: {
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //y轴线颜色
},
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: ["#dfe4ed"],
width: 1,
type: "dotted",
},
},
},
series: [
{
name: '降雨量',
type: "bar",
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: data.value1
},
{
name: '数据2',
type: "bar",
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 1,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: data.value2
}
],
};
myChart.setOption(option);
};
return {
...toRefs(state),
getEchart,
loadlineChart
};
},
};
</script>
<style lang="scss" scoped>
.echart-div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top-title {
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
border-left: 3px solid #5dcbed;
padding-left: 10px;
}
}
.echart {
height: 85%;
width: 100%;
#myChart {
width: 100%;
height: 100%;
}
}
}
</style>

251
src/components/BarEchartC.vue Normal file
View File

@ -0,0 +1,251 @@
<template>
<div class="echart-div">
<div class="top-title">
<div class="title">{{ echartData.title }}</div>
</div>
<div class="echart" :id="echartData.id">
</div>
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import * as echarts from "echarts";
import bus from '../utils/bus.js'
export default {
name: "LineEchart",
props: {
echartData: Object
},
setup(props) {
const store = useStore();
let myChart = null;
let data = {};
const state = reactive({
});
onMounted(() => {
bus.on('foo', e => {
console.log(e)
getEchart();
})
getEchart();
});
const getEchart = () => {
if (store.state.selectDate === 1) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
value1: [1823, 2349, 2904, 1040, 1744, 6300, 1820, 2389, 2934, 1970, 1144, 6230, 1803, 2489, 2034, 1070, 1344, 6330, 1803, 2349, 2904, 1040, 1344, 6330, 1803, 2389, 2934, 1970, 1344, 6230],
};
} else if (store.state.selectDate === 2) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
],
value1: [1823, 2349, 2904, 1040, 1344, 6330, 1803, 1803, 2389, 2934, 1097, 2934],
};
} else if (store.state.selectDate === 0) {
var data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
],
value1: [3120, 1823, 290, 1049, 1317, 6300, 1823, 2893, 2334, 1970, 1744, 6230, 1033, 2489, 2034, 1970, 1344, 6330, 1803, 2389, 2904, 1040, 1314, 6300],
};
}
let dom = document.getElementById(props.echartData.id);
if (dom) {
myChart = echarts.init(dom);
loadlineChart(myChart, data);
}
};
const loadlineChart = (myChart, data) => {
console.log(data);
var option = {
grid: {
left: "8%", //画布左移位置
top: "10%",
width: "90%", //画布宽度
height: "65%", //画布高度
},
legend: {},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLabel: {
margin: 10, //X轴标签与轴线之间的距离
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
rotate: -60,
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //X轴线颜色
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
data: data.xData,
},
yAxis: {
type: "value",
axisLabel: {
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //y轴线颜色
},
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: ["#dfe4ed"],
width: 1,
type: "dotted",
},
},
},
series: [
{
name: '数据1',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth: true,
data: data.value1
}
],
};
myChart.setOption(option);
};
return {
...toRefs(state),
getEchart,
loadlineChart
};
},
};
</script>
<style lang="scss" scoped>
.echart-div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top-title {
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
border-left: 3px solid #5dcbed;
padding-left: 10px;
}
}
.echart {
height: 85%;
width: 100%;
#myChart {
width: 100%;
height: 100%;
}
}
}
</style>

269
src/components/BarEchartS.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<div class="echart-div">
<div class="top-title">
<div class="title">{{ echartData.title }}</div>
</div>
<div class="echart" :id="echartData.id">
</div>
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import moment from "moment";
import { useStore } from "vuex";
import * as echarts from "echarts";
import bus from '../utils/bus.js'
export default {
name: "LineEchart",
props: {
echartData: Object
},
setup(props) {
const store = useStore();
let myChart = null;
let data = {};
const state = reactive({
});
onMounted(() => {
bus.on('foo', e => {
console.log(e)
getEchart();
})
getEchart();
});
const getEchart = () => {
if (store.state.selectDate === 1) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
value1: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230],
value2: [19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807],
};
} else if (store.state.selectDate === 2) {
data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
],
value1: [18203, 23489, 29034, 104970, 131744, 630230, 18203, 18203, 23489, 29034, 104970, 29034],
value2: [19325, 23438, 31000, 121594, 19325, 23438, 31000, 121594, 134141, 681807, 19325, 134141],
};
} else if (store.state.selectDate === 0) {
var data = {
legend: props.echartData.legend,
color: props.echartData.color,
xData: [
"00",
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
],
value1: [3120000, 1822203, 2903455, 1049470, 131744, 630230, 18203, 234893, 290334, 104970, 131744, 630230, 182033, 233489, 239034, 104970, 131744, 630230, 18203, 23489, 29034, 104970, 131744, 630230],
value2: [121594, 1944325, 2355438, 3103400, 134141, 681807, 193235, 23438, 310003, 121594, 134141, 681807, 193253, 233438, 313000, 121594, 134141, 681807, 19325, 23438, 31000, 121594, 134141, 681807],
};
}
let dom = document.getElementById(props.echartData.id);
if (dom) {
myChart = echarts.init(dom);
loadlineChart(myChart, data);
}
};
const loadlineChart = (myChart, data) => {
console.log(data);
var option = {
grid: {
left: "8%", //画布左移位置
top: "10%",
width: "90%", //画布宽度
height: "65%", //画布高度
},
legend: {},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLabel: {
margin: 10, //X轴标签与轴线之间的距离
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
rotate: -60,
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //X轴线颜色
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
data: data.xData,
},
yAxis: {
type: "value",
axisLabel: {
interval: 0, //X轴0强制显示所有标签，1，隔一个显示
textStyle: {
color: "#303133", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
axisTick: {
show: false, //X轴刻度线隐藏
},
axisLine: {
lineStyle: {
color: "#dfe4ed", //y轴线颜色
},
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: ["#dfe4ed"],
width: 1,
type: "dotted",
},
},
},
series: [
{
name: '数据1',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth: true,
data: data.value1
},
{
name: '数据2',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth: true,
data: data.value2
},
],
};
myChart.setOption(option);
};
return {
...toRefs(state),
getEchart,
loadlineChart
};
},
};
</script>
<style lang="scss" scoped>
.echart-div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.top-title {
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title {
border-left: 3px solid #5dcbed;
padding-left: 10px;
}
}
.echart {
height: 85%;
width: 100%;
#myChart {
width: 100%;
height: 100%;
}
}
}
</style>

8
src/components/History2.vue
View File

@ -20,9 +20,7 @@
<BarEchart :echartData="item" class="echartDiv100" /> <BarEchart :echartData="item" class="echartDiv100" />
</div> </div>
<div class="bottom"> <div class="bottom">
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
</el-table> -->
<table border="1"> <table border="1">
<thead> <thead>
<tr> <tr>
@ -59,7 +57,7 @@
import { onMounted, reactive, ref, toRefs } from "vue"; import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js"; import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue"; import BarEchart from "./BarEchartB.vue";
import Process from "./Process.vue"; import Process from "./Process.vue";
import Date from "@/components/Date.vue"; import Date from "@/components/Date.vue";
export default { export default {
@ -75,7 +73,7 @@ export default {
{ {
id: "echart0", id: "echart0",
title: "降水量-柱状图", title: "降水量-柱状图",
legend: ["降水量"], legend: ["降水量", "数据2"],
color: ["#6fdbce"], color: ["#6fdbce"],
}, },
], ],

6
src/components/History3.vue
View File

@ -20,9 +20,7 @@
<BarEchart :echartData="item" class="echartDiv100" /> <BarEchart :echartData="item" class="echartDiv100" />
</div> </div>
<div class="bottom"> <div class="bottom">
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
</el-table> -->
<table border="1"> <table border="1">
<thead> <thead>
<tr> <tr>
@ -59,7 +57,7 @@
import { onMounted, reactive, ref, toRefs } from "vue"; import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js"; import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue"; import BarEchart from "./BarEchartS.vue";
import Process from "./Process.vue"; import Process from "./Process.vue";
import Date from "@/components/Date.vue"; import Date from "@/components/Date.vue";
export default { export default {

2
src/components/History4.vue
View File

@ -59,7 +59,7 @@
import { onMounted, reactive, ref, toRefs } from "vue"; import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import myApi from "@/api/myApi.js"; import myApi from "@/api/myApi.js";
import BarEchart from "./BarEchart.vue"; import BarEchart from "./BarEchartC.vue";
import Process from "./Process.vue"; import Process from "./Process.vue";
import Date from "@/components/Date.vue"; import Date from "@/components/Date.vue";
export default { export default {