echarts_部分圖表配置簡介_橫向柱狀圖

橫向柱狀圖主要配置x位置x軸類型y軸類型（軸的類型分兩種 1.category（類別）2.value(值)），代碼簡單（裏面有註釋）效果以下：

  1 var myChart = echarts.init(document.getElementById('thisId'));
  2             /*指定圖表的配置項和數據*/
  3             option = {
  4                     textStyle:{
  5                         color:'#fff',
  6                         fontSize:'16'
  7                      },
  8                     title: {
  9                         textStyle:{
 10                             color:'#fff',
 11                             
 12                          },
 13                          left:'50%',
 14                         text: '',
 15                        /* subtext: '數據來自網絡'*/
 16                     },
 17                     tooltip: {
 18                         trigger: 'axis',
 19                         axisPointer: {
 20                             type: 'shadow'
 21                         }
 22                     },
 23                     legend: {
 24 
 25                         textStyle:{
 26                             color:'#fff',
 27                          },
 28                        /* data: [titleName],*/
 29                     },
 30                     grid: {//設置圖表位置
 31                         left: '3%',
 32                         right: '4%',
 33                         bottom: '3%',
 34                         containLabel: true
 35                     },
 36                     xAxis: {
 37                         color:'#fff',
 38                         splitLine : {//去掉網格線
 39                             show : false
 40                         },
 41                         position: 'top',//X軸位置
 42                         type: 'value',
 43                         boundaryGap: [0, 0.01],
 44                         axisLabel : {//座標軸刻度標籤的相關設置
 45                             rotate:'45',//座標軸文字旋轉角度
 46                             show : true,
 47                             textStyle : {
 48                                 color : '#FFF',
 49                                 align : 'right',
 50                                 fontSize: 15
 51                             }
 52                         },
 53                         
 54                         axisLine : {
 55                             
 56                             lineStyle : {
 57                                 color : '#FFF'
 58                             }
 59                         },
 60                         axisTick : {
 61                             lineStyle : {
 62                                 color : '#FFF'
 63                             }
 64                         },
 65                     },
 66                     yAxis: {
 67                         
 68                         type: 'category',//軸的類型分兩種 1.category（類別）2.value(值)
 69                         data: /*da*/[ '本地商城','網上營業廳',  '微信營業廳', '掌上營業廳' ],
 70                         axisLabel : {
 71                             show : true,
 72                             textStyle : {
 73                                 color : '#FFF',
 74                                 align : 'right',
 75                                 fontSize: 15    /*文字大小*/
 76                             }
 77                         },
 78                         axisLine : {
 79                             lineStyle : {
 80                                 color : '#fff'//軸的顏色
 81                             }
 82                         },
 83                         axisTick : {
 84                             lineStyle : {
 85                                 color : '#FFF'//軸上點的顏色
 86                             }
 87                         },
 88 
 89                     },
 90                     series: [
 91                         {
 92                             name: channelArr,
 93                             type: 'bar',
 94                             data: /*aa*/indexArr,/*請求回來的數據數組*/
 95                             
 96                             label : {
 97                                 normal : {
 98                                     show : true,//顯示數字
 99                                     position : 'right'
100                                 }
101                             },
102                             
103                             barWidth : 15,//柱子寬度
104                             itemStyle : {
105                                 normal : {
106                                     color:'#ccecff',//柱狀的顏色
107                                     label : {
108                                           textStyle : {
109                                               fontSize : '15',//柱狀上的顯示的文字
110                                               color:'#ccecff'
111                                           }
112                                       }
113                                 }
114                             },
115 
116                         }
117 
118                     ]
119                 };
120             // 使用剛指定的配置項和數據顯示圖表。
121             myChart.setOption(option);