ECharts tooltip 插入 HTML 绘制的自定义图标 marker 及关闭指示线 axisPointer.type 为 none

under Website  Notes of Programming  tag Echarts    Published on November 24th , 2022 at 03:44 pm

        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(38,36,33,0.8)',
          axisPointer: {
            type: 'none', //关闭指示线
          },
          borderRadius: '0',
          extraCssText:
            "padding: 15px; line-height: 22px; color: rgba(255,242,202,0.8); font-family: 'PingFang SC Regular'",
          borderWidth: 0,
          formatter: () => {
            return (
              //插入 HTML 绘制 渐变小方块图标
              `<span 
                style="display: inline-block; margin-right: 5px; border-radius: 0; width: 10px; height: 10px;
                background: linear-gradient(270deg, #ECC543 0%, #D8D4CC 100%);">
              </span>` +
              ' ' +
              obj.tooltipsText +
              ' ' +
              obj.nowValue +
              ' ' +
              obj.unit
            )
          },
        },

本页由 matcha 整理和发布,采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
  文章最后更新时间为:November 24th , 2022 at 07:44 am
分享到:Twitter  Weibo  Facebook