Description
使用echarts绘制stacked bar出现bar内容超出坐标轴的情况，如下图所示
Version & Environment [版本及环境]
- ECharts version [ECharts 版本]: 4.1.0
- Browser version [浏览器类型和版本]: Chrome 69.0.3497.100 (Official Build) (64-bit)
- OS Version [操作系统类型和版本]: macOS Majove 10.14
Expected behaviour [期望结果]
bar图内容不应该超出坐标轴的最大值范围，因为坐标轴并未显式设置最大和最小值，是echarts 自动适配的
ECharts option [ECharts配置项]
{
"title": {
"show": true,
"text": " ",
"textStyle": {
"fontSize": 16
},
"subtext": "",
"subtextStyle": {
"fontSize": 12
},
"top": 36
},
"grid": {
"top": 105,
"bottom": 80,
"left": 40,
"right": 170,
"containLabel": true
},
"aria": {
"show": false,
"description": null
},
"tooltip": {
"show": true,
"confine": true,
"trigger": "axis",
"padding": 0,
"axisPointer": {
"axis": "auto"
}
},
"dataZoom": [
{
"id": "dataZoomXSlider",
"type": "slider",
"xAxisIndex": [
0
],
"filterMode": "filter",
"start": 0,
"end": 100,
"bottom": 10,
"showDataShadow": true,
"originalEnd": 100
},
{
"id": "dataZoomXInside",
"type": "inside",
"xAxisIndex": [
0
],
"filterMode": "filter"
}
],
"xAxis": {
"show": true,
"nameLocation": "middle",
"name": "LEVEL",
"nameGap": 50,
"type": "category",
"nameTextStyle": {
"fontSize": 13
},
"scale": true,
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed"
}
},
"splitArea": {
"show": false
},
"data": [
"",
"Good",
"Slightly polluted",
"Excellent",
"Medially polluted",
"Severely polluted"
],
"axisLabel": {
"margin": 16,
"rotate": 15
}
},
"yAxis": {
"show": true,
"name": "MEAN PM2.5",
"nameLocation": "end",
"nameGap": 10,
"nameTextStyle": {
"fontSize": 13
},
"type": "value",
"scale": false,
"splitLine": {
"show": true,
"lineStyle": {
"type": "dashed"
}
},
"splitArea": {
"show": false
},
"axisLine": {
"symbol": [
"none",
"arrow"
],
"symbolSize": [
6,
9
]
},
"axisLabel": {
"margin": 16
},
"nameTruncate": {
"maxWidth": 8,
"ellipsis": "...",
"placeholder": "MEAN PM2..."
},
"tooltip": {
"show": true
}
},
"series": [
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Clear",
"data": [
[
"",
48
],
[
"Good",
41.38805970149254
],
[
"Slightly polluted",
58.78378378378378
],
[
"Excellent",
21.5
],
[
"Medially polluted",
64.66666666666667
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Cloudy",
"data": [
[
"Good",
41.49246231155779
],
[
"Slightly polluted",
62.5
],
[
"Excellent",
22.38888888888889
],
[
"Medially polluted",
63.25
],
[
"Severely polluted",
85.66666666666667
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Overcast",
"data": [
[
"Good",
39.73170731707317
],
[
"Excellent",
22.93548387096774
],
[
"Slightly polluted",
64.75
],
[
"Medially polluted",
121.5
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Light rain",
"data": [
[
"Slightly polluted",
60.09090909090909
],
[
"Good",
39.15277777777778
],
[
"Excellent",
19.822222222222223
],
[
"Severely polluted",
82
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Moderate to heavy rain",
"data": [
[
"Excellent",
20.2
],
[
"Good",
33.875
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Fog",
"data": [
[
"Medially polluted",
123.5
],
[
"Slightly polluted",
105.5
],
[
"Good",
71
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Moderate rain",
"data": [
[
"Excellent",
19.125
],
[
"Good",
30.071428571428573
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Shower",
"data": [
[
"Excellent",
21.571428571428573
],
[
"Good",
37.523809523809526
],
[
"Slightly polluted",
69.33333333333333
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Thundershower",
"data": [
[
"Good",
31.17241379310345
],
[
"Excellent",
20.6
],
[
"Slightly polluted",
43.75
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Heavy rain",
"data": [
[
"Excellent",
23.142857142857142
],
[
"Good",
30.285714285714285
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Rainstorm",
"data": [
[
"Excellent",
19.142857142857142
],
[
"Good",
31.083333333333332
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Slight to moderate rain",
"data": [
[
"Good",
33.23529411764706
],
[
"Excellent",
18.857142857142858
],
[
"Slightly polluted",
53
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
},
{
"type": "bar",
"barMaxWidth": 60,
"stack": "WEATHER1",
"name": "Heavy rain to rainstorm",
"data": [
[
"Excellent",
18
]
],
"encode": {
"x": [
0
],
"y": [
1
]
}
}
],
"legend": {
"show": true,
"type": "scroll",
"data": [
"Clear",
"Cloudy",
"Overcast",
"Light rain",
"Moderate to heavy rain",
"Fog",
"Moderate rain",
"Shower",
"Thundershower",
"Heavy rain",
"Rainstorm",
"Slight to moderate rain",
"Heavy rain to rainstorm"
],
"orient": "vertical",
"right": 40,
"top": 105,
"tooltip": {
"show": true
}
},
"toolbox": {
"top": "35%",
"showTitle": true,
"orient": "vertical",
"right": "5",
"emphasis": {
"iconStyle": {
"textPosition": "left",
"textAlign": "right"
}
},
"feature": {
"dataZoom": {
"title": {
"zoom": "Zoom ",
"back": "Zoom back "
},
"yAxisIndex": "none",
"show": true
},
"restore": {
"title": "Restore ",
"show": true
},
"saveAsImage": {
"title": "Save as image ",
"name": "dataview-vis",
"show": true
}
}
}
}