echart.js自定義提示框的內容

var arr = ['八字1','八字2','八字3','八字4','八字5','八字6','八字7','八字8','八字9'];
for (let index = 0; index < arr.length; index++) {
    var element = arr[index];
    console.log("element:",element)
}
option = {
    title: {
        text: '對數軸示例',
        left: 'center'
    },
    /*tooltip: {
        trigger: 'item'
    },
 
*/
     tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var color = params.color;//圖例顏色
            var htmlStr ='<div>';
            htmlStr += params.name + '<br/>';//x軸的名稱
            //為了保證和原來的效果一樣，這裡自己實現了一個點的效果
            htmlStr += '<span ></span>';
            
            
 
//新增一個漢字，這裡你可以格式你的數字或者自定義文字內容
            htmlStr += params.seriesName + '：'+params.value + '<p>' + element + '</p>';
            
            htmlStr += '</div>';
            
            return htmlStr;
        }
    },
    legend: {
        left: 'left',
        data: ['1的指數', '2的指數','3的指數', '4的指數']
    },
    xAxis: {
        type: 
 
'category',
        name: 'x',
        splitLine: {show: false},
        data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '1的指數',
            type: 'line',
            data: [3, 3, 9, 27, 20, 12, 4, 20, 30]
        },
        {
            name: '2的指數',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 24, 24, 29]
        },
        {
            name: '3的指數',
            type: 'line',
            data: [6, 3, 19, 21, 10, 13, 23, 10, 34]
        },
        {
            name: '4的指數',
            type: 'line',
            data: [4, 3, 15, 12, 18, 23, 23, 10, 34]
        }
        
    ]
};

效果圖：

參考：

https://www.cnblogs.com/null/p/11303758.html