Echart 工具提示设置

Question

我在我的 vue js 应用程序中使用 echart(https://v-charts.js.org/#/en/ring)。我正在尝试在环形图中自定义工具提示。但我无法得到。当鼠标悬停在特定颜色上时，我想在工具提示中显示我自己的 json 数据。

HTML代码：

<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>

Javascript 代码：

chartSettings: {
        itemStyle: {

          normal: {
            color: function (params) {
              var colorList = [
                'red', 'lightgreen'
              ];
              return colorList[params.dataIndex]
            }
          }

        },
        label: {
          normal: {
            show: false
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          position: ['35%', '32%'],
          backgroundColor: 'implements',
          textStyle: {
            color: '#000000',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 55,
          },
        },
      },
OptionRingChart: {
        color: ['green', 'red'],

        columns: ['name', 'test'],
        rows: [
          { 'name': 'D', 'test': 1 },
          { 'name': 'C', 'test': 2 }



        ],

      },

Answer 1

你会想要使用tooltip.formatter

var option = {
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: function (a) {
            my_json_data = get_and_format_my_data()
            return `${my_json_data}`
        }
    }
}