|
|
@@ -0,0 +1,242 @@ |
|
|
|
<!-- |
|
|
|
filename: right-chart-base |
|
|
|
author: liubin |
|
|
|
date: 2024-04-10 08:59:28 |
|
|
|
description: |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<chart-container class="right-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" |
|
|
|
:style="{ height: vHeight + 'vh' }" |
|
|
|
></div> |
|
|
|
</chart-container> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import screenfull from "screenfull"; |
|
|
|
import ChartContainerVue from "../components/ChartContainer.vue"; |
|
|
|
import chartMixin from "../mixins/chart.js"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "RightChartBase", |
|
|
|
components: { |
|
|
|
ChartContainer: ChartContainerVue, |
|
|
|
}, |
|
|
|
mixins: [chartMixin], |
|
|
|
props: { |
|
|
|
vHeight: { |
|
|
|
type: Number, |
|
|
|
default: 34, |
|
|
|
}, |
|
|
|
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: "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: "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: #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; |
|
|
|
} |
|
|
|
|
|
|
|
/** add more */ |
|
|
|
// .legend-item:nth-child(3):before { |
|
|
|
// background-color: #f7f1; |
|
|
|
// } |
|
|
|
} |
|
|
|
</style> |