94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2024-04-28 13:42:51
|
|
* @LastEditTime: 2024-06-03 08:55:42
|
|
* @LastEditors: zhp
|
|
* @Description:
|
|
-->
|
|
|
|
<template>
|
|
<right-chart-base
|
|
:legend="legend"
|
|
:series="series"
|
|
:xAxis="xAxis"
|
|
:vHeight="20.5"
|
|
class="bipv-chart"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import RightChartBase from "./RightChartBase.vue";
|
|
|
|
export default {
|
|
name: "BipvChart",
|
|
components: { RightChartBase },
|
|
data() {
|
|
const year = new Date().getFullYear();
|
|
// 城市数组的顺序必须是固定的
|
|
const cities = [ "邯郸",
|
|
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
|
|
|
|
];
|
|
return {
|
|
legend: [
|
|
{ label: `${year}年目标值`, color: "#f3c000" },
|
|
{ label: `${year - 1}年`, color: "#12f7f1" },
|
|
{ label: `${year}年`, color: "#58adfa" },
|
|
],
|
|
xAxis: cities,
|
|
};
|
|
},
|
|
computed: {
|
|
series() {
|
|
const bipvOutput = this.$store.getters.home.bipvOutput;
|
|
// const bipvTarget = this.$store.getters.home.bipvTarget;
|
|
|
|
if (
|
|
!bipvOutput ||
|
|
!bipvOutput.current ||
|
|
!bipvOutput.previous ||
|
|
!bipvOutput.target
|
|
) {
|
|
return [
|
|
{
|
|
name: "样例数据--2024年目标值",
|
|
data: Array.from({ length: 7 }, () =>
|
|
Math.floor(Math.random() * 1000)
|
|
),
|
|
},
|
|
{
|
|
name: "样例数据--2023年",
|
|
data: Array.from({ length: 7 }, () =>
|
|
Math.floor(Math.random() * 1000)
|
|
),
|
|
},
|
|
{
|
|
name: "样例数据--2024年",
|
|
data: Array.from({ length: 7 }, () =>
|
|
Math.floor(Math.random() * 1000)
|
|
),
|
|
},
|
|
];
|
|
}
|
|
|
|
return [
|
|
{
|
|
name: `${new Date().getFullYear()}年目标值`,
|
|
data: bipvOutput.target.splice(0, 1),
|
|
},
|
|
{
|
|
name: `${new Date().getFullYear() - 1}年`,
|
|
data: bipvOutput.previous.splice(0, 1)
|
|
},
|
|
{
|
|
name: `${new Date().getFullYear()}年`,
|
|
data: bipvOutput.current.splice(0, 1),
|
|
},
|
|
];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style>
|