Vue进度条组件

1、进度条颜色是渐变的

<template>
  <div id="progress_bar" ref="myChart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { addListener, removeListener } from 'resize-detector';
import debounce from 'lodash/debounce';
export default {
  name: 'ProgressBar',
  props: {
    leftMount: {
      type: [Number, String],
      default: 0
    },
    allMount: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      myChart: null,
      option: {}
    };
  },
  created() {
    this.resize = debounce(this.resize, 300);
  },
  mounted() {
    this.$nextTick(() => {
      this.initProgressBar();
    });
  },
  methods: {
    resize() {
      this.myChart.resize();
    },
    initProgressBar() {
      this.myChart = echarts.init(this.$refs.myChart);
      addListener(this.$refs.myChart, this.resize);
        this.option = {
          grid: {
            left: '0%',
            top: '0',
            right: '0',
            bottom: '0',
            containLabel: false,
            width: '100%'
          },
          xAxis: {
            type: 'value',
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { show: false }
          },
          yAxis: {
            type: 'category',
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              color: 'black',
              fontSize: 17
            }
          },
          series: [
            {
              name: '/' + this.allMount,
              type: 'bar',
              barWidth: 18,
              data: [parseFloat(this.leftMount)],
              label: {
                show: false,
                offset: [20, 2],
                formatter   : '{c}{a}',
                color: '#fff',
                fontSize: 15
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  // { offset: 0, color: '#fec142' }, //柱图渐变色
                  {offset: 0.5, color: '#70b2b7'},                 //柱图渐变色
                  { offset: 1, color: '#007980' } //柱图渐变色
                ]),
                barBorderRadius: 9
              },
              zlevel: 1
            },
            {
              name: '进度条背景',
              type: 'bar',
              barGap: '-100%',
              barWidth: 18,
              data: [parseFloat(this.allMount)],
              color: '#fec142', //柱条颜色
              itemStyle: {
                normal: {
                  barBorderRadius: 9,
                  borderColor: '#FEFEFE'
                }
              }

　　　　　　　　//itemStyle: { ======================颜色不渐变=========

              //图形样式

                //normal: {

                  //normal 图形在默认状态下的样式;

                  //emphasis图形在高亮状态下的样式

                 // barBorderRadius: 10, //柱条圆角半径,单位px.

                  //此处统一设置4个角的圆角大小;

                  //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下

                //  color: '#007980'

                //}

              //},

            }
          ]
        };
        this.myChart.setOption(this.option, true);
    }
  },
  beforeDestroy() {
    removeListener(this.$refs.myChart, this.resize);
    this.myChart.dispose();
    this.myChart = null;
  }
};
</script>

<style lang="scss" scoped>
#progress_bar {
  width: 100%;
  height: 10px;
}
</style>

效果图：

 

 

 

2、颜色不渐变