echarts_部分图表配置简介_横向柱状图

横向柱状图主要配置x位置x轴类型y轴类型（轴的类型分两种 1.category（类别）2.value(值)），代码简单（里面有注释）效果如下：

 var myChart = echarts.init(document.getElementById('thisId'));
             /*指定图表的配置项和数据*/
             option = {
                     textStyle:{
                         color:'#fff',
                         fontSize:'16'
                      },
                     title: {
                         textStyle:{
                             color:'#fff',

                          },
                          left:'50%',
                         text: '',
                        /* subtext: '数据来自网络'*/
                     },
                     tooltip: {
                         trigger: 'axis',
                         axisPointer: {
                             type: 'shadow'
                         }
                     },
                     legend: {

                         textStyle:{
                             color:'#fff',
                          },
                        /* data: [titleName],*/
                     },
                     grid: {//设置图表位置
                         left: '3%',
                         right: '4%',
                         bottom: '3%',
                         containLabel: true
                     },
                     xAxis: {
                         color:'#fff',
                         splitLine : {//去掉网格线
                             show : false
                         },
                         position: 'top',//X轴位置
                         type: 'value',
                         boundaryGap: [0, 0.01],
                         axisLabel : {//坐标轴刻度标签的相关设置
                             rotate:'45',//坐标轴文字旋转角度
                             show : true,
                             textStyle : {
                                 color : '#FFF',
                                 align : 'right',
                                 fontSize: 15
                             }
                         },

                         axisLine : {

                             lineStyle : {
                                 color : '#FFF'
                             }
                         },
                         axisTick : {
                             lineStyle : {
                                 color : '#FFF'
                             }
                         },
                     },
                     yAxis: {

                         type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
                         data: /*da*/[ '本地商城','网上营业厅',  '微信营业厅', '掌上营业厅' ],
                         axisLabel : {
                             show : true,
                             textStyle : {
                                 color : '#FFF',
                                 align : 'right',
                                 fontSize: 15    /*文字大小*/
                             }
                         },
                         axisLine : {
                             lineStyle : {
                                 color : '#fff'//轴的颜色
                             }
                         },
                         axisTick : {
                             lineStyle : {
                                 color : '#FFF'//轴上点的颜色
                             }
                         },

                     },
                     series: [
                         {
                             name: channelArr,
                             type: 'bar',
                             data: /*aa*/indexArr,/*请求回来的数据数组*/

                             label : {
                                 normal : {
                                     show : true,//显示数字
                                     position : 'right'
                                 }
                             },

                             barWidth : 15,//柱子宽度
                             itemStyle : {
                                 normal : {
                                     color:'#ccecff',//柱状的颜色
                                     label : {
                                           textStyle : {
                                               fontSize : '15',//柱状上的显示的文字
                                               color:'#ccecff'
                                           }
                                       }
                                 }
                             },

                         }

                     ]
                 };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);