正文

学会echarts，轻松绘制各类堆积图：数据可视化，图表制作指南

/0 浏览量
0903

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够轻松地将数据通过图表的形式呈现出来。堆积图作为一种常用的数据可视化图表，能够帮助用户更直观地理解数据的分布和趋势。本文将带您了解如何学会 ECharts，轻松绘制各类堆积图，以及相关技巧和注意事项。

一、ECharts 简介

ECharts 是一个纯 JavaScript 实现的开源可视化库，由百度团队开发和维护。它支持多种图表类型，如柱状图、折线图、饼图、地图、雷达图等，且易于定制和扩展。

二、堆积图基础

堆积图是一种将多个数据系列叠加在同一图表上的图表，通过不同颜色或线条区分不同的数据系列。堆积图可以分为以下几种类型：

  1. 水平堆积图：数据系列在水平轴上表示，适用于横向对比数据。
  2. 垂直堆积图：数据系列在垂直轴上表示，适用于纵向对比数据。
  3. 堆积柱状图：适用于展示不同类别数据的增长趋势。
  4. 堆积折线图：适用于展示不同类别数据的趋势变化。

三、绘制堆积图的步骤

以下是一个使用 ECharts 绘制垂直堆积柱状图的步骤：

  1. 引入 ECharts 库：将 ECharts 的 CSS 文件和 JS 文件引入到你的页面中。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  1. 准备数据：构建你的数据数组。
var data = [
  { name: '系列 1', value: 120 },
  { name: '系列 2', value: 200 },
  { name: '系列 3', value: 150 },
  { name: '系列 4', value: 80 },
  { name: '系列 5', value: 70 },
  { name: '系列 6', value: 110 },
  { name: '系列 7', value: 130 }
];
  1. 初始化图表：创建一个 ECharts 实例。
var myChart = echarts.init(document.getElementById('main'));
  1. 设置图表配置项：配置图表的标题、坐标轴、系列等。
var option = {
  title: {
    text: '堆积柱状图示例'
  },
  tooltip: {},
  legend: {
    data:['系列 1', '系列 2', '系列 3', '系列 4', '系列 5', '系列 6', '系列 7']
  },
  xAxis: {
    data: ["系列 1", "系列 2", "系列 3", "系列 4", "系列 5", "系列 6", "系列 7"]
  },
  yAxis: {},
  series: [{
    name: '系列 1',
    type: 'bar',
    data: [120]
  }, {
    name: '系列 2',
    type: 'bar',
    data: [200]
  }, {
    name: '系列 3',
    type: 'bar',
    data: [150]
  }, {
    name: '系列 4',
    type: 'bar',
    data: [80]
  }, {
    name: '系列 5',
    type: 'bar',
    data: [70]
  }, {
    name: '系列 6',
    type: 'bar',
    data: [110]
  }, {
    name: '系列 7',
    type: 'bar',
    data: [130]
  }]
};
  1. 应用配置项并渲染图表：将配置项设置到 ECharts 实例中，并调用 setOption 方法渲染图表。
myChart.setOption(option);
  1. 绑定事件：可以为图表绑定事件，如点击事件、鼠标悬停事件等。
myChart.on('click', function (params) {
  console.log(params.name, params.value);
});

四、实战案例

下面是一个实战案例，绘制一个包含两个数据系列的垂直堆积柱状图，展示不同地区的销售额。

<!DOCTYPE html>
<html style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="main" style="height: 100%"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <script type="text/javascript">
    var data = [
      { name: '北京', value: 120 },
      { name: '上海', value: 200 },
      { name: '广州', value: 150 },
      { name: '深圳', value: 80 },
      { name: '杭州', value: 70 },
      { name: '成都', value: 110 },
      { name: '武汉', value: 130 }
    ];
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: '地区销售额对比'
      },
      tooltip: {},
      legend: {
        data:['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉']
      },
      xAxis: {
        data: data.map(function (item) {
          return item.name;
        })
      },
      yAxis: {},
      series: [{
        name: '北京',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '上海',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '广州',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '深圳',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '杭州',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '成都',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }, {
        name: '武汉',
        type: 'bar',
        data: data.map(function (item) {
          return item.value;
        })
      }]
    };
    myChart.setOption(option);
  </script>
</body>
</html>

以上就是一个简单的 ECharts 垂直堆积柱状图的实现。通过 ECharts，你可以轻松绘制出各种类型的堆积图，并通过丰富的配置项和扩展功能满足你的个性化需求。

五、总结

学会 ECharts，绘制堆积图并不复杂。只需按照上述步骤进行，你就可以轻松地将数据可视化。在实际应用中，可以根据需求调整图表类型、配置项和扩展功能，让你的图表更加生动有趣。希望本文对你有所帮助！

-- 展开阅读全文 --