echart柱状百分比

---

要求

一个横向的百分比柱状图

---

一、样式

就这么一个样式，所占百分比被我隐藏了

二、使用步骤

1.引入库

代码如下（这里用了bootstracp等框架）：

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js 相关版本去官网自行下载 -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2.html

代码如下（示例）：

<div id="rbtop" style="float: left;width: 1050px;height: 110px;margin-left: 20px;"></div>
<!--图表js-->
<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('rbtop'));
        // 指定图表的配置项和数据
        var option = {
        title: [{
	        text: '今日入库信息',
	        x:"440",
	        y:'15',
	        textStyle:{
	            color: '#fff',
	            fontSize:18,
	        }
	    }],
        // 设置图表的位置
        grid: {
          /*x: 20, // 左间距*/
          y: 80, // 上间距
          x2: 20, // 右间距
          y2: 40, // 下间距
		  width:1250,          
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型, axis: 坐标轴触发
          axisPointer: {
          	// 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
          	// 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer 
            type: 'none' 
          },
          textStyle: {
            color: '#cdd3ee' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
          // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          formatter: '{b}<br />{a0}: {c0}种<br />{a1}: {c1}种<br />'
        },
        // 图例组件
        
        // X轴
        xAxis: {
          type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: { // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
            // 为该类型时必须通过 data 设置类目数据
            type: 'category', 
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: { // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: { // 坐标轴线线的颜色
                color: '#ffffff',
              }
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: '#ffffff', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}',
            },
            // 类目数据，在类目轴（type: 'category'）中有效
            data: ['',] 
          }
        ],
        legend: {
        	data:['已入库','待入库'],
        	x:'860',
        	y:'40',
        	textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 16
                        },
    	},
        	//系列
        	series: [
          {
            type: 'bar', // 系列类型
            name: '已入库', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            stack: '总量',
            itemStyle: {
                    color: '#00d39a',  //设置柱子颜色
            },
            /*// 图形上的文本标签
            label: {
              show: true,
              // 标签的位置 left right bottom top inside  // 绝对的像素值 position: [10, 10] 
              // 相对的百分比 position: ['50%', '50%']
              position: 'inside' 
            },*/
            /*// 图形样式
            itemStyle: {
              barBorderRadius: [10, 0, 0, 10] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
            },*/
            data: [660] // 系列中的数据内容数组
          },
          {
            type: 'bar', // 系列类型
            name: '待入库', // 系列名称, 用于tooltip的显示, legend 的图例筛选
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            stack: '总量',
            itemStyle: {
                    color: '#578bff',  //设置柱子颜色
            },
            /*// 图形上的文本标签
            label: {
            	normal:{
            		show: true,
              // 标签的位置 left right bottom top inside  // 绝对的像素值 position: [10, 10] 
              // 相对的百分比 position: ['50%', '50%']
              		position: 'inside',
            	}
               
            },*/
            
            /*// 图形样式
            itemStyle: {
              barBorderRadius: [0, 10, 10, 0] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
            },*/
            data: [50] // 系列中的数据内容数组
          }
        ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		</script>

应该大差不差。

---

总结

拿走的老哥说一下，我看看能帮到多少人，这个样式卡了我半天。。。我真菜。