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

<template>
  <div class="center-left">
    <div class="bs-card business-buy">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">
          康养服务
        </p>
        <p>
          <span class="color-word">658</span>
          <span class="color-white">人次/年</span>
        </p>
      </div>

      <div class="business-buy__body">
        <div>
          <div id="property-line-chart"></div>
        </div>
      </div>
    </div>

    <div class="bs-card property">
      <div id="property-pie-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 {}
  },
  methods: {
    async getChartData () {
      try {
        const res = (await getList({
          type: 'kangyangfuwu'
        },false))?.data
        this.pieChartData = JSON.parse(res?.find(i => i.key === 'piechart')?.value)
        this.initPieChart()

        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-line-chart'), 'macarons');
      this.setOptions(this.chartData);
    },
    initPieChart () {
      this.chartPie = echarts.init(document.querySelector('#property-pie-chart'));
      this.setPieOptions(this.pieChartData);
    },
    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: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384b8f', // 设置 X 轴间隔线颜色为红色
            }
          }

        },
        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,
              position: 'insideRight',
              color: '#fff',
              fontWeight: 'bold',
              formatter: '{c}'
            },
            itemStyle: {
              color: (params) => {
                return color[params.dataIndex]
              },
              barBorderRadius: [0,4,4,0],
            },
          }
        ]
      })
    },

    setPieOptions () {
      let color = [new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
        {
          offset: 0,
          color: '#202aed'
        },
        {
          offset: 1,
          color: '#3b82f0'
        }
      ]),new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
        {
          offset: 0,
          color: '#84d7ee'
        },
        {
          offset: 1,
          color: '#6fe7fa'
        }
      ])]
      this.chartPie.setOption({
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '64%',
            center: ['50%', '50%'],
            data: this.pieChartData.map((i, index) => ({
              value: isNaN(Number(i.value)) ? 0 : Number(i.value),
              name: i.label,
              itemStyle: {
                color: color[index],
                shadowBlur: 10,
              }
            })),
            roseType: 'radius',
            label: {
              color: '#fff',
              formatter: '{b} \n {d}%'
            },
            labelLine: {
              lineStyle: {
                color: '#71e8fc'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },


            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      })
    }
  },
  computed: {},
  mounted() {
    this.getChartData()
  }
}
</script>

<style scoped lang="scss">
.center-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .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-line-chart {
  height: 335px;
  width: 100%;
}
#property-pie-chart {
  width: 100%;
  height: 100%;
}
</style>