echarts的tooltip 使用formatter后，图例小圆点消失

m0_46701677

于 2021-03-31 16:38:04 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/m0_46701677/article/details/115354039

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在formatter中使用字符串拼接技巧，展示了实例中如何结合颜色标记和百分比展示处方点评量，以及多个处方占比数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要在formatter中自行拼接字符串。

<span style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: red"></span>

   tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter:
            "处方点评量: " +
            1111 +
            "<br /><span style='display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: #5470c6'></span>{a0}处方: {c0}（占比：%）<br /><span style='display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: #91cc75'></span>{a1}处方: {c1}（占比：%）",
        },