正文

轻松上手ECharts 3D图表：从基础入门到实战案例详解

/0 浏览量
0610

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括 2D 图表和 3D 图表。随着数据可视化需求的不断增长，3D 图表因其立体感和视觉效果，在展示复杂数据时显得尤为重要。本文将带你从基础入门，逐步深入到 ECharts 3D 图表的实战案例。

基础入门

1. 安装和引入 ECharts

首先，你需要下载 ECharts 库并将其引入到你的项目中。可以通过以下两种方式引入：

方式一：使用 CDN 链接

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>

方式二：下载 ECharts 库

下载 ECharts 的压缩包，将其解压到项目目录中，并在 HTML 文件中引入对应的 JavaScript 文件。

<script src="path/to/echarts.min.js"></script>

2. 创建基本 3D 图表

创建一个基本的 3D 图表需要以下几个步骤：

  1. 准备数据
  2. 初始化图表实例
  3. 配置图表选项
  4. 使用 setOption 方法将配置项应用到图表实例上

以下是一个简单的柱状图示例：

// 准备数据
var data = [
  {value: [10, 20, 30]},
  {value: [20, 30, 40]},
  {value: [30, 40, 50]}
];

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 配置图表选项
var option = {
  xAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis3D: {
    type: 'category',
    data: ['X', 'Y', 'Z']
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    viewControl: {
      rotate: true
    }
  },
  series: [{
    type: 'bar',
    data: data
  }]
};

// 使用 setOption 方法将配置项应用到图表实例上
myChart.setOption(option);

3. 配置 3D 图表参数

ECharts 提供了丰富的参数来配置 3D 图表的外观和交互。以下是一些常用的参数：

  • grid3D: 控制图表的布局和外观
  • viewControl: 控制用户与图表的交互方式，如缩放、旋转等
  • axis3D: 定义坐标轴的样式和数据
  • series: 定义图表的系列和样式

实战案例详解

1. 3D 散点图

3D 散点图常用于展示多维数据之间的关系。以下是一个 3D 散点图的示例：

// 准备数据
var data = [
  [10, 20, 30],
  [20, 30, 40],
  [30, 40, 50],
  // ...更多数据
];

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 配置图表选项
var option = {
  xAxis3D: {
    type: 'value'
  },
  yAxis3D: {
    type: 'value'
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    viewControl: {
      rotate: true
    }
  },
  series: [{
    type: 'scatter3D',
    data: data
  }]
};

// 使用 setOption 方法将配置项应用到图表实例上
myChart.setOption(option);

2. 3D 柱状图

3D 柱状图常用于比较不同类别的数据。以下是一个 3D 柱状图的示例：

// 准备数据
var data = [
  {value: [10, 20, 30]},
  {value: [20, 30, 40]},
  {value: [30, 40, 50]}
];

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 配置图表选项
var option = {
  xAxis3D: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis3D: {
    type: 'category',
    data: ['X', 'Y', 'Z']
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    viewControl: {
      rotate: true
    }
  },
  series: [{
    type: 'bar',
    data: data
  }]
};

// 使用 setOption 方法将配置项应用到图表实例上
myChart.setOption(option);

3. 3D 地图

3D 地图常用于展示地理位置数据。以下是一个 3D 地图的示例：

// 准备数据
var data = [
  {name: '北京', value: [116.46, 39.92, 100]},
  {name: '上海', value: [121.48, 31.22, 150]},
  // ...更多数据
];

// 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));

// 配置图表选项
var option = {
  visualMap: {
    max: 200,
    min: 0,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'], // 文本，默认为数值文本
    calculable: true
  },
  geo3D: {
    map: 'world',
    roam: true,
    viewControl: {
      rotate: true
    }
  },
  series: [{
    type: 'scatter3D',
    coordinateSystem: 'geo3D',
    data: data
  }]
};

// 使用 setOption 方法将配置项应用到图表实例上
myChart.setOption(option);

总结

ECharts 3D 图表功能丰富，应用场景广泛。通过本文的介绍，相信你已经对 ECharts 3D 图表有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型和参数，将数据以更加直观和生动的方式呈现出来。祝你学习愉快！

-- 展开阅读全文 --