mt-fe-group
/
yudao-init
7
0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Преглед на файлове

update fto

pull/1/head
DESKTOP-FUDKNA8\znjsz преди 5 месеца
родител
9aefc3def8
ревизия
921da642b6
променени са 3 файла, в които са добавени 277 реда и са изтрити 252 реда
Разделен изглед
Diff Options
Показване на статистика Download Patch File Download Diff File
  1. +8
    -204
      src/views/dashboard/charts/ChipInvest.vue
  2. +35
    -48
      src/views/dashboard/charts/Fto.vue
  3. +234
    -0
      src/views/dashboard/charts/LeftChartBase.vue

+ 8
- 204
src/views/dashboard/charts/ChipInvest.vue Целия файл

@@ -6,31 +6,20 @@
-->

<template>
<chart-container class="chip-invest-chart">
<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>
<left-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
class="chip-invest-chart"
/>
</template>

<script>
import screenfull from "screenfull";
import ChartContainerVue from "../components/ChartContainer.vue";
import chartMixin from "../mixins/chart.js";
import LeftChartBase from "./LeftChartBase.vue";

export default {
name: "chip-investChart",
components: {
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
components: { LeftChartBase },
props: {
legend: {
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>

<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>

+ 35
- 48
src/views/dashboard/charts/Fto.vue Целия файл

@@ -6,62 +6,49 @@
-->

<template>
<chart-container class="fto-chart">
<div ref="chart" style="max-width: 22vw; height: 100%"></div>
</chart-container>
<left-chart-base
:legend="legend"
:series="series"
:xAxis="xAxis"
class="fto-chart"
/>
</template>

<script>
import ChartContainerVue from "../components/ChartContainer.vue";
import chartMixin from "../mixins/chart.js";
import LeftChartBase from "./LeftChartBase.vue";

export default {
name: "FtoChart",
components: {
ChartContainer: ChartContainerVue,
},
mixins: [chartMixin],
props: {},
data() {
return {
options: {
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {},
legend: {
data: ["Sales"],
components: { LeftChartBase },
props: {
legend: {
type: Array,
default: () => [
{ label: "2023年", color: "#12f7f1" },
{ label: "2024年", color: "#58adfa" },
],
},
xAxis: {
type: Array,
default: () => ["成都", "邯郸", "株洲", "瑞昌", "heels", "socks"],
},
series: {
type: Array,
default: () => [
{
name: "2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
xAxis: {
data: [
"shirt",
"cardign",
"chiffon shirt",
"pants",
"heels",
"socks",
],
{
name: "2024年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
},
};
],
},
},
mounted() {
this.initOptions(this.options);
},
computed: {},
methods: {},
};
</script>

<style scoped lang="scss"></style>

+ 234
- 0
src/views/dashboard/charts/LeftChartBase.vue Целия файл

@@ -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>

Пиши Преглед
Зареждане…
Отказ
Запис