123
parent
f27285b72a
commit
e2c0c45d7e
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -20,9 +20,7 @@
|
|||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -59,7 +57,7 @@
|
|||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import BarEchart from "./BarEchartB.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
|
|
@ -75,7 +73,7 @@ export default {
|
|||
{
|
||||
id: "echart0",
|
||||
title: "降水量-柱状图",
|
||||
legend: ["降水量"],
|
||||
legend: ["降水量", "数据2"],
|
||||
color: ["#6fdbce"],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -20,9 +20,7 @@
|
|||
<BarEchart :echartData="item" class="echartDiv100" />
|
||||
</div>
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -59,7 +57,7 @@
|
|||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import BarEchart from "./BarEchartS.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import myApi from "@/api/myApi.js";
|
||||
import BarEchart from "./BarEchart.vue";
|
||||
import BarEchart from "./BarEchartC.vue";
|
||||
import Process from "./Process.vue";
|
||||
import Date from "@/components/Date.vue";
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in New Issue