|
|
<template>
|
|
|
<div class="center-left bs-card">
|
|
|
<div class="bs-card__title jc-between">
|
|
|
<p class="bs-card__title--text">康养服务</p>
|
|
|
<p>
|
|
|
<span style="font-size: 20px; color: #59d4fc; font-weight: 500"
|
|
|
>人次/年</span
|
|
|
>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="bs-card__body">
|
|
|
<el-carousel class="show-data" height="76px" :interval="5000" arrow="never" indicator-position="outside">
|
|
|
<el-carousel-item class="show-data-swipe" v-for="i in (Math.ceil(totalData.length/3))">
|
|
|
<div class="show-data-item" v-for="j in 3" v-if="totalData[(i-1)*3+(j-1)]">
|
|
|
<div class="show-data-item__num">{{ totalData[(i-1)*3+(j-1)].value }}</div>
|
|
|
<div class="show-data-item__label">{{ totalData[(i-1)*3+(j-1)].label }}</div>
|
|
|
</div>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
<div id="property-bar-chart"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bs-card__title" style="margin-top: 45px">
|
|
|
<p class="bs-card__title--text">公益/商业服务</p>
|
|
|
</div>
|
|
|
<div class="bs-card__body">
|
|
|
<div id="property-line-chart"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getList } from "@/api/bigScreen";
|
|
|
import echarts from "echarts";
|
|
|
require("echarts/theme/macarons"); // echarts theme
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
totalData: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
async getChartData() {
|
|
|
try {
|
|
|
const res = (
|
|
|
await getList(
|
|
|
{
|
|
|
type: "kangyangfuwu",
|
|
|
},
|
|
|
false
|
|
|
)
|
|
|
)?.data;
|
|
|
this.totalData = JSON.parse(res?.find((i) => i.key === "barchart")?.value);
|
|
|
this.lineChartData = JSON.parse(
|
|
|
res?.find((i) => i.key === "linechart")?.value
|
|
|
);
|
|
|
this.initLineChart();
|
|
|
|
|
|
this.chartData = JSON.parse(
|
|
|
res?.find((i) => i.key === "barchart")?.value
|
|
|
);
|
|
|
this.initChart();
|
|
|
} catch (err) {
|
|
|
console.error(err);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
initChart() {
|
|
|
this.chart = echarts.init(
|
|
|
document.querySelector("#property-bar-chart"),
|
|
|
"macarons"
|
|
|
);
|
|
|
this.setOptions(this.chartData);
|
|
|
},
|
|
|
initLineChart() {
|
|
|
this.chartLine = echarts.init(
|
|
|
document.querySelector("#property-line-chart")
|
|
|
);
|
|
|
this.setLineOptions(this.lineChartData);
|
|
|
},
|
|
|
setOptions(chartdata) {
|
|
|
let color = [
|
|
|
"#c95038",
|
|
|
"#e1884a",
|
|
|
"#ebb34c",
|
|
|
"#316922",
|
|
|
"#71dc7a",
|
|
|
"#6bb7be",
|
|
|
"#2050e0",
|
|
|
"#9952f6",
|
|
|
];
|
|
|
this.chart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: 10,
|
|
|
left: "2%",
|
|
|
right: "5.8%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "log",
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#5b7be8' // 设置x轴轴线颜色为红色
|
|
|
}
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#5b7be8",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "category",
|
|
|
data: this.chartData.map((i) => i.label),
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
width: 80,
|
|
|
overflow: 'truncate',
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "人数",
|
|
|
type: "bar",
|
|
|
data: this.chartData.map((i) => i.value),
|
|
|
label: {
|
|
|
show: true,
|
|
|
avoidLabelOverlap: false,
|
|
|
position: (params) => {
|
|
|
// 对于小数值（小于10000），将标签显示在柱子外部，避免与y轴重叠
|
|
|
// 对于大数值，标签显示在柱子内部右侧
|
|
|
return params.data < 10000 ? 'right' : 'insideRight';
|
|
|
},
|
|
|
color: "#fff",
|
|
|
fontWeight: "bold",
|
|
|
formatter: params => {
|
|
|
return params.data > 10000 ? `${params.data/10000}万+`: `${params.data}+`
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: (params) => {
|
|
|
return color[params.dataIndex];
|
|
|
},
|
|
|
barBorderRadius: [0, 4, 4, 0],
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
},
|
|
|
|
|
|
setLineOptions() {
|
|
|
this.chartLine.setOption({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
color: "#6786f1",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
top: 0,
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "50px",
|
|
|
left: "2%",
|
|
|
right: "4%",
|
|
|
bottom: "10px",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#395e9c',
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: '#395e9c',
|
|
|
},
|
|
|
},
|
|
|
data: this.lineChartData?.year || [],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#384b8f",
|
|
|
type: "dashed"
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 10,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "#384b8f",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "政府",
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "circle",
|
|
|
symbolSize: 8,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 4,
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
1,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(0,0,0,0)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "rgba(226, 172, 113, 0.4)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
shadowBlur: 10,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#e0a26e",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "#872d4a",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
},
|
|
|
},
|
|
|
data: this.lineChartData?.data.find(i => i.label === '政府')?.value,
|
|
|
},
|
|
|
{
|
|
|
name: "商业",
|
|
|
type: "line",
|
|
|
smooth: true,
|
|
|
symbol: "circle",
|
|
|
symbolSize: 8,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 4,
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
1,
|
|
|
1,
|
|
|
0,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(0,0,0,0)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "rgba(96, 191, 250, 0.4)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
shadowBlur: 10,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(96, 191, 250)",
|
|
|
},
|
|
|
},
|
|
|
data: this.lineChartData?.data.find(i => i.label === '商业')?.value,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
computed: {},
|
|
|
mounted() {
|
|
|
this.getChartData();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.center-left {
|
|
|
flex-shrink: 0;
|
|
|
width: 383px;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.show-data {
|
|
|
margin-top: 35px;
|
|
|
|
|
|
$itemColors: linear-gradient(0deg, #d91e19 0%, #d95f39 99%, #d95f39 100%),
|
|
|
linear-gradient(0deg, #e67725 0%, #ff9d62 100%),
|
|
|
linear-gradient(0deg, #f6aa2c 0%, #f8db36 100%, #f8db36 100%),
|
|
|
linear-gradient(0deg, #f6aa2c 0%, #f8db36 100%, #f8db36 100%),
|
|
|
linear-gradient(0deg, #d91e19 0%, #d95f39 99%, #d95f39 100%),
|
|
|
linear-gradient(0deg, #e67725 0%, #ff9d62 100%),
|
|
|
linear-gradient(0deg, #f6aa2c 0%, #f8db36 100%, #f8db36 100%),
|
|
|
linear-gradient(0deg, #f6aa2c 0%, #f8db36 100%, #f8db36 100%);
|
|
|
@for $index from 1 through length($itemColors) {
|
|
|
&-item:nth-child(#{$index}) {
|
|
|
& > div:nth-child(1) {
|
|
|
background: nth($itemColors, $index);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
&-swipe {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
&-item {
|
|
|
height: 100%;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
text-align: center;
|
|
|
box-shadow: inset 0 0 6px 4px #1a3674;
|
|
|
|
|
|
&__num {
|
|
|
width: 100%;
|
|
|
flex: 1;
|
|
|
border-radius: 5px 5px 0 0;
|
|
|
font-size: 32px;
|
|
|
color: #ffffff;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
&__label {
|
|
|
flex: 1;
|
|
|
border-radius: 0 0 5px 5px;
|
|
|
font-size: 16px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.show-data-item + .show-data-item {
|
|
|
margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
.business-buy {
|
|
|
height: 382px;
|
|
|
|
|
|
&__body {
|
|
|
.digital {
|
|
|
width: 205px;
|
|
|
height: 188px;
|
|
|
margin: auto;
|
|
|
position: relative;
|
|
|
& > img {
|
|
|
width: 205px;
|
|
|
height: 188px;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
font-size: 20px;
|
|
|
color: #31abe3;
|
|
|
font-weight: bold;
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
}
|
|
|
&-item:nth-child(1) {
|
|
|
top: 46%;
|
|
|
right: -36%;
|
|
|
}
|
|
|
&-item:nth-child(2) {
|
|
|
left: 50%;
|
|
|
bottom: 10%;
|
|
|
}
|
|
|
&-item:nth-child(3) {
|
|
|
left: -20%;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.progress {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 20px;
|
|
|
padding: 0 15px;
|
|
|
|
|
|
&-item {
|
|
|
width: 91px;
|
|
|
position: relative;
|
|
|
}
|
|
|
&-name {
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
width: 52px;
|
|
|
height: 20px;
|
|
|
border-radius: 10px;
|
|
|
background-color: #0052e9;
|
|
|
position: absolute;
|
|
|
bottom: 6px;
|
|
|
left: calc(50% - 26px);
|
|
|
}
|
|
|
&-rate {
|
|
|
color: #00deff;
|
|
|
font-size: 20px;
|
|
|
transform: translate(-50%, -50%);
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.property {
|
|
|
height: 243px;
|
|
|
|
|
|
.chart-legend {
|
|
|
display: flex;
|
|
|
|
|
|
&__item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 18px;
|
|
|
& > div {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
border-radius: 4px;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
& > p {
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
#property-bar-chart {
|
|
|
height: 355px;
|
|
|
width: 100%;
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
#property-line-chart {
|
|
|
margin-top: 20px;
|
|
|
width: 100%;
|
|
|
height: 190px;
|
|
|
}
|
|
|
</style>
|
