我已经设置了一个自定义多个YAXIS条形图，我试图保持所有的y轴总是可见的，无论他们的相关系列已被隐藏通过点击他们的图例。
一个或多个系列可以连接到同一个YAXIS上。
YAXIS初始状态
图像1描述:
正如你在我的图表的第二个截图中看到的，如果在切换系列时隐藏了YAXIS，那些应该保留的YAXIS将无法正确显示，因为它们部分离开了画布。
切换系列时离开画布YAXIS
图2描述:权利的名称"c.r.r.";YAXIS已移出画布
我知道有可能保持它们的修复，因为有一个ECHART的演示示例演示了它(您可能需要首先将legend: { show: true },添加到options对象中):
- https://echarts.apache.org/examples/en/editor.html?c=multiple-y-axis
我还检查了其他演示示例，以便找到任何提示，但行为方式不同。以下示例在切换相关系列时隐藏YAXIS(这是我的ECHART的当前行为，我试图避免):
- https://echarts.apache.org/examples/en/editor.html?c=bar-negative2
- https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align
第一个是我发现的唯一有效的例子，可以帮助我。
我已经彻底阅读了整个文档。甚至我已经仔细阅读了这三个图表中的所有选项，通过点击左上角的标签Full Code和Option preview来找到哪个是不同的。但我仍然不明白是哪个属性实现了保持所有YAXIS始终可见。也可能是两个或多个选项一起工作的组合。
这是我要实现的整个选项对象(数据数组被截断):
{
"title": {
"show": true,
"text": "Demo title",
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 20,
"lineHeight": 30
},
"subtext": "Demo subtitle",
"subtextStyle": {
"color": "#333",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 14,
"align": "left",
"verticalAlign": "top",
"lineHeight": 21
},
"textAlign": "left",
"textVerticalAlign": "top",
"padding": [
0,
0,
20,
0
],
"itemGap": 0,
"left": "auto",
"top": "auto",
"right": "auto",
"bottom": "auto",
"backgroundColor": "transparent"
},
"legend": {
"type": "scroll",
"show": true,
"zlevel": 0,
"z": 2,
"left": "center",
"top": "auto",
"right": "auto",
"bottom": 0,
"width": "auto",
"height": "auto",
"orient": "horizontal",
"align": "auto",
"padding": [
10,
10
],
"itemGap": 25,
"itemWidth": 25,
"itemHeight": 14,
"symbolKeepAspect": true,
"selectedMode": true,
"inactiveColor": "#ccc",
"textStyle": {
"color": "#000",
"fontSize": 14,
"lineHeight": 21,
"align": "left",
"verticalAlign": "middle",
"padding": 0
},
"tooltip": {
"show": true
},
"icon": "circle",
"borderWidth": 0,
"borderRadius": 5,
"scrollDataIndex": 0,
"pageButtonItemGap": 27,
"pageButtonGap": 25,
"pageButtonPosition": "end",
"pageFormatter": "{current} / {total}",
"pageIconColor": "#0d47a1",
"pageIconInactiveColor": "#aaa",
"pageIconSize": 20,
"pageTextStyle": {
"fontSize": 14,
"lineHeight": 21
},
"animation": false,
"animationDurationUpdate": 800,
"selector": [
{
"type": "all",
"title": "All"
},
{
"type": "inverse",
"title": "Inverse"
}
],
"selectorLabel": {
"show": true,
"distance": 5,
"rotate": 0,
"offset": [
0,
0
],
"color": "#ffffff",
"fontSize": 16,
"lineHeight": 24,
"align": "center",
"verticalAlign": "middle",
"backgroundColor": "#0d47a1",
"borderColor": "transparent",
"borderWidth": 3,
"borderRadius": 3,
"padding": [
7,
10,
4,
10
]
},
"selectorPosition": "auto",
"selectorItemGap": 10,
"selectorButtonGap": 20
},
"grid": {
"show": false,
"left": 67,
"top": 140,
"right": 201,
"bottom": 100,
"width": "auto",
"height": 490,
"containLabel": true
},
"xAxis": {
"show": true,
"position": "bottom",
"offset": 5,
"type": "category",
"nameLocation": "end",
"nameGap": 25,
"nameRotate": 0,
"inverse": false,
"boundaryGap": true,
"axisLabel": {
"show": true,
"interval": "auto",
"inside": false,
"rotate": 45,
"margin": 12,
"showMinLabel": true,
"showMaxLabel": true,
"fontSize": 11,
"lineHeight": 11,
"align": "right"
},
"splitLine": {
"show": false
},
"data": [
"01/01/2020",
"02/01/2020",
"03/01/2020",
"04/01/2020",
"05/01/2020",
...
]
},
"yAxis": [
{
"show": true,
"type": "value",
"name": "CAPTURE RATE",
"nameLocation": "middle",
"nameRotate": 90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "left",
"offset": 0,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "CAPTURE_RATE",
"metricsGroup": "TRAFFIC",
"formattingType": "PERCENTAGE",
"yaxisKey": "TRAFFIC__PERCENTAGE"
},
{
"show": true,
"type": "value",
"name": "SALES",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 0,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "SALES",
"metricsGroup": "SALES",
"formattingType": "FLOAT_NUMBER",
"yaxisKey": "SALES__FLOAT_NUMBER"
},
{
"show": true,
"type": "value",
"name": "TICKETS",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 92,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "TICKETS",
"metricsGroup": "SALES",
"formattingType": "NON_FLOAT_NUMBER",
"yaxisKey": "SALES__NON_FLOAT_NUMBER"
},
{
"show": true,
"type": "value",
"name": "C.R.",
"nameLocation": "middle",
"nameRotate": -90,
"nameGap": 72,
"nameTextStyle": {
"fontWeight": "normal",
"fontSize": 11,
"align": "center",
"verticalAlign": "middle"
},
"min": 0,
"position": "right",
"offset": 184,
"inverse": false,
"axisLabel": {},
"axisLine": {
"show": true,
"onZero": true
},
"metric": "CONVERSION_RATE",
"metricsGroup": "SALES",
"formattingType": "PERCENTAGE",
"yaxisKey": "SALES__PERCENTAGE"
}
],
"dataZoom": [],
"tooltip": {
"show": true,
"trigger": "item",
"axisPointer": {
"type": "shadow"
}
},
"axisPointer": {},
"toolbox": {
"show": true,
"orient": "horizontal",
"itemSize": 17,
"itemGap": 15,
"showTitle": true,
"feature": {
"saveAsImage": {
"type": "png",
"name": "tbretail_chart",
"backgroundColor": "#fff",
"connectedBackgroundColor": "#fff",
"excludeComponents": [
"toolbox"
],
"show": true,
"title": "Save as image"
},
"restore": {
"show": true,
"title": "Restore"
},
"dataView": {
"show": false,
"title": "Data view",
"readOnly": true,
"lang": [
"Data view",
"Close",
"Refresh"
],
"backgroundColor": "#fff",
"textareaColor": "#fff",
"textareaBorderColor": "#333",
"textColor": "#000",
"buttonColor": "#0d47a1",
"buttonTextColor": "#fff"
},
"dataZoom": {
"show": true,
"title": {
"zoom": "Area zooming",
"back": "Restore area zooming"
},
"filterMode": "filter"
},
"magicType": {
"title": "Switch type"
},
"brush": {
"type": "rect",
"title": "Selection"
}
},
"iconStyle": {
"borderColor": "#0d47a1",
"borderWidth": 2
}
},
"brush": {},
"dataset": {},
"aria": {},
"series": [
{
"metric": "CAPTURE_RATE",
"yaxisTarget": {
"metricsGroup": "TRAFFIC",
"formattingType": "PERCENTAGE",
"yaxisKey": "TRAFFIC__PERCENTAGE"
},
"yAxisIndex": 0,
"type": "bar",
"name": "Capture rate (212.2%)",
"data": [
{
"value": 0,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": "212.2%"
},
{
"metric": "SALES",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "FLOAT_NUMBER",
"yaxisKey": "SALES__FLOAT_NUMBER"
},
"yAxisIndex": 1,
"type": "bar",
"name": "Sales (12447857.85 €)",
"data": [
{
"value": 12608.28,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": 12447857.85
},
{
"metric": "TICKETS",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "NON_FLOAT_NUMBER",
"yaxisKey": "SALES__NON_FLOAT_NUMBER"
},
"yAxisIndex": 2,
"type": "bar",
"name": "Tickets (82474)",
"data": [
{
"value": 106,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": 82474
},
{
"metric": "CONVERSION_RATE",
"yaxisTarget": {
"metricsGroup": "SALES",
"formattingType": "PERCENTAGE",
"yaxisKey": "SALES__PERCENTAGE"
},
"yAxisIndex": 3,
"type": "bar",
"name": "C.R. (2.3%)",
"data": [
{
"value": 7.61,
"tooltip": {}
},
...
],
"label": {
"show": false,
"position": "top",
"rotate": 90,
"color": "#4f4f4f",
"fontSize": 12,
"lineHeight": 12,
"align": "left",
"verticalAlign": "middle"
},
"smooth": true,
"totalValue": "2.3%"
}
],
"color": [
"#67B0FE",
"#8091B4",
"#56C8EC",
"#7BC9BA",
"#B1EC5C",
"#E5C872",
"#D28787",
"#91C283",
"#B39E75",
"#D8A1A1",
"#E4CE58",
"#9BAE84",
"#AA8D8D",
"#8CD49B",
"#F16363",
"#99B0D5",
"#B9BC79",
"#CF90DD",
"#FFE760",
"#7DD197",
"#AF5D6D",
"#D49D76",
"#E7B09A",
"#CF4E4E"
],
"backgroundColor": "#fff",
"textStyle": {
"color": "#000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "sans-serif",
"fontSize": 15,
"lineHeight": 23
},
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"blendMode": "source-over",
"hoverLayerThreshold": 3000,
"useUTC": false
}
提前感谢您的帮助。
编辑:
要实现固定的y轴，您必须设置其min和max属性。
因此，您可以将它们全部设置为固定的，也可以只设置其中的一些。这完全取决于你。
Echarts是数据可视化框架。数据是渲染视觉层的主要块。当你改变数据时，可视层也会随之改变。通过设置透明颜色隐藏系列，并且不触摸数据。
我已经找到解决办法了。
要实现固定的y轴，必须同时设置其min和max属性。
因此，您可以将它们全部设置为固定的，也可以只设置其中的一些。这完全取决于你。