代碼示例：

  1 var option = {
  2                     title: {
  3                         text: ‘風險水平預測‘ ,             //圖表主標題
  4                         subtext:‘2011-2013年數據‘    //圖表副標題
  5                     },
  6                     legend:{                         //條形圖的參數
  7                         data:[‘2011年‘,‘2012年‘,‘2013年‘],
 
  8                         align: ‘left‘,
  9                         rightt: 10
 10                     },
 11                     barGap:‘25%‘,                 //單個柱狀圖之間的間隙
 12                     barCategoryGap:‘25%‘,    //每組柱狀圖之間的間隙
 13                     tooltip: {                  //柱狀圖的tooltip提示框
 14
 
                         show:true,     
 15                         trigger: ‘axis‘,
 16                         axisPointer: {
 17                             type: ‘shadow‘
 18                         }
 19                     },
 20                     grid: {                     //圖表的顯示位置
 21                         left: ‘3%‘,
 
 22                         right: ‘4%‘,
 23                         bottom: ‘3%‘,
 24                         containLabel: true
 25                     },
 26                     xAxis: {                 //x軸的配置
 27                         axisLabel:{        //x軸的刻度值
 28                             show:true,
 29                             textStyle: {    //設置刻度值的顏色
 30                                 color: ‘#000‘
 31                             }
 32                         },
 33                         axisLine:{         //x軸的軸線
 34                             show:true
 35                         },
 36                         axisTick:{         //x軸的刻度線
 37                             show:true
 38                         },
 39                         splitLine:{         //x軸的網格線
 40                             show:false
 41                         },
 42                         type: ‘category‘,  
 43                         data: [‘巴西‘,‘印尼‘,‘美國‘,‘印度‘,‘中國‘,‘世界人口(萬)‘]     //x軸刻度值的數據
 44                     },
 45                     yAxis: {                 //y軸的配置
 46                         axisLabel:{        //y軸的刻度值
 47                             show:true
 48                         },
 49                         axisLine:{        //y軸的軸線
 50                             show:true
 51                         },
 52                         axisTick:{        //y軸的刻度線
 53                             show:true
 54                         },
 55                         splitLine:{       //y軸的網格線
 56                             show:true
 57                         },
 58                         type: ‘value‘,
 59                         boundaryGap: [0, 0.01]
 60                     },
 61                     series: [
 62                         {
 63                             name: ‘2011年‘,
 64                             type: ‘bar‘,
 65                             data: [120,60,102,99,133 ],    //柱狀圖的值
 66                             itemStyle:{
 67                                 normal:{
 68                                     color:  new echarts.graphic.LinearGradient(   //柱狀圖的顏色，此處為漸變色
 69                                         0, 1, 0, 0,
 70                                         [
 71                                             {offset: 1, color: ‘#477397‘},
 72                                             {offset: 0.2, color: ‘#9dc1de‘},
 73                                             {offset: 0, color: ‘#fff‘}
 74 
 75                                         ]
 76                                     )
 77                                 },
 78                                 emphasis: {       //鼠標hover到條形圖上條形圖的顯示狀態
 79                                     barBorderWidth: 1,  
 80                                     shadowBlur: 10,
 81                                     shadowOffsetX: 0,
 82                                     shadowOffsetY: 0,
 83                                     shadowColor: ‘rgba(0,0,0,0.5)‘
 84                                 }
 85                             }
 86                         },
 87                         {
 88                             name: ‘2012年‘,
 89                             type: ‘bar‘,
 90                             data: [80,123,76,128,96 ],
 91                             itemStyle:{
 92                                 normal:{
 93                                     color:  new echarts.graphic.LinearGradient(
 94                                         0, 1, 0, 0,
 95                                         [
 96                                             {offset: 1, color: ‘#68a0c5‘},
 97                                             {offset: 0.2, color: ‘#94bce3‘},
 98                                             {offset: 0, color: ‘#fff‘}
 99 
100                                         ]
101                                     )
102                                 },
103                             }
104                         },
105                         {
106                             name: ‘2013年‘,
107                             type: ‘bar‘,
108                             data: [50, 80,117,115,118],
109                             itemStyle:{
110                                 normal:{
111                                     color: new echarts.graphic.LinearGradient(
112                                         0, 1, 0, 0,
113                                         [
114                                             {offset: 1, color: ‘#b3c6e0‘},
115                                             {offset: 0.2, color: ‘#cadbed‘},
116                                             {offset: 0, color: ‘#fff‘}
117 
118                                         ]
119                                     )
120                                 },
121                             }
122                         }
123                     ]
124                 };     

echarts的相關配置--柱狀圖