正文

学会echarts图例分两列展示，轻松提升图表阅读体验

/0 浏览量
0604

在数据可视化领域，echarts 是一款功能强大、使用便捷的图表库。它可以帮助我们轻松地将数据转化为直观的图表，从而更好地理解和分析数据。而在 echarts 中，图例是图表的重要组成部分，它可以帮助用户快速识别图表中的各个系列。今天，我们就来探讨如何使用 echarts 将图例分两列展示，从而提升图表的阅读体验。

一、为什么需要将图例分两列展示

  1. 美观性：将图例分两列展示可以使图表更加美观，避免图例过于拥挤，影响视觉效果。
  2. 易读性：当图表中包含大量系列时，将图例分两列展示可以降低用户阅读的难度，提高图表的可读性。
  3. 实用性：对于一些复杂的数据分析场景，将图例分两列展示可以更好地展示数据之间的关系，方便用户进行对比分析。

二、echarts 图例分两列展示的实现方法

1. 使用 legendType 属性

echarts 提供了 legendType 属性，可以设置图例的显示方式。我们可以通过设置 legendType 为 'plain' 或 'scroll' 来实现图例分两列展示。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    legend: {
        type: 'plain',
        orient: 'vertical',
        left: 'left',
        data: ['系列1', '系列2', '系列3', '系列4', '系列5', '系列6', '系列7', '系列8', '系列9', '系列10']
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130, 90, 40, 200]
    }, {
        name: '系列2',
        type: 'line',
        data: [60, 90, 120, 70, 110, 130, 80, 90, 50, 180]
    }]
};

myChart.setOption(option);

2. 使用 legend 属性的 type 属性

除了使用 legendType 属性外，我们还可以通过设置 legend 属性的 type 属性为 'plain' 或 'scroll' 来实现图例分两列展示。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    legend: {
        orient: 'vertical',
        left: 'left',
        type: 'plain',
        data: ['系列1', '系列2', '系列3', '系列4', '系列5', '系列6', '系列7', '系列8', '系列9', '系列10']
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130, 90, 40, 200]
    }, {
        name: '系列2',
        type: 'line',
        data: [60, 90, 120, 70, 110, 130, 80, 90, 50, 180]
    }]
};

myChart.setOption(option);

3. 使用 legend 属性的 type 属性和 orient 属性

我们还可以通过设置 legend 属性的 type 属性和 orient 属性来实现图例分两列展示。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    legend: {
        type: 'plain',
        orient: 'vertical',
        left: 'left',
        data: ['系列1', '系列2', '系列3', '系列4', '系列5', '系列6', '系列7', '系列8', '系列9', '系列10']
    },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130, 90, 40, 200]
    }, {
        name: '系列2',
        type: 'line',
        data: [60, 90, 120, 70, 110, 130, 80, 90, 50, 180]
    }]
};

myChart.setOption(option);

三、总结

通过以上方法，我们可以轻松地将 echarts 图例分两列展示，从而提升图表的阅读体验。在实际应用中，我们可以根据具体需求选择合适的方法来实现图例分两列展示。希望这篇文章能对您有所帮助！

-- 展开阅读全文 --