正文

轻松上手ECharts 3D图表制作：从入门到实战技巧解析

/0 浏览量
0824

ECharts 是一款功能强大的开源可视化库，它可以帮助开发者轻松创建各种图表。随着技术的不断发展，ECharts 也推出了 3D 图表功能，让数据可视化更加生动和直观。本文将带你从入门到实战，解析如何轻松上手 ECharts 3D 图表制作。

一、ECharts 3D 图表简介

ECharts 3D 图表是 ECharts 的一种扩展，它能够绘制 3D 场景，包括散点图、柱状图、饼图等。通过 3D 图表，我们可以更直观地展示数据的立体关系，增强用户对数据的感知。

二、ECharts 3D 图表制作入门

1. 环境搭建

首先，你需要确保你的开发环境中已经安装了 ECharts。可以通过以下步骤进行安装：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.0/echarts-gl.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataTool.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/map.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/china.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/statistics.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/geo.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/pepper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/bmap.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/traverse.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataZoom.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/v5.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/visualMap.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/series-gl.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/label.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/legend.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/legendScroll.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/title.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/toolbox.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/tooltip.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataset.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/brush.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/data.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/graphic.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/theme.js"></script>
</script>

2. 创建基本 3D 图表

接下来，我们可以创建一个基本的 3D 散点图：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    visualMap: {
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae6b', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'scatter3D',
        data: [
            [10, 20, 30],
            [20, 30, 40],
            [30, 40, 50]
        ]
    }]
};

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

3. 进阶技巧

在制作 3D 图表时，我们可以使用以下技巧来提升图表的视觉效果：

  • 使用不同的颜色和线条粗细来区分数据系列。
  • 通过调整视角和动画效果，使图表更加生动。
  • 结合其他 ECharts 扩展功能，如地图、地理坐标系等，丰富图表内容。

三、实战案例

以下是一个使用 ECharts 3D 绘制地球的案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    visualMap: {
        max: 1000,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae6b', '#f46d43', '#d73027', '#a50026']
        }
    },
    geo3D: {
        map: 'world',
        roam: true,
        label: {
            show: true,
            textStyle: {
                color: '#fff'
            }
        },
        itemStyle: {
            color: '#323c48',
            borderColor: '#111'
        },
        silhouette: {
            show: true,
            color: '#333'
        }
    },
    series: [{
        type: 'scatter3D',
        coordinateSystem: 'geo3D',
        data: [
            [116.391331, 39.916527, 100],
            [120.16927, 31.230416, 90],
            [121.473701, 31.230416, 80],
            [121.473701, 31.230416, 70],
            [121.473701, 31.230416, 60],
            [121.473701, 31.230416, 50],
            [121.473701, 31.230416, 40],
            [121.473701, 31.230416, 30],
            [121.473701, 31.230416, 20],
            [121.473701, 31.230416, 10]
        ]
    }]
};

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

通过以上步骤，我们可以轻松上手 ECharts 3D 图表制作。在实际应用中，你可以根据自己的需求调整图表样式和数据，发挥 ECharts 3D 图表的优势，让数据可视化更加生动和直观。

-- 展开阅读全文 --