Merge branch 'main' of https://git.shikicc.com/wangqiujuan0808/hsgy
commit
8d7777363f
|
|
@ -0,0 +1,258 @@
|
||||||
|
<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],
|
||||||
|
value3: [31000, 121594, 134141, 681807,19325, 23438, 19325, 23438, 19325, 23438, 31000, 121594, 134141, 681807, 23438, 31000, 121594, 31000, 121594, 134141, 681807,19325, 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],
|
||||||
|
value3: [31000, 121594, 134141, 681807,19325, 23438, 23438, 31000, 121594, 134141, 681807,19325]
|
||||||
|
};
|
||||||
|
} 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],
|
||||||
|
value3: [31000, 121594, 134141, 681807,19325, 23438, 19325, 23438, 23438, 31000, 121594, 31000, 121594, 134141, 681807,19325, 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: "75%", //画布高度
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
data: data.value1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据2',
|
||||||
|
type: 'bar',
|
||||||
|
data: data.value2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '数据3',
|
||||||
|
type: 'bar',
|
||||||
|
data: data.value3
|
||||||
|
}
|
||||||
|
],
|
||||||
|
};
|
||||||
|
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>
|
||||||
|
|
@ -49,6 +49,12 @@
|
||||||
{{ item.value }}
|
{{ item.value }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -59,7 +65,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 "./BarEchartG.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,14 +81,8 @@ export default {
|
||||||
{
|
{
|
||||||
id: "echart0",
|
id: "echart0",
|
||||||
title: "降水量-柱状图",
|
title: "降水量-柱状图",
|
||||||
legend: ["降水量"],
|
legend: ["降水量", "数据2", "数据3"],
|
||||||
color: ["#6fdbce"],
|
color: ["#6fdbce", "#f00", "#0000ff"],
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "echart1",
|
|
||||||
title: "降水量-柱状图",
|
|
||||||
legend: ["降水量"],
|
|
||||||
color: ["#6fdbce"],
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
fxOptions: [
|
fxOptions: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue