百度ECharts2基于图例高度的动态图表位置

Posted

技术标签:

【中文标题】百度ECharts2基于图例高度的动态图表位置【英文标题】:Baidu ECharts2 dynamic chart position based on the legend height 【发布时间】:2017-08-02 05:53:33 【问题描述】:

我正在使用百度 ECharts2 将动态数量的系列(最多 100 个)可视化为折线图。 我面临的问题是如果系列太多,图例会与图表重叠。

我花了 2 个小时搜索文档和阅读,但找不到任何设置图表位置(y/y2 顶部/高度)的方法。

图表似乎由不同的元素(图例、工具箱等)组成,但它们似乎都不是图表本身。

我发现的一个示例展示了一种完全响应式定位饼图的方法,但这不适用于我的情况: https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/pie-media

如果有人对 ECharts 有更多经验并能告诉我如何将图表向下移动 y 并设置高度,我将不胜感激。

谢谢!

【问题讨论】:

【参考方案1】:

您最好的选择可能是将图例类型设置为滚动,使其适合一行。

legends.push(
    type: 'scroll',
    show: true,
    data: myData,
    ...
);

您也可以结合 Ovilia 和 Zain 的解决方案来向下移动网格,为图例留出空间。不幸的是,这需要在设置图表的容器大小之前确定图例的大小。

【讨论】:

【参考方案2】:

你可以设置grid的位置来实现。

在ECharts 2 中,您可以设置grid.ygrid.y2grid.height

在ECharts 3 中,您可以设置grid.topgrid.bottomgrid.height

【讨论】:

以上是关于百度ECharts2基于图例高度的动态图表位置的主要内容,如果未能解决你的问题,请参考以下文章

动态 FLOT 图例表

highchart图表动态高度

如何在循环中获取线性图上的动态图例?

Power BI 动态图例

Echarts基于百度地图实现地图飞线

echarts会地图怎么标记三角形