没有颜色的糖

  1  var option = {
  2             //--------------    标题 title  ----------------  
  3             title: {                               
  4                 text: '主标题',               
  5                 textStyle:{                 //---主标题内容样式   
  6                     color:'#fff'
  7                 },
  8  
  9                 subtext:'副标题',          //---副标题内容样式
 10                 subtextStyle:{
 11                     color:'#bbb'               
 12                 },
 13  
 14                 padding:[0,0,100,100]               //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
 15  
 16             },
 17  
 18             //----------------   图例 legend  -----------------
 19             legend: {
 20                 type:'plain',               //----图例类型,默认为'plain',当图例很多时可使用'scroll'
 21                 top:'1%',                   //----图例相对容器位置,top\bottom\left\right           
 22                 selected:{
 23                     '销量':true,          //----图例选择,图形加载出来会显示选择的图例,默认为true
 24                 },
 25                 textStyle:{                 //----图例内容样式
 26                     color:'#fff',               //---所有图例的字体颜色
 27                     //backgroundColor:'black',  //---所有图例的字体背景色
 28                 },             
 29                 tooltip:{                   //图例提示框,默认不显示
 30                     show:true,
 31                     color:'red',
 32                 },
 33                 data:[                      //----图例内容
 34                     {
 35                         name:'销量',
 36                         icon:'circle',          //----图例的外框样式
 37                         textStyle:{
 38                             color:'#fff',       //----单独设置某一个图例的颜色
 39                             //backgroundColor:'black',//---单独设置某一个图例的字体背景色
 40                         }
 41                     }
 42                 ],                     
 43             },
 44  //--------------   提示框 -----------------
 45             tooltip: {
 46                 show:true,                  //---是否显示提示框,默认为true
 47                 trigger:'item',             //---数据项图形触发
 48                 axisPointer:{               //---指示样式
 49                     type:'shadow',     
 50                     axis:'auto',   
 51  
 52                 }
 53                 padding:5,
 54                 textStyle:{                 //---提示框内容样式
 55                     color:"#fff",          
 56                 },
 57             },
 58 //-------------  grid区域  ----------------
 59             grid:{
 60                 show:false,                 //---是否显示直角坐标系网格
 61                 top:80,                     //---相对位置,top\bottom\left\right 
 62                 containLabel:false,         //---grid 区域是否包含坐标轴的刻度标签
 63                 tooltip:{                   //---鼠标焦点放在图形上,产生的提示框
 64                     show:true, 
 65                     trigger:'item',         //---触发类型
 66                     textStyle:{
 67                         color:'#666',
 68                     },
 69                 }
 70             },
 71  
 72             //-------------   x轴   -------------------
 73             xAxis: {
 74                 show:true,                  //---是否显示
 75                 position:'bottom',          //---x轴位置
 76                 offset:0,                   //---x轴相对于默认位置的偏移
 77                 type:'category',            //---轴类型,默认'category'
 78                 name:'月份',              //---轴名称
 79                 nameLocation:'end',         //---轴名称相对位置
 80                 nameTextStyle:{             //---坐标轴名称样式
 81                     color:"#fff",
 82                     padding:[5,0,0,-5], //---坐标轴名称相对位置
 83                 },
 84                 nameGap:15,                 //---坐标轴名称与轴线之间的距离
 85                 //nameRotate:270,           //---坐标轴名字旋转
 86  
 87                 axisLine:{                  //---坐标轴 轴线
 88                     show:true,                  //---是否显示
 89  
 90                     //------------------- 箭头 -------------------------
 91                     symbol:['none', 'arrow'],   //---是否显示轴线箭头
 92                     symbolSize:[8, 8] ,         //---箭头大小
 93                     symbolOffset:[0,7],         //---箭头位置
 94  
 95                     //------------------- 线 -------------------------
 96                     lineStyle:{
 97                         color:'#fff',
 98                         width:1,
 99                         type:'solid',
100                     },
101                 },
102                 axisTick:{                  //---坐标轴 刻度
103                     show:true,                  //---是否显示
104                     inside:true,                //---是否朝内
105                     lengt:3,                    //---长度
106                     lineStyle:{
107                         //color:'red',          //---默认取轴线的颜色
108                         width:1,
109                         type:'solid',
110                     },
111                 },
112                 axisLabel:{                 //---坐标轴 标签
113                     show:true,                  //---是否显示
114                     inside:false,               //---是否朝内
115                     rotate:0,                   //---旋转角度  
116                     margin: 5,                  //---刻度标签与轴线之间的距离
117                     //color:'red',              //---默认取轴线的颜色
118                 },
119                 splitLine:{                 //---grid 区域中的分隔线
120                     show:false,                 //---是否显示,'category'类目轴不显示,此时我的X轴为类目轴,splitLine属性是无意义的
121                     lineStyle:{
122                         //color:'red',
123                         //width:1,
124                         //type:'solid',
125                     },
126                 },
127                 splitArea:{                 //--网格区域
128                     show:false,                 //---是否显示,默认false
129                 },             
130                 data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
131             },
132  
133             //----------------------  y轴  ------------------------
134             yAxis: {
135                 show:true,                  //---是否显示
136                 position:'left',            //---y轴位置
137                 offset:0,                   //---y轴相对于默认位置的偏移
138                 type:'value',           //---轴类型,默认'category'
139                 name:'销量',              //---轴名称
140                 nameLocation:'end',         //---轴名称相对位置value
141                 nameTextStyle:{             //---坐标轴名称样式
142                     color:"#fff",
143                     padding:[5,0,0,5],  //---坐标轴名称相对位置
144                 },
145                 nameGap:15,                 //---坐标轴名称与轴线之间的距离
146                 //nameRotate:270,           //---坐标轴名字旋转
147  
148                 axisLine:{                  //---坐标轴 轴线
149                     show:true,                  //---是否显示
150  
151                     //------------------- 箭头 -------------------------
152                     symbol:['none', 'arrow'],   //---是否显示轴线箭头
153                     symbolSize:[8, 8] ,         //---箭头大小
154                     symbolOffset:[0,7],         //---箭头位置
155  
156                     //------------------- 线 -------------------------
157                     lineStyle:{
158                         color:'#fff',
159                         width:1,
160                         type:'solid',
161                     },
162                 },
163                 axisTick:{                  //---坐标轴 刻度
164                     show:true,                  //---是否显示
165                     inside:true,                //---是否朝内
166                     lengt:3,                    //---长度
167                     lineStyle:{
168                         //color:'red',          //---默认取轴线的颜色
169                         width:1,
170                         type:'solid',
171                     },
172                 },
173                 axisLabel:{                 //---坐标轴 标签
174                     show:true,                  //---是否显示
175                     inside:false,               //---是否朝内
176                     rotate:0,                   //---旋转角度  
177                     margin: 8,                  //---刻度标签与轴线之间的距离
178                     //color:'red',              //---默认取轴线的颜色
179                 },
180                 splitLine:{                 //---grid 区域中的分隔线
181                     show:true,                  //---是否显示,'category'类目轴不显示,此时我的y轴为类目轴,splitLine属性是有意义的
182                     lineStyle:{
183                         color:'#666',
184                         width:1,
185                         type:'dashed',          //---类型
186                     },
187                 },
188                 splitArea:{                 //--网格区域
189                     show:false,                 //---是否显示,默认false
190                 }                       
191             },
192  
193             //------------ 内容数据  -----------------
194             series: [
195                 {
196                     name: '销量',             //---系列名称
197                     type: 'bar',                //---类型
198                     legendHoverLink:true,       //---是否启用图例 hover 时的联动高亮
199                     label:{                     //---图形上的文本标签
200                         show:false,
201                         position:'insideTop',   //---相对位置
202                         rotate:0,               //---旋转角度
203                         color:'#eee',
204                     },
205                     itemStyle:{                 //---图形形状
206                         color:'blue',
207                         barBorderRadius:[18,18,0,0],
208                     },
209                     barWidth:'20',              //---柱形宽度
210                     barCategoryGap:'20%',       //---柱形间距
211                     data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
212                 }
213             ]
214 };

转自:https://www.cnblogs.com/zhangxiaoxia/p/9832201.html

文章标题:没有颜色的糖
文章链接:https://www.dianjilingqu.com/51309.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>