标签：Vue false 进度条 color show myChart 组件 type resize

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、颜色不渐变

 

标签：Vue,false,进度条,color,show,myChart,组件,type,resize
来源： https://www.cnblogs.com/hahahakc/p/16686721.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。