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