关于前端:echart柱状图为不同柱体设置hover效果

预期成果

如图所示，鼠标hover在不同的柱体时展现不同的信息

实现

 option = { legend: {}, tooltip: { //将trigger设置为item trigger: 'item',  //将在formatter中设置hover成果 formatter: function (params) { console.log(params); return params.name; }, }, dataset: { source: [ ['product', '2015', '2016', '2017'\], ['Matcha Latte', 43.3, 85.8, 93.7\], ['Milk Tea', 83.1, 73.4, 55.1\], ['Cheese Cocoa', 86.4, 65.2, 82.5\], ['Walnut Brownie', 72.4, 53.9, 39.1\], ], }, xAxis: { type: 'category' }, yAxis: {}, series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }], };

当tooltip.trigger值为item，hover时，formatter的params将是单个柱体的信息
当tooltip.trigger值为axis，hover时，formatter的params为一个数组，失去是多个柱状信息