Compare commits
No commits in common. "f27285b72a79a661def1d8a2e286d4f21390992b" and "26d29fcdc5adeaa30f94028a25fa8084fb058073" have entirely different histories.
f27285b72a
...
26d29fcdc5
|
|
@ -1,258 +0,0 @@
|
||||||
<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,12 +49,6 @@
|
||||||
{{ 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>
|
||||||
|
|
@ -65,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 "./BarEchartG.vue";
|
import BarEchart from "./BarEchart.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 {
|
||||||
|
|
@ -81,8 +75,14 @@ export default {
|
||||||
{
|
{
|
||||||
id: "echart0",
|
id: "echart0",
|
||||||
title: "降水量-柱状图",
|
title: "降水量-柱状图",
|
||||||
legend: ["降水量", "数据2", "数据3"],
|
legend: ["降水量"],
|
||||||
color: ["#6fdbce", "#f00", "#0000ff"],
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "echart1",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
fxOptions: [
|
fxOptions: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue