【echarts】柱狀圖設定固定寬度(最大寬度)
//柱狀圖
var barGragh = document.getElementById('barGragh');
var barChart = echarts.init(barGragh);
var barChartoption = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['上週同比', '今日整點'],
/* y : 'bottom' */
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
color : ['#ff7f50','#87cefa', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
calculable: false,
grid: {
left: '0%',
right: '0%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value',
name: 'GMV'
}
],
series: [
{
name: '上週同比',
type: 'bar',
barMaxWidth: '100',
data: [],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '今日整點',
type: 'bar',
barMaxWidth: '100',
data: [],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
barChart.setOption(barChartoption);
關鍵程式碼:
barMaxWidth: '100',
實現效果
相關文章
- echarts 設定柱狀圖寬度Echarts
- 子元素固定寬度 父元素寬度被撐開
- 表格寬度設定
- echarts圖示如何自適應寬度Echarts
- 如何設定圖片高度固定,寬度可以根據比例縮放
- 設定bootstrap modal模態框的寬度和寬度boot
- 在pos:a元素不設定寬度的情況下,他的最大寬度是受父元素的寬度所限制的。
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- 將span元素設定為固定寬度和高度程式碼
- flex一欄寬度固定一欄寬度自適應佈局Flex
- 用jquery控制圖片的最大寬度jQuery
- 一列寬度固定一列寬度自適應佈局
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- 兩列居中寬度固定佈局
- Echarts根據資料長度變換柱狀圖柱狀的顏色Echarts
- css實現的左右兩列寬度固定中間寬度自適應CSS
- widget的寬度比例設定
- DIV+CSS相容解決DIV最大寬度和最小寬度問題CSS
- 一列固定寬度居中佈局
- powerquery重新整理後固定列寬度
- 如何使用jQuery設定div的長度和寬度jQuery
- CSS 設定 span 元素 寬度與高度CSS
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- 純css實現高度與寬度固定比例CSS
- 如何設定span元素的寬度和高度
- 如何用css設定span元素的寬度CSS
- app直播原始碼,css寬度不固定,水平居中APP原始碼CSS
- 固定寬度下,CSS 實現自適應文字CSS
- css左欄固定右欄寬度自適應CSS
- 設定flex後子元素設定寬度失效問題Flex
- css設定圖片固定寬高,按比例縮放CSS
- HTML表格寬度HTML
- CSS設定超出指定寬度自動換行CSS
- 【css】table標籤內的td、th如何設定固定寬度,而不是自適應?CSS
- 父盒子寬度不固定水平居中彈性佈局
- web前端學習筆記(CSS固定寬度佈局)Web前端筆記CSS
- AutoLayout 實現固定寬度動態高度的 ScrollViewView
- win10圖示太寬怎麼調整 win10桌面圖示寬度調整設定方法Win10