关于前端: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 为一个数组，失去是多个柱状信息