echarts - 如何在 ECharts 中实现图例增加表格？

Question

echarts图例如何增加表格

表格和图例是一一对应的

Answer 1

在 ECharts 中，你可以通过在 series 对象的 itemStyle 中设置 tooltip 属性来显示一个表格。tooltip 属性是一个对象，其中可以设置 formatter 函数来定义表格的显示内容。

下面是一个示例：

option = {    tooltip: {        trigger: 'item',        formatter: function(params) {            var res = '<div class="chart-tooltip-table">';            params.forEach(function(param) {                var color = param.color;                var name = param.name;                var value = param.value;                res += '<div class="chart-tooltip-table-item"><span style="border-bottom: 1px solid ' + color + '; display: block">' + name + '</span><span style="display: block">' + value + '</span></div>';            });            res += '</div>';            return res;        }    },    legend: {        data: ['数据1', '数据2']    },    series: [        {            name: '数据1',            type: 'bar',            data: [10, 20, 30, 40],            itemStyle: {                normal: {                    color: 'blue'                }            }        },        {            name: '数据2',            type: 'bar',            data: [50, 60, 70, 80],            itemStyle: {                normal: {                    color: 'red'                }            }        }    ]};

在这个示例中，当鼠标悬停在图表上时，会显示一个包含两个列的表格，一个列是名称，另一个列是值。每个表格项的颜色与其对应的系列的颜色相同。