正文

从零开始，轻松学会echarts 3D图表制作：实战案例与技巧解析

/0 浏览量
0517

ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括常见的折线图、柱状图、饼图等，并且随着版本的更新，ECharts 也加入了 3D 图表的功能，使得数据的可视化更加丰富和立体。本篇文章将从零开始，详细介绍如何使用 ECharts 3D 图表，包括实战案例和技巧解析。

ECharts 3D 图表简介

ECharts 3D 图表是 ECharts 库的一个高级功能，它允许用户创建各种三维图表，如三维散点图、三维柱状图、三维地图等。3D 图表在展示数据时具有更强的视觉效果，能够更直观地表达数据的分布和关系。

准备工作

在开始学习之前，你需要确保以下几点：

  1. 环境搭建：安装 Node.js 环境，因为 ECharts 的官方文档和部分案例都是基于 Node.js 搭建的。
  2. 下载 ECharts 库：你可以从 ECharts 的官网下载最新版本的 ECharts 库。
  3. 了解基础：熟悉 HTML、CSS 和 JavaScript 的基础知识。

基础使用

引入 ECharts 库

首先，在你的 HTML 文件中引入 ECharts 库。你可以从 ECharts 的 CDN 链接下载，或者从源码下载。

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

创建基础 3D 散点图

以下是一个简单的 3D 散点图的例子：

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

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    visualMap: {
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#f6bd16', '#f59025', '#f5365c', '#e5323e']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis3D: {
        type: 'category',
        data: ['1', '2', '3', '4', '5']
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'scatter3D',
        data: [
            [0, 0, 10],
            [5, 5, 20],
            [10, 10, 30],
            [15, 15, 40],
            [20, 20, 50]
        ]
    }]
};

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

这段代码创建了一个 3D 散点图，其中 xAxis3D、yAxis3D 和 zAxis3D 分别代表三维空间中的三个坐标轴，series 属性中的 data 属性包含了图表的数据。

实战案例

三维柱状图

三维柱状图常用于展示不同维度之间的数据对比。以下是一个三维柱状图的例子：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {},
    visualMap: {
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#f6bd16', '#f59025', '#f5365c', '#e5323e']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis3D: {
        type: 'category',
        data: ['1', '2', '3', '4', '5']
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'bar3D',
        data: [
            [0, 0, 10],
            [0, 1, 15],
            [0, 2, 20],
            [0, 3, 25],
            [0, 4, 30],
            [1, 0, 12],
            [1, 1, 17],
            [1, 2, 22],
            [1, 3, 27],
            [1, 4, 32],
            [2, 0, 8],
            [2, 1, 13],
            [2, 2, 18],
            [2, 3, 23],
            [2, 4, 28],
            [3, 0, 9],
            [3, 1, 14],
            [3, 2, 19],
            [3, 3, 24],
            [3, 4, 29],
            [4, 0, 11],
            [4, 1, 16],
            [4, 2, 21],
            [4, 3, 26],
            [4, 4, 31]
        ]
    }]
};

myChart.setOption(option);

三维地图

三维地图是 ECharts 3D 图表中的一个高级功能，它允许你在地图上展示各种三维图表。以下是一个三维地图的例子：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    geo3D: {
        map: 'world',
        roam: true,
        label: {
            show: false,
            color: '#ccc',
            emphasis: {
                color: '#fff'
            }
        },
        itemStyle: {
            color: '#323c48',
            borderColor: '#111'
        },
        emphasis: {
            label: {
                show: true
            }
        },
        silent: false
    },
    series: [{
        type: 'scatter3D',
        coordinateSystem: 'geo3D',
        data: [
            {name: 'Australia', value: [133.969, -25.274, 100]},
            {name: 'Russia', value: [103.725, 55.762, 100]},
            // ... 其他数据
        ]
    }]
};

myChart.setOption(option);

技巧解析

优化图表性能

在使用 3D 图表时，要注意图表的性能。以下是一些优化图表性能的技巧：

  1. 减少数据量：3D 图表的数据量不宜过多，否则会严重影响图表的性能。
  2. 简化视觉效果：尽量减少不必要的视觉效果，如阴影、光照等。
  3. 使用更高效的图表类型：在某些情况下，使用 2D 图表可能比 3D 图表更高效。

使用自定义图形

ECharts 允许用户自定义图形，以便更好地展示数据。以下是一个使用自定义图形的例子：

series: [{
    type: 'custom',
    coordinateSystem: 'geo3D',
    renderItem: function(params, api) {
        var value = params.data.value;
        return {
            type: 'path',
            shape: {
                coords: [
                    [api.coord([value[0], value[1]])[0], api.coord([value[0], value[1]])[1]],
                    [api.coord([value[0] + 1, value[1]])[0], api.coord([value[0] + 1, value[1]])[1]],
                    [api.coord([value[0] + 1, value[1] + 1])[0], api.coord([value[0] + 1, value[1] + 1])[1]],
                    [api.coord([value[0], value[1] + 1])[0], api.coord([value[0], value[1] + 1])[1]],
                    [api.coord([value[0], value[1]])[0], api.coord([value[0], value[1]])[1]]
                ]
            },
            style: {
                fill: 'red'
            }
        };
    },
    data: [
        {name: 'Australia', value: [133.969, -25.274, 100]},
        {name: 'Russia', value: [103.725, 55.762, 100]},
        // ... 其他数据
    ]
}]

在这个例子中，我们使用自定义图形来绘制一个红色的三角形，表示澳大利亚和俄罗斯。

总结

ECharts 3D 图表是一个强大的工具，可以帮助用户更好地展示数据。通过本文的介绍，相信你已经掌握了 ECharts 3D 图表的基本使用方法。在实际应用中，你可以根据自己的需求，调整图表的样式和配置，以达到最佳的展示效果。

-- 展开阅读全文 --