如何将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通常允许您在合理范围内执行几乎所有操作。

通常，您至少有两种获取所需内容的方法：

1. 我们可以禁用默认组件，并使用graphic（example）从头开始绘制新组件，或者通过examples创建自己的扩展名。 las，如果您只想花单个图表，这是一种困难的方法。

2. 将最合适组件的视觉部分样式化为所需结果的另一种方法。实际上，它只是通过即兴的手段模仿而没有执行。但是，它具有快速，简便的特点，尽管有一些局限性，但它可以覆盖很多情况。 I sketched a draft看起来很像您的照片（没有设计），请尝试使用和自定义它。

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