正文

3D图表新体验：ECharts 3D图表展示效果全面解析，轻松入门实操指南

/0 浏览量
0702

在数据可视化领域，ECharts 作为一款强大的开源图表库，一直以其易用性和强大的功能深受开发者喜爱。随着版本的更新，ECharts 也逐步引入了 3D 图表功能，为数据展示提供了全新的视角。本文将全面解析 ECharts 3D 图表的展示效果，并为您提供一份轻松入门的实操指南。

1. ECharts 3D 图表简介

ECharts 3D 图表是基于 ECharts 2D 图表扩展而来，通过三维空间展示数据，使得数据更加直观、生动。ECharts 3D 图表支持多种类型，包括 3D 柱状图、3D 饼图、3D 地图等，可以满足不同场景下的数据可视化需求。

2. ECharts 3D 图表类型解析

2.1 3D 柱状图

3D 柱状图适用于展示各个维度上的数据对比。在 ECharts 中，创建 3D 柱状图的步骤如下：

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

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    grid3D: {
        viewControl: {
            alpha: 45,
            beta: 30
        }
    },
    series: [{
        type: 'bar',
        data: [[0, 10, 10], [1, 20, 20], [2, 30, 30], [3, 40, 40]],
        shading: 'lambert',
        label: {
            show: true,
            position: 'middle',
            formatter: '{c}'
        }
    }]
};

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

2.2 3D 饼图

3D 饼图适用于展示部分与整体的比例关系。在 ECharts 中，创建 3D 饼图的步骤如下：

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

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    geo3D: {
        map: 'world',
        roam: true,
        label: {
            show: false,
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            areaColor: '#f7f7f7',
            borderColor: '#d3d3d3'
        }
    },
    series: [{
        name: '世界人口',
        type: 'pie',
        coordinateSystem: 'geo3D',
        data: [{
            name: '非洲',
            value: 1347
        }, {
            name: '亚洲',
            value: 3612
        }, {
            name: '拉丁美洲',
            value: 643
        }, {
            name: '北美',
            value: 566
        }, {
            name: '欧洲',
            value: 741
        }, {
            name: '大洋洲',
            value: 105
        }],
        label: {
            normal: {
                formatter: '{b}: {c}',
                position: 'center'
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetY: 15,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

2.3 3D 地图

3D 地图适用于展示地理位置数据。在 ECharts 中，创建 3D 地图的步骤如下：

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

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c}'
    },
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    geo3D: {
        map: 'world',
        roam: true,
        label: {
            show: false,
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            areaColor: '#f7f7f7',
            borderColor: '#d3d3d3'
        }
    },
    series: [{
        name: '全球人口',
        type: 'heatmap',
        coordinateSystem: 'geo3D',
        data: [
            // 数据示例，可根据实际情况添加
            {name: '巴西', value: [20, -20]},
            {name: '美国', value: [40, -40]},
            {name: '中国', value: [60, -60]}
        ]
    }]
};

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

3. ECharts 3D 图表实操指南

3.1 环境搭建

  1. 下载 ECharts 库：https://echarts.apache.org/zh/download.html
  2. 将 ECharts 库添加到项目中
  3. 引入 ECharts 库的 CSS 和 JS 文件
<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
<!-- 引入 ECharts 3D 图表扩展 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.0/echarts-gl.min.js"></script>

3.2 创建图表

  1. 选择合适的 3D 图表类型
  2. 设置图表的配置项和数据
  3. 使用 echarts.init() 初始化图表
  4. 使用 setOption() 方法显示图表

3.3 优化图表

  1. 调整视角和投影方式
  2. 设置颜色和纹理
  3. 添加标签和提示框
  4. 调整动画效果

通过以上步骤，您就可以轻松入门 ECharts 3D 图表制作了。希望本文对您有所帮助！

-- 展开阅读全文 --