mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

合并静态首页代码至master #1

Merged
zwq merged 16 commits from home-add-map into master 2024-04-11 16:43:00 +08:00
Conversation 0 Commits 16 Files Changed 28 +277 -252
3 changed files with 277 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 921da642b6 - Show all commits

212
src/views/dashboard/charts/ChipInvest.vue
View File

@ -6,31 +6,20 @@
--> -->
<template> <template>
<chart-container class="chip-invest-chart"> <left-chart-base
<div class="legend"> :legend="legend"
<span :series="series"
v-for="item in legend" :xAxis="xAxis"
:key="item.label" class="chip-invest-chart"
class="legend-item" />
:style="{ fontSize: isFullscreen ? '16px' : '12px' }"
>{{ item.label }}</span
>
</div>
<div ref="chart" style="max-width: 22vw; height: 34vh"></div>
</chart-container>
</template> </template>
<script> <script>
import screenfull from "screenfull"; import LeftChartBase from "./LeftChartBase.vue";
import ChartContainerVue from "../components/ChartContainer.vue";
import chartMixin from "../mixins/chart.js";
export default { export default {
name: "chip-investChart", name: "chip-investChart",
components: { components: { LeftChartBase },
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
props: { props: {
legend: { legend: {
type: Array, type: Array,
@ -61,190 +50,5 @@ export default {
], ],
}, },
}, },
data() {
return {
isFullscreen: false,
options: {
grid: {
left: "3%",
right: "4%",
bottom: "0",
top: "12%",
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: "2023年",
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: "2024年",
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,
},
],
},
};
},
watch: {
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 24 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.options);
},
},
mounted() {
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
}; };
</script> </script>
<style scoped lang="scss">
.chip-invest-chart {
// 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: 10px;
height: 10px;
background-color: attr(data-color);
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;
}
/** add more */
// .legend-item:nth-child(3):before {
// background-color: #f7f1;
// }
}
</style>

83
src/views/dashboard/charts/Fto.vue
View File

@ -6,62 +6,49 @@
--> -->
<template> <template>
<chart-container class="fto-chart"> <left-chart-base
<div ref="chart" style="max-width: 22vw; height: 100%"></div> :legend="legend"
</chart-container> :series="series"
:xAxis="xAxis"
class="fto-chart"
/>
</template> </template>
<script> <script>
import ChartContainerVue from "../components/ChartContainer.vue"; import LeftChartBase from "./LeftChartBase.vue";
import chartMixin from "../mixins/chart.js";
export default { export default {
name: "FtoChart", name: "FtoChart",
components: { components: { LeftChartBase },
ChartContainer: ChartContainerVue, props: {
}, legend: {
mixins: [chartMixin], type: Array,
props: {}, default: () => [
data() { { label: "2023年", color: "#12f7f1" },
return { { label: "2024年", color: "#58adfa" },
options: { ],
grid: { },
left: "3%", xAxis: {
right: "4%", type: Array,
bottom: "3%", default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
containLabel: true, },
series: {
type: Array,
default: () => [
{
name: "2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
}, },
tooltip: {}, {
legend: { name: "2024年",
data: ["Sales"], data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
}, },
xAxis: { ],
data: [ },
"shirt",
"cardign",
"chiffon shirt",
"pants",
"heels",
"socks",
],
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
},
};
}, },
mounted() {
this.initOptions(this.options);
},
computed: {},
methods: {},
}; };
</script> </script>
<style scoped lang="scss"></style>

234
src/views/dashboard/charts/LeftChartBase.vue Normal file
View File

@ -0,0 +1,234 @@
<!--
filename: chip-invest.vue
author: liubin
date: 2024-04-10 08:59:28
description:
-->
<template>
<chart-container class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '16px' : '12px' }"
>{{ item.label }}</span
>
</div>
<div ref="chart" style="max-width: 22vw; height: 34vh"></div>
</chart-container>
</template>
<script>
import screenfull from "screenfull";
import ChartContainerVue from "../components/ChartContainer.vue";
import chartMixin from "../mixins/chart.js";
export default {
name: "chip-investChart",
components: {
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
props: {
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
},
data() {
return {
isFullscreen: false,
options: {
grid: {
left: "3%",
right: "4%",
bottom: "0",
top: "12%",
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: "2023年",
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: "2024年",
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,
},
],
},
};
},
watch: {
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 24 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.options);
},
},
mounted() {
this.initOptions(this.options);
if (screenfull.isEnabled) {
screenfull.on("change", () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
};
</script>
<style scoped lang="scss">
.left-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: 10px;
height: 10px;
background-color: attr(data-color);
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;
}
/** add more */
// .legend-item:nth-child(3):before {
// background-color: #f7f1;
// }
}
</style>