echarts的相关配置--柱状图

代码示例：

  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的相关配置—饼图
气泡图：echarts的相关配置—气泡图

 

posted @ 2017-08-30 13:56  小小夏123  Views(661)  Comments(0)  Edit  收藏  举报