正文

教你轻松打造3D效果echarts图表，视觉效果惊艳眼球

/0 浏览量
0719

在数据可视化领域，ECharts 是一款非常流行的开源 JavaScript 库，它能够帮助开发者轻松创建交互式图表。而 ECharts 中的 3D 图表功能，更是让数据展示更加生动、直观。本文将为你详细介绍如何使用 ECharts 创建 3D 效果图表，让你的视觉效果惊艳眼球。

1. 准备工作

在开始之前，请确保你已经安装了 ECharts 库。可以通过以下命令安装：

npm install echarts --save

或者，你可以直接从 ECharts 官网下载 ECharts.js 文件。

2. 创建基本 3D 图表

下面是一个简单的 3D 散点图的示例：

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            tooltip: {},
            visualMap: {
                min: -3,
                max: 3,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            xAxis3D: {
                type: 'value'
            },
            yAxis3D: {
                type: 'value'
            },
            zAxis3D: {
                type: 'value'
            },
            series: [{
                type: 'scatter3D',
                data: [
                    [-1, -1, -1],
                    [1, -1, -1],
                    [-1, 1, -1],
                    [1, 1, -1],
                    [-1, -1, 1],
                    [1, -1, 1],
                    [-1, 1, 1],
                    [1, 1, 1]
                ]
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

这段代码创建了一个包含八个点的 3D 散点图，每个点都有 x、y、z 三个坐标。

3. 个性化 3D 图表

ECharts 支持丰富的 3D 图表类型，如 3D 柱状图、3D 饼图等。以下是一个 3D 柱状图的示例：

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            tooltip: {},
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            xAxis3D: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis3D: {
                type: 'value'
            },
            zAxis3D: {
                type: 'value'
            },
            series: [{
                type: 'bar3D',
                data: [
                    [0, 0, 10],
                    [1, 0, 20],
                    [2, 0, 30],
                    [3, 0, 40],
                    [4, 0, 50]
                ],
                shading: 'lambert'
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

这段代码创建了一个包含五个柱子的 3D 柱状图，每个柱子都有 x、y、z 三个坐标。

4. 交互式 3D 图表

ECharts 提供了丰富的交互功能，如缩放、平移、旋转等。以下是一个带有交互功能的 3D 散点图的示例：

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            tooltip: {},
            visualMap: {
                min: -3,
                max: 3,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            xAxis3D: {
                type: 'value'
            },
            yAxis3D: {
                type: 'value'
            },
            zAxis3D: {
                type: 'value'
            },
            series: [{
                type: 'scatter3D',
                data: [
                    [-1, -1, -1],
                    [1, -1, -1],
                    [-1, 1, -1],
                    [1, 1, -1],
                    [-1, -1, 1],
                    [1, -1, 1],
                    [-1, 1, 1],
                    [1, 1, 1]
                ]
            }]
        };

        myChart.setOption(option);

        // 监听鼠标事件，实现交互
        myChart.on('mousedown', function (params) {
            myChart.dispatchAction({
                type: 'dataZoom',
                start: {
                    x: params.offsetX,
                    y: params.offsetY
                },
                end: {
                    x: params.offsetX,
                    y: params.offsetY
                }
            });
        });
    </script>
</body>
</html>

这段代码在鼠标按下时，会触发 dataZoom 事件，实现缩放功能。

5. 总结

通过本文的介绍，相信你已经学会了如何使用 ECharts 创建 3D 效果图表。在实际应用中，你可以根据自己的需求调整图表的样式、交互等。希望这篇文章能帮助你打造出令人惊艳的视觉效果！

-- 展开阅读全文 --