Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-init/pulls/16pull/24/head
@@ -1,7 +1,7 @@ | |||
### | |||
# @Author: zhp | |||
# @Date: 2024-04-28 13:42:51 | |||
# @LastEditTime: 2024-05-11 08:52:30 | |||
# @LastEditTime: 2024-05-13 13:30:20 | |||
# @LastEditors: zhp | |||
# @Description: | |||
### | |||
@@ -8,33 +8,25 @@ | |||
<template> | |||
<chart-container class="line-chart-base"> | |||
<div class="legend"> | |||
<span | |||
v-for="item in legend" | |||
:key="item.label" | |||
class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | |||
>{{ item.label }}</span | |||
> | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div | |||
ref="chart" | |||
style="max-width: 50vw" | |||
:style="{ height: vHeight + 'vh' }" | |||
></div> | |||
<div ref="elsChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import screenfull from "screenfull"; | |||
import { debounce } from "@/utils/debounce"; | |||
import ChartContainer from "./ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
// import chartMixin from "@/mixins/chart.js"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "LineChartBase", | |||
components: { | |||
ChartContainer, | |||
}, | |||
mixins: [chartMixin], | |||
// mixins: [chartMixin], | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
@@ -59,6 +51,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
@@ -84,11 +77,11 @@ export default { | |||
// legend: { | |||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] | |||
// }, | |||
toolbox: { | |||
feature: { | |||
saveAsImage: {} | |||
} | |||
}, | |||
// toolbox: { | |||
// feature: { | |||
// saveAsImage: {} | |||
// } | |||
// }, | |||
grid: { | |||
left: '3%', | |||
right: '4%', | |||
@@ -366,7 +359,22 @@ export default { | |||
}, | |||
}; | |||
}, | |||
computed: { | |||
isOpen() { | |||
return this.$store.getters.sidebar.opened | |||
}, | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
if (val === true) { | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
this.actualOptions.series.map((item) => { | |||
@@ -375,11 +383,11 @@ export default { | |||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||
this.initOptions(this.actualOptions); | |||
this.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
this.initChart(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
@@ -388,19 +396,42 @@ export default { | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initOptions(actualOptions); | |||
this.initChart(actualOptions); | |||
}, | |||
}, | |||
mounted() { | |||
this.actualOptions = this.options; | |||
this.initOptions(this.options); | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
mounted() { | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.elsChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -1,4 +1,3 @@ | |||
<!-- | |||
filename: LineChartBase.vue | |||
author: liubin | |||
@@ -9,33 +8,25 @@ | |||
<template> | |||
<chart-container class="line-chart-base"> | |||
<div class="legend"> | |||
<span | |||
v-for="item in legend" | |||
:key="item.label" | |||
class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | |||
>{{ item.label }}</span | |||
> | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div | |||
ref="chart" | |||
style="max-width: 50vw" | |||
:style="{ height: vHeight + 'vh' }" | |||
></div> | |||
<div ref="waterChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import screenfull from "screenfull"; | |||
import { debounce } from "@/utils/debounce"; | |||
import ChartContainer from "./ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
// import chartMixin from "@/mixins/chart.js"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "LineChartBase", | |||
components: { | |||
ChartContainer, | |||
}, | |||
mixins: [chartMixin], | |||
// mixins: [chartMixin], | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
@@ -60,11 +51,12 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width:'', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "5%", | |||
left: "1%", | |||
right: "4%", | |||
bottom: "3%", | |||
top: "15%", | |||
@@ -85,11 +77,11 @@ export default { | |||
// legend: { | |||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] | |||
// }, | |||
toolbox: { | |||
feature: { | |||
saveAsImage: {} | |||
} | |||
}, | |||
// toolbox: { | |||
// feature: { | |||
// saveAsImage: {} | |||
// } | |||
// }, | |||
grid: { | |||
left: '3%', | |||
right: '4%', | |||
@@ -368,19 +360,34 @@ export default { | |||
}; | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
// console.log(val) | |||
if (val === true) { | |||
console.log('ztl') | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
} | |||
this.actualOptions.series.map((item) => { | |||
item.barWidth = val ? 18 : 12; | |||
}); | |||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||
this.initOptions(this.actualOptions); | |||
this.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
this.initChart(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
@@ -389,18 +396,45 @@ export default { | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initOptions(actualOptions); | |||
this.initChart(actualOptions); | |||
}, | |||
}, | |||
computed: { | |||
isOpen() { | |||
return this.$store.getters.sidebar.opened | |||
}, | |||
}, | |||
mounted() { | |||
this.actualOptions = this.options; | |||
this.initOptions(this.options); | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.waterChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -0,0 +1,304 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-13 14:08:51 | |||
* @LastEditTime: 2024-05-14 08:46:07 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<chart-container class="bar-chart-base"> | |||
<div class="legend"> | |||
<!-- <span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> --> | |||
</div> | |||
<div ref="gasChart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import screenfull from "screenfull"; | |||
import ChartContainer from "./ChartContainer.vue"; | |||
// import chartMixin from "@/mixins/chart.js"; | |||
import { debounce } from "@/utils/debounce"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "BarChartBase", | |||
components: { | |||
ChartContainer, | |||
}, | |||
// mixins: [chartMixin], | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
default: 38, | |||
}, | |||
legend: { | |||
type: Array, | |||
required: false, | |||
}, | |||
xAxis: { | |||
type: Array, | |||
required: true, | |||
}, | |||
series: { | |||
type: Array, | |||
required: true, | |||
}, | |||
in: { | |||
type: String, | |||
default: "", | |||
}, | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "1%", | |||
right: "4%", | |||
bottom: "3%", | |||
top: "15%", | |||
containLabel: true, | |||
}, | |||
tooltip: {}, | |||
xAxis: { | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
data: this.xAxis, | |||
}, | |||
yAxis: { | |||
name: "单位/片", | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
axisTick: { | |||
show: false, | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#4561AE", | |||
}, | |||
}, | |||
}, | |||
series: [ | |||
{ | |||
name: "", // this.series[0].name, | |||
type: "bar", | |||
barWidth: 12, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#12f7f1", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.35, | |||
color: "#12f7f177", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 0.75, | |||
color: "#12f7f133", // 100% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "transparent", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
data: [], // this.series[0].data, | |||
}, | |||
{ | |||
name: "", // this.series[1].name, | |||
type: "bar", | |||
barWidth: 12, | |||
// tooltip: { | |||
// valueFormatter: function (value) { | |||
// return value + " ml"; | |||
// }, | |||
// }, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
color: { | |||
type: "linear", | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: "#57abf8", // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: "#364BFE66", // 100% 处的颜色 | |||
}, | |||
], | |||
global: false, // 缺省为 false | |||
}, | |||
}, | |||
data: [], // this.series[1].data, | |||
}, | |||
], | |||
}, | |||
}; | |||
}, | |||
computed: { | |||
isOpen() { | |||
return this.$store.getters.sidebar.opened | |||
}, | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
// console.log(val) | |||
if (val === true) { | |||
console.log('ryf') | |||
this.width = '99%' | |||
this.canvasReset() | |||
console.log(this.width) | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
if (val === true && this.isOpen === true) { | |||
this.width = '99%' | |||
} | |||
this.actualOptions.series.map((item) => { | |||
item.barWidth = val ? 18 : 12; | |||
}); | |||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||
this.initOptions(this.actualOptions); | |||
}, | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
return; | |||
} | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
console.log('actualOptions', this.options) | |||
actualOptions.series[0].data = val[0].data; | |||
actualOptions.series[0].name = val[0].name; | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initChart(actualOptions); | |||
}, | |||
}, | |||
mounted() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
} | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.gasChart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
// mounted() { | |||
// this.actualOptions = this.options; | |||
// this.initOptions(this.options); | |||
// window.addEventListener("resize", this.initOptions(this.actualOptions)) | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
// }, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.bar-chart-base { | |||
// position: relative; | |||
.legend { | |||
position: absolute; | |||
top: 5.2vh; | |||
right: 1vw; | |||
} | |||
.legend-item { | |||
position: relative; | |||
// font-size: 12px; | |||
margin-right: 0.67vw; | |||
&::before { | |||
content: ""; | |||
display: inline-block; | |||
width: 0.531vw; | |||
height: 0.531vw; | |||
background-color: #ccc; | |||
border-radius: 2px; | |||
margin-right: 0.22vw; | |||
} | |||
} | |||
.legend-item:nth-child(1):before { | |||
background-color: #12f7f1; | |||
} | |||
.legend-item:nth-child(2):before { | |||
background-color: #58adfa; | |||
} | |||
} | |||
</style> |
@@ -1,40 +1,32 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 13:22:43 | |||
* @LastEditTime: 2024-05-09 16:22:24 | |||
* @LastEditTime: 2024-05-14 08:32:44 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<chart-container class="bar-chart-base"> | |||
<div class="legend"> | |||
<span | |||
v-for="item in legend" | |||
:key="item.label" | |||
class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | |||
>{{ item.label }}</span | |||
> | |||
<span v-for="item in legend" :key="item.label" class="legend-item" | |||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | |||
</div> | |||
<div | |||
ref="chart" | |||
style="max-width: 40vw" | |||
:style="{ height: vHeight + 'vh' }" | |||
></div> | |||
<div ref="chart" :style="{ height: '100%',width: width}"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import screenfull from "screenfull"; | |||
import ChartContainer from "../../../../components/ChartContainer.vue"; | |||
import chartMixin from "@/mixins/chart.js"; | |||
// import chartMixin from "@/mixins/chart.js"; | |||
import { debounce } from "@/utils/debounce"; | |||
import * as echarts from "echarts"; | |||
export default { | |||
name: "BarChartBase", | |||
components: { | |||
ChartContainer, | |||
}, | |||
mixins: [chartMixin], | |||
// mixins: [chartMixin], | |||
props: { | |||
vHeight: { | |||
type: Number, | |||
@@ -59,12 +51,13 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
width: '100%', | |||
isFullscreen: false, | |||
actualOptions: null, | |||
options: { | |||
grid: { | |||
left: "5%", | |||
right: "4%", | |||
right: "0%", | |||
bottom: "3%", | |||
top: "15%", | |||
containLabel: true, | |||
@@ -182,7 +175,21 @@ export default { | |||
}, | |||
}; | |||
}, | |||
computed: { | |||
isOpen() { | |||
return this.$store.getters.sidebar.opened | |||
}, | |||
}, | |||
watch: { | |||
isOpen(val) { | |||
if (val === true) { | |||
this.width = '100%-128px' | |||
this.canvasReset() | |||
} else { | |||
this.watch = 100 + '%' | |||
this.canvasReset() | |||
} | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
isFullscreen(val) { | |||
this.actualOptions.series.map((item) => { | |||
@@ -191,11 +198,11 @@ export default { | |||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | |||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | |||
this.initOptions(this.actualOptions); | |||
this.initChart(this.actualOptions); | |||
}, | |||
series(val) { | |||
if (!val) { | |||
this.initOptions(this.options); | |||
this.initChart(this.options); | |||
return; | |||
} | |||
console.log(val) | |||
@@ -205,19 +212,41 @@ export default { | |||
actualOptions.series[1].data = val?.[1]?.data || []; | |||
actualOptions.series[1].name = val?.[1]?.name || ""; | |||
this.actualOptions = actualOptions; | |||
this.initOptions(actualOptions); | |||
this.initChart(actualOptions); | |||
}, | |||
}, | |||
mounted() { | |||
this.actualOptions = this.options; | |||
this.initOptions(this.options); | |||
if (screenfull.isEnabled) { | |||
screenfull.on("change", () => { | |||
this.isFullscreen = screenfull.isFullscreen; | |||
}); | |||
// if (screenfull.isEnabled) { | |||
// screenfull.on("change", () => { | |||
// this.isFullscreen = screenfull.isFullscreen; | |||
// }); | |||
// } | |||
this.actualOptions = this.options | |||
this.canvasReset(); | |||
window.addEventListener("resize", this.canvasReset); | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
}, | |||
destroyed() { | |||
window.removeEventListener("resize", this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(this.$refs.chart); | |||
this.chart.setOption(this.actualOptions); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -159,6 +159,7 @@ export default { | |||
} | |||
.chart { | |||
width: 390px; | |||
align-self: stretch; | |||
height: 280px; | |||
} | |||
@@ -7,31 +7,30 @@ | |||
<template> | |||
<LineChartBase | |||
v-if="1" | |||
:legend="legend" | |||
:series="series" | |||
:xAxis="xAxis" | |||
in="elecCost" | |||
class="elec-cost" | |||
/> | |||
<BarChartBase | |||
<!-- <BarChartBase | |||
v-else | |||
:legend="legend" | |||
:series="series" | |||
:xAxis="xAxis" | |||
in="elecCost" | |||
class="elec-cost" | |||
/> | |||
/> --> | |||
</template> | |||
<script> | |||
import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | |||
// import BarChartBaseVue from "@/views/copilot/components/BarChartBase.vue"; | |||
import LineChartBaseVue from "@/views/copilot/components/LineChartBase.vue"; | |||
export default { | |||
name: "ElecCost", | |||
components: { | |||
BarChartBase: BarChartBaseVue, | |||
// BarChartBase: BarChartBaseVue, | |||
LineChartBase: LineChartBaseVue, | |||
}, | |||
props: { | |||
@@ -15,7 +15,7 @@ | |||
</template> | |||
<script> | |||
import BarChartBase from "@/views/copilot/components/BarChartBase.vue"; | |||
import BarChartBase from "@/views/copilot/components/gasBarChartBase.vue"; | |||
export default { | |||
name: "NatGasCost", | |||
@@ -10,10 +10,12 @@ | |||
<div class="cities"> | |||
<CopilotButtons :options="cities" @update:active="handleCityUpdate" /> | |||
</div> | |||
<div class="chart" ref="chart"></div> | |||
<div style="padding: 0 30px;width: 90%;"> | |||
<div class="chart" ref="chart"></div> | |||
</div> | |||
<div class="legend" v-if="1"> | |||
<div class="legend-item" v-for="(lgd,index) in legendList" :key="lgd.name"> | |||
<div > | |||
<div> | |||
<span :style="'backgroundColor:' + colors[index%5]" class="legend-item__chart"></span> | |||
<span :style="'color:' + colors[index%5]" class="legend-item__label">{{ lgd.name }}</span> | |||
</div> | |||
@@ -108,6 +110,8 @@ export default { | |||
} | |||
.chart { | |||
margin-left: 5%; | |||
width: 290px; | |||
align-self: stretch; | |||
height: 280px; | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-09 08:41:11 | |||
* @LastEditTime: 2024-05-13 15:48:10 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -56,8 +56,11 @@ export default { | |||
immediate: true, | |||
}, | |||
}, | |||
methods: { | |||
fetchData(period = "日") { | |||
// console.log(this.width); | |||
// console.log('sidebar', this.$store.getters.sidebar); | |||
console.log(`效率驾驶舱,获取${period}数据`); | |||
this.$store.dispatch("copilot/initCopilot", { | |||
period, | |||
@@ -25,6 +25,7 @@ export default { | |||
props: {}, | |||
data() { | |||
return { | |||
weatherInterval:null, | |||
isFullscreen: false, | |||
times: null, | |||
weather:'', | |||
@@ -39,9 +40,15 @@ export default { | |||
}; | |||
}, | |||
}, | |||
mounted () { | |||
;this.getTimes() | |||
this.getWeather() | |||
mounted() { | |||
this.getTimes() | |||
this.weatherInterval = setInterval(() => { | |||
this,this.getWeather() | |||
}, 1000) | |||
}, | |||
destroyed() { | |||
// console.log(1111) | |||
clearInterval(this.weatherInterval) | |||
}, | |||
methods: { | |||
getTimes() { | |||
@@ -83,23 +90,21 @@ export default { | |||
'.' + | |||
day | |||
}, | |||
async getWeather() { | |||
setInterval(() => { | |||
fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, { | |||
method: 'get', | |||
extensions: 'base', | |||
getWeather() { | |||
fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=a20a2093715deb9bd68e423c34a2ac3c&city=110108`, { | |||
method: 'get', | |||
extensions: 'base', | |||
// output:'JSON' | |||
}).then((response) => { | |||
// 注意此处 | |||
response.json().then((data) => { | |||
console.log(data) | |||
this.weather = data.lives[0].weather + ' '+ data.lives[0].temperature + '℃' | |||
}).catch((err) => { | |||
}).then((response) => { | |||
// 注意此处 | |||
response.json().then((data) => { | |||
console.log(data) | |||
this.weather = data.lives[0].weather + ' ' + data.lives[0].temperature + '℃' | |||
}).catch((err) => { | |||
this.weather = '晴 25℃' | |||
console.log(err); | |||
}) | |||
}) | |||
}, 1000) | |||
console.log(err); | |||
}) | |||
}) | |||
}, | |||
toggleFullscreen() { | |||
screenfull.toggle(); | |||