Echarts 柱状图属性整理
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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？