Echarts 柱状图属性详解

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225

<script type="text/javascript">      // 基于准备好的dom，初始化echarts实例      var myChart = echarts.init(document.getElementById('_top'));        // 指定图表的配置项和数据         var option = {             //--------------    标题 title  ----------------               title: {                                                text: '主标题',                                textStyle:{                 //---主标题内容样式                        color:'#fff'                 },                   subtext:'副标题',          //---副标题内容样式                 subtextStyle:{                     color:'#bbb'                                },                   padding:[0,0,100,100]               //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位               },               //----------------   图例 legend  -----------------             legend: {                 type:'plain',               //----图例类型，默认为'plain'，当图例很多时可使用'scroll'                 top:'1%',                   //----图例相对容器位置,top\bottom\left\right                            selected:{                     '销量':true,          //----图例选择,图形加载出来会显示选择的图例，默认为true                 },                 textStyle:{                 //----图例内容样式                     color:'#fff',               //---所有图例的字体颜色                     //backgroundColor:'black',  //---所有图例的字体背景色                 },                              tooltip:{                   //图例提示框，默认不显示                     show:true,                     color:'red',                 },                 data:[                      //----图例内容                     {                         name:'销量',                         icon:'circle',          //----图例的外框样式                         textStyle:{                             color:'#fff',       //----单独设置某一个图例的颜色                             //backgroundColor:'black',//---单独设置某一个图例的字体背景色                         }                     }                 ],                                  },               //--------------   提示框 -----------------             tooltip: {                 show:true,                  //---是否显示提示框,默认为true                 trigger:'item',             //---数据项图形触发                 axisPointer:{               //---指示样式                     type:'shadow',                          axis:'auto',                      }　　　　　　　　　                 padding:5,                 textStyle:{                 //---提示框内容样式                     color:"#fff",                           },             },               //-------------  grid区域  ----------------             grid:{                 show:false,                 //---是否显示直角坐标系网格                 top:80,                     //---相对位置，top\bottom\left\right                  containLabel:false,         //---grid 区域是否包含坐标轴的刻度标签                 tooltip:{                   //---鼠标焦点放在图形上，产生的提示框                     show:true,                      trigger:'item',         //---触发类型                     textStyle:{                         color:'#666',                     },                 }             },               //-------------   x轴   -------------------             xAxis: {                 show:true,                  //---是否显示                 position:'bottom',          //---x轴位置                 offset:0,                   //---x轴相对于默认位置的偏移                 type:'category',            //---轴类型，默认'category'                 name:'月份',              //---轴名称                 nameLocation:'end',         //---轴名称相对位置                 nameTextStyle:{             //---坐标轴名称样式                     color:"#fff",                     padding:[5,0,0,-5], //---坐标轴名称相对位置                 },                 nameGap:15,                 //---坐标轴名称与轴线之间的距离                 //nameRotate:270,           //---坐标轴名字旋转                   axisLine:{                  //---坐标轴 轴线                     show:true,                  //---是否显示                       //------------------- 箭头 -------------------------                     symbol:['none', 'arrow'],   //---是否显示轴线箭头                     symbolSize:[8, 8] ,         //---箭头大小                     symbolOffset:[0,7],         //---箭头位置                       //------------------- 线 -------------------------                     lineStyle:{                         color:'#fff',                         width:1,                         type:'solid',                     },                 },                 axisTick:{                  //---坐标轴 刻度                     show:true,                  //---是否显示                     inside:true,                //---是否朝内                     lengt:3,                    //---长度                     lineStyle:{                         //color:'red',          //---默认取轴线的颜色                         width:1,                         type:'solid',                     },                 },                 axisLabel:{                 //---坐标轴 标签                     show:true,                  //---是否显示                     inside:false,               //---是否朝内                     rotate:0,                   //---旋转角度                       margin: 5,                  //---刻度标签与轴线之间的距离                     //color:'red',              //---默认取轴线的颜色                 },                 splitLine:{                 //---grid 区域中的分隔线                     show:false,                 //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的                     lineStyle:{                         //color:'red',                         //width:1,                         //type:'solid',                     },                 },                 splitArea:{                 //--网格区域                     show:false,                 //---是否显示，默认false                 },                              data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容             },               //----------------------  y轴  ------------------------             yAxis: {                 show:true,                  //---是否显示                 position:'left',            //---y轴位置                 offset:0,                   //---y轴相对于默认位置的偏移                 type:'value',           //---轴类型，默认'category'                 name:'销量',              //---轴名称                 nameLocation:'end',         //---轴名称相对位置value                 nameTextStyle:{             //---坐标轴名称样式                     color:"#fff",                     padding:[5,0,0,5],  //---坐标轴名称相对位置                 },                 nameGap:15,                 //---坐标轴名称与轴线之间的距离                 //nameRotate:270,           //---坐标轴名字旋转                   axisLine:{                  //---坐标轴 轴线                     show:true,                  //---是否显示                       //------------------- 箭头 -------------------------                     symbol:['none', 'arrow'],   //---是否显示轴线箭头                     symbolSize:[8, 8] ,         //---箭头大小                     symbolOffset:[0,7],         //---箭头位置                       //------------------- 线 -------------------------                     lineStyle:{                         color:'#fff',                         width:1,                         type:'solid',                     },                 },                 axisTick:{                  //---坐标轴 刻度                     show:true,                  //---是否显示                     inside:true,                //---是否朝内                     lengt:3,                    //---长度                     lineStyle:{                         //color:'red',          //---默认取轴线的颜色                         width:1,                         type:'solid',                     },                 },                 axisLabel:{                 //---坐标轴 标签                     show:true,                  //---是否显示                     inside:false,               //---是否朝内                     rotate:0,                   //---旋转角度                       margin: 8,                  //---刻度标签与轴线之间的距离                     //color:'red',              //---默认取轴线的颜色                 },                 splitLine:{                 //---grid 区域中的分隔线                     show:true,                  //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的                     lineStyle:{                         color:'#666',                         width:1,                         type:'dashed',          //---类型                     },                 },                 splitArea:{                 //--网格区域                     show:false,                 //---是否显示，默认false                 }                                    },               //------------ 内容数据  -----------------             series: [                 {                     name: '销量',             //---系列名称                     type: 'bar',                //---类型                     legendHoverLink:true,       //---是否启用图例 hover 时的联动高亮                     label:{                     //---图形上的文本标签                         show:false,                         position:'insideTop',   //---相对位置                         rotate:0,               //---旋转角度                         color:'#eee',                     },                     itemStyle:{                 //---图形形状                         color:'blue',                         barBorderRadius:[18,18,0,0],                     },                     barWidth:'20',              //---柱形宽度                     barCategoryGap:'20%',       //---柱形间距                     data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]                 }             ]         };           // 使用刚指定的配置项和数据显示图表。         myChart.setOption(option); </script>

?

1

 

?

1	<br>　　　　　　　　　　//{a}：series的name属性<br>　　　　　　　　　　//{b}：当前数据的name<br>　　　　　　　　　　//{c}：当前数据的value<br>　　　　　　　　　　//{d}：当前数据的百分比<br>　　　　　　　　　　这是Echarts预定义的，当然可以用formatter自定义