echarts tooltip 使用符文版

要在 ECharts 中使用富文本版的 Tooltip（工具提示），你可以通过 `tooltip` 配置项中的 `formatter` 属性来实现。

以下是一个示例代码：

HTML部分：

<div id="chart" style="width: 600px; height: 400px;"></div>

JavaScript部分：

// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置项
var option = {
  // x轴数据
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  // y轴数据
  yAxis: {
    type: 'value'
  },
  // 系列数据
  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50]
  }],
  // 工具提示配置
  tooltip: {
    trigger: 'axis', // 触发类型为坐标轴
    formatter: function(params) {
      var tooltipHtml = '';
      params.forEach(function(item) {
        tooltipHtml += '<div>' +
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + item.color + '"></span>' +
          '<span>' + item.seriesName + ': ' + item.value + '</span>' +
          '</div>';
      });
      return tooltipHtml;
    }
  }
};

// 使用配置项显示图表
myChart.setOption(option);

在上述代码中，我们使用 `formatter` 属性来自定义工具提示的显示内容。在 `formatter` 函数中，我们遍历 `params` 参数数组，其中包含了每个数据项的详细信息。然后我们自定义了一个富文本的 HTML 字符串来构建工具提示的显示内容。

在这个例子中，我们将每个数据项的系列名称和数值显示为一个带有颜色块的行，并使用 CSS 样式来设置颜色块和文本的样式。

希望这个示例对你有帮助。如果你还有其他问题，请随时提问。