更多进度条效果实例

vue 数据可视化大屏进度条效果实例

<template>
  <liMarquee v-if="show">

    <div class="fenbu">
      <li class="item" v-for="(item,index) in list" :key="index">
        <div class="iteml">
          <span>{{ index + 1 }}</span>
        </div>
        <div class="itemr">
          <span>{{ item.city_name }}</span>
          <div class="progress" :class="'progress'+index">
            <el-progress :stroke-width="10" :text-inside="true"
                         :percentage="(item.vehicle_num/(list[0].vehicle_num*1.2))*100"
                         :format="format(item.vehicle_num)"></el-progress>
          </div>
          <!--          <echarts7 :titles="item.city_name" :num="item.vehicle_num" max="1000" :color1="item.color1"-->
          <!--                    :color2="item.color2"></echarts7>-->

        </div>
      </li>
    </div>
  </liMarquee>
</template>

<script>
import echarts7 from './echarts/echarts7'
import { cityRanking } from '../../api/api/user'
import $ from 'jquery'
import '../../utils/jquery.liMarquee'
import liMarquee from '@/components/liMarquee/liMarquee'

export default {
  name: 'fenbu',
  components: {
    echarts7,
    liMarquee
  },
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      list: [],
      show: false,
      max: 1000,
      list2: [
        {
          color1: 'rgba(0, 193, 136, 1)',
          color2: 'rgba(0, 255, 181, 1)'
        }, {
          color1: 'rgba(143, 61, 220, 1)',
          color2: 'rgba(229, 64, 161, 1)'
        }, {
          color1: 'rgba(218, 130, 27, 1)',
          color2: 'rgba(255, 192, 0, 1)'
        }, {
          color1: 'rgba(0, 153, 169, 1)',
          color2: 'rgba(0, 232, 255, 1)'
        }]
    }
  },
  watch: {},
  mounted () {
    this.getdata()
  },
  methods: {
    format (item) {
      return () => {
        return item
      }
    },
    getdata () {
      var that = this
      cityRanking({}).then(function (res) {
        that.list = []
        that.show = false
        res.forEach((item, index) => {
          var data = {
            city_name: item.city_name,
            vehicle_num: item.vehicle_num,
            color1: '',
            color2: item.vehicle_num
          }
          if (index < 3) {
            data.color1 = that.list2[index].color1
            data.color2 = that.list2[index].color2
          } else {
            data.color1 = that.list2[3].color1
            data.color2 = that.list2[3].color2
          }
          that.list.push(data)
          that.$nextTick(() => {
            that.show = true
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/liMarquee.css";

.fenbu {
  width: 100%;
  height: 100%;

  .item {
    width: 100%;
    height: 45px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;

    .iteml {
      font-size: 13px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #FFFFFF;
      width: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;

      span {
        margin-top: 5px;
      }
    }

    .itemr {
      width: calc(100% - 36px);
      position: relative;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: nowrap;
      flex-direction: column;
      color: rgba(130, 153, 191, 1);

      //p {
      //  position: absolute;
      //  top: 0;
      //  left: 0;
      //  height: 20px;
      //}
    }
  }
}

::v-deep {
  .el-progress-bar__outer {
    background: none !important;
    overflow: fragments;
  }

  .el-progress-bar__inner {
    background: linear-gradient(90deg, rgba(0, 153, 169, 1), rgba(0, 232, 255, 1));
    max-width: 80%;
  }

  .el-progress-bar__innerText {
    margin-right: -40px;
    margin-top: -3px;
    color: rgba(13, 210, 230, 1);
  }
}

.progress {
  height: 10px;
  width: calc(100% - 0px);
}

.progress0 {
  ::v-deep {
    .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(0, 193, 136, 1), rgba(0, 255, 181, 1));
    }

    .el-progress-bar__innerText {
      color: rgba(0, 194, 137, 1);
    }
  }
}

.progress1 {
  ::v-deep {
    .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(143, 61, 220, 1), rgba(229, 64, 161, 1));
    }

    .el-progress-bar__innerText {
      color: rgba(216, 63, 170, 1);
    }
  }
}

.progress2 {
  ::v-deep {
    .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(218, 130, 27, 1), rgba(218, 130, 27, 1));
    }

    .el-progress-bar__innerText {
      color: rgba(252, 187, 2, 1);
    }
  }
}
</style>