一、echarts柱状图边框设置
柱状图的边框设置通常有两种方法,一种是通过在样式中设置,另一种是通过在xAxis的axisLine、axisLabel和axisTick中设置。
第一种方法:
option = { ... series: [ { type: 'bar', itemStyle: { borderColor: '#000', borderWidth: 2 }, data: ... } ] }
第二种方法:
option = { ... xAxis: { axisLine: { lineStyle: { color: '#000', width: 2 } }, axisLabel: { show: false }, axisTick: { show: false } }, yAxis: { ... }, series: [ { type: 'bar', data: ... } ] }
二、echarts柱状图大小设置
柱状图的大小设置需要通过指定系列中柱状图的宽度(barWidth)和高度(barMaxWidth和barMinHeight)来实现。
option = { ... series: [ { type: 'bar', barWidth: 20, barMaxWidth: 50, barMinHeight: 10, data: ... } ] }
三、echarts柱状图位置设置
通过指定系列中的x和y来设置柱状图的位置。
option = { ... series: [ { type: 'bar', x: '50%', y: '50%', data: ... } ] }
四、echarts柱状图高度设置
通过在系列中的series.barHeight中设置柱状图的高度来实现。
option = { ... series: [ { type: 'bar', barHeight: 20, data: ... } ] }
五、echarts柱状图宽度设置
通过在系列中的series.barWidth中设置柱状图的宽度来实现。
option = { ... series: [ { type: 'bar', barWidth: '50%', data: ... } ] }
六、echarts柱状图刻度设置
通过在xAxis或yAxis中设置interval值来控制刻度线的密度。
option = { ... xAxis: { interval: 0, data: ... }, yAxis: { interval: 1, data: ... }, series: [ { type: 'bar', data: ... } ] }
七、echarts柱状图设置背景
设置echarts柱状图的背景有两种方法,一种是通过在grid中设置背景颜色,另一种是在visualMap中设置颜色。
第一种方法:
option = { ... grid: { backgroundColor: '#fff' }, series: [ { type: 'bar', data: ... } ] }
第二种方法:
option = { ... visualMap: { show: false, min: 0, max: 100, inRange: { color: ['#fff', '#000'] } }, series: [ { type: 'bar', data: ... } ] }
八、echarts设置柱状图间距
设置柱状图的间距可以通过在系列中的barGap和barCategoryGap中设置值来实现。
option = { ... series: [ { type: 'bar', barGap: '30%', barCategoryGap: '50%', data: ... } ] }