echarts图表tooltip设置hover效果

正常情况下添加柱状图后，需要hover的时候显示每个柱子的值，可以通过在tooltip下面的formatter方法实现，formatter的参数params为某个柱状图的数组，如果同时存在柱状图和折线图，那么此时params是一个数组，第0个和第1个分别代表X轴对应某点的值数组。如果要取值就可以直接使用params[0].value。

如果不加tooltip，那么就无法在hover每个柱子的时候看到每个柱子的值，只能通过坐标轴大致判断是多少，加了tooltip后能在hover某根柱子的情况下看到具体的值，可以通过trigger: "axis" 以及 axisPointer 来配置hover时tooltip的效果。

比如以下是一个完整的tooltip配置：

// 提示框

        tooltip: {

          show: true,

          trigger: "axis",

          backgroundColor: "rgba(0,0,0,0.75)",

          borderColor: "rgba(0,0,0,0.75)",

          textStyle: {

            color: "#ffffff",

          },

          axisPointer: {

            type: "shadow",

            shadowStyle: {

              color: "rgba(0,0,0,0.08)",

            },

          },

          padding: 10,

          formatter: (params) => {

            return `<div style="text-align: left">

            <div>名称：${params[0].value?params[0].value:'--'}</div>

            <div>年龄：${params[1].value?params[1].value + '%': '--'}</div>

            </div>`;

          },

        },

本文章由javascript技术分享原创和收集