echarts-自定义tooltip悬浮文本,还原x轴,名称,颜色小点与值

通过formatter属性自定义样式,支持返回一个html字符串,那玩的花样可就多了
formatter返回参数中,比较常用的是:axisValuex轴的坐标值,valuex轴对应的值,seriesName折线的名称,marker颜色小点的html
下方代码可以直接运行在https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color

option = {
   tooltip: {
          trigger: "axis",
          formatter: params => {
            let str = `
${params[0].axisValue}
`
params.forEach(item => { str += `
${item.marker}${item.seriesName}${ item.value ? item.value : "-" }
`
}) // 数据差 let result = "未超过" if (params[0].value && params[1].value) { // 比较不同 const num = params[0].value - params[1].value if (num < 0) { result = Math.abs(num).toFixed(2) } } str += `
超过情况${result}
`
return str } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: 'a', type: 'line', data: [10, 11, 13, 11, 12, 12, 9] }, { name: 'b', type: 'line', data: [1, 13, 2, 15, 3, 2, 0] } ] };

你可能感兴趣的:(echarts,echarts,前端,javascript)