ECharts 动态排序柱状图：让数据动起来

前端

2023-03-06 04:39:03

ECharts 动态排序柱状图：让数据直观且动态地呈现

在数据可视化领域，ECharts 作为一款功能强大的 JavaScript 图表库，以其丰富的图表类型和交互功能而备受青睐。其中，动态排序柱状图就是 ECharts 的一大亮点，它可以实时展示数据的变化趋势，让数据变得更加生动和直观。

动态排序柱状图的优势

动态排序柱状图的受欢迎之处在于其以下优势：

实时反映数据变化： 能够实时响应数据的变化，帮助您及时掌握数据动态，做出更明智的决策。
数据比较一目了然： 通过动态排序，可以轻松对比不同数据之间的差异，发现数据之间的关联和规律。
交互性强，用户体验好： 支持多种交互功能，如缩放、拖拽、排序等，让用户能够更直观地探索数据。

使用 ECharts 创建动态排序柱状图

下面，我们将逐步介绍如何使用 ECharts 创建动态排序柱状图。

准备数据

首先，需要准备一份要可视化的数据。例如，一张包含销售数据的数据表，包含产品名称、销售额和日期等列。

创建 ECharts 实例

然后，需要在 HTML 页面中创建 ECharts 实例，这可以通过添加一个分配了 id 的 div 元素来实现。

<div id="chart"></div>

在 JavaScript 代码中，使用 ECharts 的 API 创建 ECharts 实例。

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

配置图表选项

图表选项决定了图表的外观和行为，包括标题、坐标轴、数据系列等。

var option = {
  title: {
    text: '销售数据动态排序柱状图'
  },
  xAxis: {
    type: 'category',
    data: ['产品1', '产品2', '产品3', '产品4', '产品5']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'bar'
  }]
};

渲染图表

最后，将图表选项应用到 ECharts 实例中，从而渲染出图表。

chart.setOption(option);

实现动态排序

要实现动态排序，可以使用 ECharts 的 on 方法监听图表上的点击事件。当用户点击图表上的柱子时，可以重新排序数据系列中的数据来改变柱子的顺序。

chart.on('click', function (params) {
  var data = option.series[0].data;
  data.sort(function (a, b) {
    return a - b;
  });
  chart.setOption({
    series: [{
      data: data
    }]
  });
});

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <script src="echarts.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      var chart = echarts.init(document.getElementById('chart'));
      var option = {
        title: {
          text: '销售数据动态排序柱状图'
        },
        xAxis: {
          type: 'category',
          data: ['产品1', '产品2', '产品3', '产品4', '产品5']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70],
          type: 'bar'
        }]
      };
      chart.setOption(option);
      chart.on('click', function (params) {
        var data = option.series[0].data;
        data.sort(function (a, b) {
          return a - b;
        });
        chart.setOption({
          series: [{
            data: data
          }]
        });
      });
    </script>
  </body>
</html>