echarts 实现四柱合并两柱，柱状图与折线图混合展现

2023-10-26 17:55:02

简介

ECharts 是一个强大的数据可视化库，它可以帮助您轻松创建各种类型的图表。如果您需要在 ECharts 中将四柱合并两柱，那么您不能使用堆积图。因为堆积图只能将多个系列的数据叠加在一起，而不能将它们合并在一起。

那么，如何才能在 ECharts 中将四柱合并两柱呢？

方法

1. 将数据预处理

首先，您需要将数据预处理一下。具体来说，您需要将四个系列的数据两两合并成两个系列的数据。例如，如果您有如下四个系列的数据：

series1 = [10, 20, 30, 40]
series2 = [50, 60, 70, 80]
series3 = [90, 100, 110, 120]
series4 = [130, 140, 150, 160]

那么，您可以将它们两两合并成如下两个系列的数据：

new_series1 = [series1, series2]
new_series2 = [series3, series4]

2. 创建 ECharts 实例

接下来，您需要创建一个 ECharts 实例。具体来说，您可以使用如下代码创建一个 ECharts 实例：

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

3. 设置 ECharts 选项

然后，您需要设置 ECharts 选项。具体来说，您需要设置如下 ECharts 选项：

var option = {
  title: {
    text: '四柱合并两柱'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['系列1', '系列2']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      stack: '总量',
      data: new_series1
    },
    {
      name: '系列2',
      type: 'bar',
      stack: '总量',
      data: new_series2
    },
    {
      name: '折线图',
      type: 'line',
      data: [10, 20, 30, 40, 50, 60, 70, 80]
    }
  ]
};

4. 将 ECharts 选项加载到 ECharts 实例中

最后，您需要将 ECharts 选项加载到 ECharts 实例中。具体来说，您可以使用如下代码将 ECharts 选项加载到 ECharts 实例中：

myChart.setOption(option);

这样，您就可以在 ECharts 中将四柱合并两柱了。您还可以将柱状图与折线图混合展现。

示例

以下是使用 ECharts 实现四柱合并两柱的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id="myChart"></div>
  <script>
    var myChart = echarts.init(document.getElementById('myChart'));
    var option = {
      title: {
        text: '四柱合并两柱'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['系列1', '系列2']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '系列1',
          type: 'bar',
          stack: '总量',
          data: [10, 20, 30, 40]
        },
        {
          name: '系列2',
          type: 'bar',
          stack: '总量',
          data: [50, 60, 70, 80]
        },
        {
          name: '折线图',
          type: 'line',
          data: [10, 20, 30, 40, 50, 60, 70, 80]
        }
      ]
    };
    myChart.setOption(option);
  </script>
</body>
</html>