【React】引用echarts折线图做成百分比的进度条

项目需求：需要做成百分比的进度条，如下所示：

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

用过echarts的朋友们都知道官网上给的example大多都是最普通的柱状图，所以针对这种需求我们需要给柱状图进行参数的配置

首先对于react用户的第一步骤

npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'

第二步骤：引入模块和组件

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

注意：因为我的是在react项目中使用的，用npm安装的是ReactEcharts，如果不是安装这个的，只参考项目的option部分，如果想要安装这个，具体教程请翻看我的之前的文章

下面值贴出项目的option部分属性

修改柱状图的颜色： color："#f00"放在series-itemStyle-nomal中

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

两个柱子重叠： barGap:"-100%" 放在series数组的最后一个对象中

修改整个图的位置 grid:top/bottom/left/right自行设置

  getBarOption =()=> {
    let option = {
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      grid: {
          left: '3%',
          right: '50%',
          top: '3%',
      },
      xAxis:  {
          type: '',
          show : false,  //这个属性控制x坐标轴的显示隐藏
      },
      yAxis: {
          show : false,  //这个属性控制y坐标轴的显示隐藏
          type: 'category',
          data: ['机型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', // 数据值位置
                formatter: '{c}%', //这个属性显示百分比
                textStyle: {
                  color: '#000'
                }
              }
            }
          }
        },
        {
          type: 'bar',
          data: [100],
          tooltip: { show: false},
          barMinHeight: 30,
          barWidth: 10,
          barMaxWidth: 100,
          barGap: '-100%', // 两个柱子之间的距离，如果要重叠设置为-100%
          itemStyle: {
            normal: {
              color: '#F0F2F5', // 柱子颜色，作为底层背景
              label: {
                show: false,
                position: 'right',
                testStyle: {
                  color: '#000'
                }
              }
            }
          }
        }
      ]
  };
  return option;
  }

//内容部分
 <ReactEcharts option={this.getPieOption()}  style={{height:'400px'}}/>
//注意：一定要设置高度啊，否则可能显示不出来