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 class="digital">
          <p class="digital-item">60%</p>
          <p class="digital-item">18%</p>
          <p class="digital-item">22%</p>
          <img :src="require('@/assets/bigScreen/business-buy.png')" alt="">
        </div>

        <div class="progress">
          <div class="progress-item" v-for="i in 3">
            <svg viewBox="0 0 100 100" style="transform: rotate(-90deg)">
              <path d="M 50 50 m 0 47a 47 47 0 1 1 0 -94a 47 47 0 1 1 0 94"
                    stroke="#f56c6c"
                    stroke-width="8"
                    fill="none"
                    style="stroke-dasharray: 5,4; stroke-dashoffset: -36.9137px;"></path>
              <path d="M 50 50 m 0 47 a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 94"
                    stroke="#0e2168"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="8"
                    style="stroke-dasharray: 74.1482px, 295.31px; stroke-dashoffset: -36.9137px; transition: stroke-dasharray 0.6s, stroke 0.6s;"></path>
            </svg>

            <div class="progress-name">
              长护
            </div>
            <div class="progress-rate">
              30%
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bs-card property">
      <div class="bs-card__title jc-between">
        <p class="bs-card__title--text">
          物业
        </p>
        <div class="chart-legend">
          <div class="chart-legend__item">
            <div style="background: #00d9d5;"></div>
            <p class="color-white">商业服务面积</p>
          </div>
          <div class="chart-legend__item">
            <div style="background: linear-gradient(0deg, #e67725 0%, #ff9d62 100%);"></div>
            <p class="color-white">住宅服务面积</p>
          </div>
        </div>
      </div>

      <div>
        <div id="property-line-chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {}
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.querySelector('#property-line-chart'), 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions(chartdata) {
      this.chart.setOption({
        grid: {
          top: 10,
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'value',
        }],
        yAxis: [{
          type: 'category',
          date: ['商业服务面积','住宅服务面积']
        }],
        series: [{
          name: '商业服务面积',
          type: 'bar',
          barWidth: '30%',
          data: [550],
          itemStyle: {
            color: "#00d9d5",
            barBorderRadius: [0,4,4,0],
          },
          label: {
            show: true,
            position: 'right',
            color: '#31abe3',
            fontWeight: 'bold',
            formatter: '{c}㎡'
          },
          animationDuration: 3000
        },{
          name: '住宅服务面积',
          type: 'bar',
          barWidth: '30%',
          data: [550],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0.5, 0, 0.5, [
              {
                offset: 0,
                color: '#e67725'
              },
              {
                offset: 1,
                color: '#ff9d62'
              }
            ]),
            barBorderRadius: [0,4,4,0],
          },
          label: {
            show: true,
            position: 'right',
            color: '#31abe3',
            fontWeight: 'bold',
            formatter: '{c}㎡'
          },
          animationDuration: 3000
        }]
      })

    }
  },
  computed: {},
  mounted() {
    this.initChart()
  }
}
</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: 140px;
  width: 388px;
}
</style>