无论是否切换系列,我如何始终保持所有 YAXIS 可见

How can I always keep all YAXIS visible no matter if series are toggled

我已经设置了一个自定义多 YAXIS 条形图,我试图让所有的 Yaxis 始终可见,无论它们的相关系列是否已通过单击隐藏关于图例。

一个或多个系列可以附加到同一个 YAXIS。

Initial YAXIS state

图1描述:初始状态,所有YAXIS都完美渲染。

正如您在我图表的第二个屏幕截图中看到的那样,如果在切换系列时隐藏了 YAXIS,则应该保留的那些 Yaxis 无法正确显示,因为它们部分关闭 canvas。

Off-canvas YAXIS when toggling series

图2说明:右边的名称“C.R”。 YAXIS 已下架 canvas.

我知道可以修复它们,因为有一个 ECHART 演示示例可以演示它(您可能需要先将 legend: { show: true }, 添加到选项对象中):

我也检查了其他演示示例以找到任何提示,但行为方式不同。以下示例在切换相关系列时隐藏 YAXIS(这是我的 ECHART 的当前行为,我正在努力避免):

第一个是我发现的唯一可以帮助我的有效示例。

我已经仔细阅读了整个文档。我什至通过单击左上角的选项卡 Full CodeOption 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
}

非常感谢您的帮助。

编辑:

已解决

要获得固定的 yaxis,您必须同时设置其 minmax 属性。

因此,您可以将它们全部设置为固定,也可以只设置其中的一部分。这完全取决于你。

Echarts 是数据可视化框架。数据是渲染可视化层的主要块。当您更改数据时——可视层将更改。通过设置透明度颜色隐藏系列并且不触摸数据。

我已经找到解决方法了

要获得固定的 yaxis,您必须同时设置其 minmax 属性。

因此,您可以将它们全部设置为固定,也可以只设置其中的一部分。这完全取决于你。