正文

从零开始，学会使用 ECharts 3D 图表，轻松提升数据展示效果

/0 浏览量
0724

ECharts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地将数据通过图表的形式展示出来。随着版本的更新，ECharts 已经支持了多种图表类型，包括 3D 图表。3D 图表能够提供更加立体和直观的数据展示效果，特别适合于展示空间数据或需要三维展示的场景。下面，我们就从零开始，一步步学习如何使用 ECharts 创建 3D 图表。

了解 ECharts 3D 图表

首先，我们需要了解 ECharts 3D 图表的基本类型。ECharts 提供了以下几种 3D 图表：

  • 3D 柱状图：用于展示三维空间中的柱状数据。
  • 3D 饼图：将饼图扩展到三维空间，适合展示三维数据分布。
  • 3D 散点图：用于展示三维空间中的点数据。
  • 3D 雷达图：类似于二维雷达图，但在三维空间中展示。

环境搭建

在开始之前，确保你的开发环境中已经安装了 Node.js 和 npm。接下来，你可以按照以下步骤进行：

  1. 安装 ECharts：

    npm install echarts --save

  2. 引入 ECharts 库： 在你的 HTML 文件中，引入 ECharts 的 JS 文件。

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

创建第一个 3D 图表

选择图表类型

以 3D 柱状图为例，它适合展示三维空间中的高度、宽度和深度数据。

准备数据

假设我们有一组三维空间中的销售数据，如下：

x轴（地区） y轴（产品类别） z轴（销售额）
北京 A 1000
北京 B 1500
上海 A 1200
上海 B 1800

编写代码

在 HTML 文件中，添加一个用于渲染图表的容器，并编写 ECharts 代码。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <title>ECharts</title>
       <!-- 引入 ECharts 文件 -->
       <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>

       <script type="text/javascript">
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('container'));

           // 指定图表的配置项和数据
           var option = {
               tooltip: {},
               visualMap: {
                   max: 2000,
                   min: 500,
                   left: 'left',
                   top: 'bottom',
                   text: ['高','低'],           // 文本，默认为数值文本
                   calculable: true
               },
               xAxis3D: {
                   type: 'category',
                   data: ['北京', '上海']
               },
               yAxis3D: {
                   type: 'category',
                   data: ['A', 'B']
               },
               zAxis3D: {
                   type: 'value'
               },
               series: [{
                   type: 'bar',
                   data: [
                       [0, 0, 1000],
                       [0, 1, 1500],
                       [1, 0, 1200],
                       [1, 1, 1800]
                   ]
               }]
           };

           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       </script>
   </body>
</html>

解释代码

  • visualMap：用于调整图表的视觉范围，这里设置了最大值和最小值。
  • xAxis3D、yAxis3D、zAxis3D：分别定义了图表的三个轴，这里设置为分类轴。
  • series：定义了图表中要展示的数据。

总结

通过以上步骤，我们已经成功地创建了一个简单的 3D 柱状图。ECharts 的 3D 图表功能非常强大，你可以根据实际需求调整图表的类型、样式和数据。希望这篇文章能帮助你快速上手 ECharts 3D 图表，让你的数据展示更加生动有趣。

-- 展开阅读全文 --