echarts折线堆叠图的图例分页操作指南

2023-09-06 07:23:34

echarts折线堆叠图是一种常用的图表类型，用于展示多组数据在一段时间内的变化趋势。然而，当数据系列数量较多时，图例可能会变得非常长，导致图表难以阅读。为了解决这个问题，我们可以使用echarts的图例分页功能来将图例分成多个页面，从而使图表更加简洁易读。

实现步骤

导入echarts库

首先，需要在HTML页面中导入echarts库。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>

创建echarts实例

接下来，需要创建一个echarts实例。

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

设置图例分页选项

为了启用图例分页功能，需要在echarts选项中设置legend.pageIconSize和legend.pageButtonItemGap属性。

option = {
  legend: {
    type: 'scroll',
    pageIconSize: 16,
    pageButtonItemGap: 5,
  },
  // 其他选项...
};

加载数据并渲染图表

最后，需要加载数据并使用echarts实例渲染图表。

$.get('data.json', function (data) {
  myChart.setOption({
    series: data.series,
  });
});

示例代码

以下是一个完整的示例代码，演示了如何使用echarts创建具有分页图例的折线堆叠图。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="myChart"></div>

  <script>
    var myChart = echarts.init(document.getElementById('myChart'));

    var option = {
      legend: {
        type: 'scroll',
        pageIconSize: 16,
        pageButtonItemGap: 5,
      },
      series: [
        {
          name: '系列1',
          type: 'line',
          stack: '总量',
          data: [12, 21, 34, 45, 63, 71, 78, 91, 105, 123, 131]
        },
        {
          name: '系列2',
          type: 'line',
          stack: '总量',
          data: [23, 44, 65, 76, 97, 106, 125, 146, 167, 188, 199]
        },
        {
          name: '系列3',
          type: 'line',
          stack: '总量',
          data: [34, 67, 89, 101, 122, 133, 154, 175, 196, 217, 228]
        }
      ]
    };

    myChart.setOption(option);
  </script>
</body>
</html>