sishitongtang-crm/src/views/bigSreen/component/CenterLeft.vue

<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",
            },
          },
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.chartData.map((i) => i.value),
            label: {
              show: true,
              avoidLabelOverlap: true,
              position: '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>