正常情况下添加柱状图后,需要hover的时候显示每个柱子的值,可以通过在tooltip下面的formatter方法实现,formatter的参数params为某个柱状图的数组,如果同时存在柱状图和折线图,那么此时params是一个数组,第0个和第1个分别代表X轴对应某点的值数组。如果要取值就可以直接使用params[0].value。
如果不加tooltip,那么就无法在hover每个柱子的时候看到每个柱子的值,只能通过坐标轴大致判断是多少,加了tooltip后能在hover某根柱子的情况下看到具体的值,可以通过trigger:\n"axis" 以及 axisPointer 来配置hover时tooltip的效果。
比如以下是一个完整的tooltip配置:
// 提示框\n\n tooltip: {\n\n show: true,\n\n trigger: "axis",\n\n backgroundColor: "rgba(0,0,0,0.75)",\n\n borderColor: "rgba(0,0,0,0.75)",\n\n textStyle: {\n\n color: "#ffffff",\n\n },\n\n axisPointer: {\n\n type: "shadow",\n\n shadowStyle: {\n\n color: "rgba(0,0,0,0.08)",\n\n },\n\n },\n\n padding: 10,\n\n formatter: (params) => {\n\n return `<div style="text-align: left">\n\n <div>名称:${params[0].value?params[0].value:'--'}</div>\n\n <div>年龄:${params[1].value?params[1].value + '%': '--'}</div>\n\n </div>`;\n\n },\n\n },