echart图例图标如何放置在水平中心

Question

我需要这样的echart图例：

我试过使用这个代码：

legend: {
    icon: "circle",
    left: 10,
    data: ['Very High', 'Hight', 'Moderate', 'Low'],
    orient: 'vertical',
    formatter: '{name} {icon} {value}',
    textStyle: {
        color: "rgba(255, 255, 255, 0.7)",
    }
}

但是显示是这样的：

谁能告诉我如何将左侧图标放在文本的中心？

代码可以测试here

Answer 1

按照常规的方法，大概是不可能的。

图例格式化程序仅支持 {name}。如果我没理解错的话，它的作用只是为了显示度量单位。遗憾的是 Legend 不是最方便的自定义组件，但 Echarts 通常允许您在合理范围内做几乎任何事情。

通常你至少有两种方法可以得到你想要的东西：

我们可以禁用默认组件并使用 graphic (example) or create own extension by examples 从头开始绘制新组件。唉，如果你只想把时间花在单个图表上，这是困难的方法。
另一种将最合适组件的视觉部分风格化以达到所需结果的方法。事实上，它只是临时模仿而没有实施。然而，它快速、简单，并且尽管有一些限制，但它可以涵盖大量案例。 I sketched a draft看起来像你的图片（没有设计），尝试使用和定制它。

我们也可以超越Echarts作为主要工具，使用HTML + CSS。在这种情况下，Echarts 仅充当 source of data and events。这个选项可能是最方便的，因为用 HTML 构建 UI 有点简单，我们可以使用现成的模板。

echart图例图标如何放置在水平中心

How to place echart legend icon center of the level

javascript

echarts