項(xiàng)目需求：需要做成百分比的進(jìn)度條，如下所示：

屏幕快照 2019-04-16 下午7.32.30.png

用過echarts的朋友們都知道官網(wǎng)上給的example大多都是最普通的柱狀圖，所以針對(duì)這種需求我們需要給柱狀圖進(jìn)行參數(shù)的配置

首先對(duì)于react用戶的第一步驟

npm install --save echarts-for-react
npm install echarts --save //如果有報(bào)錯(cuò)找不到echarts模塊，需要在安裝一下exharts'

第二步驟：引入模塊和組件

import echarts from 'echarts' 
import echarts from 'echarts/lib/echarts'
<ReactEcharts option={this.getOption()} />

注意：因?yàn)槲业氖窃趓eact項(xiàng)目中使用的，用npm安裝的是ReactEcharts，如果不是安裝這個(gè)的，只參考項(xiàng)目的option部分，如果想要安裝這個(gè)，具體教程請(qǐng)翻看我的之前的文章

下面值貼出項(xiàng)目的option部分屬性

修改柱狀圖的顏色： color："#f00"放在series-itemStyle-nomal中

去除x,y軸的軸線： show : false 放在xAxis和yAxis中

兩個(gè)柱子重疊： barGap:"-100%" 放在series數(shù)組的最后一個(gè)對(duì)象中

修改整個(gè)圖的位置 grid:top/bottom/left/right自行設(shè)置

  getBarOption =()=> {
    let option = {
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
              type : 'shadow'        // 默認(rèn)為直線，可選為：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '50%',
          top: '3%',
      },
      xAxis:  {
          type: '',
          show : false,  //這個(gè)屬性控制x坐標(biāo)軸的顯示隱藏
      },
      yAxis: {
          show : false,  //這個(gè)屬性控制y坐標(biāo)軸的顯示隱藏
          type: 'category',
          data: ['機(jī)型1']
      },
      series: [
        {
          type: 'bar',
          data:[60],
          tooltip: { show: false},
          barMinHeight: 30, //最小柱高
          barWidth: 10, // 柱寬度
          barMaxWidth: 100,// 最大柱寬度
          z: 10, // 控制圖表前后順序
          itemStyle: { // 柱子樣式
            normal: {
              color: '#13C2C2', // 柱狀圖顏色
              label: {
                show: true, // 顯示文本
                position: 'right', // 數(shù)據(jù)值位置
                formatter: '{c}%', //這個(gè)屬性顯示百分比
                textStyle: {
                  color: '#000'
                }
              }
            }
          }
        },
        {
          type: 'bar',
          data: [100],
          tooltip: { show: false},
          barMinHeight: 30,
          barWidth: 10,
          barMaxWidth: 100,
          barGap: '-100%', // 兩個(gè)柱子之間的距離，如果要重疊設(shè)置為-100%
          itemStyle: {
            normal: {
              color: '#F0F2F5', // 柱子顏色，作為底層背景
              label: {
                show: false,
                position: 'right',
                testStyle: {
                  color: '#000'
                }
              }
            }
          }
        }
      ]
  };
  return option;
  }

//內(nèi)容部分
 <ReactEcharts option={this.getPieOption()}  style={{height:'400px'}}/>
//注意：一定要設(shè)置高度啊，否則可能顯示不出來