正文

学会echarts制作3D图表：从入门到实战案例详解

/0 浏览量
0920

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松实现各种数据图表的展示。3D 图表是 ECharts 提供的一种高级图表形式，能够使数据展示更加生动、立体。本文将带您从入门到实战，全面了解如何使用 ECharts 制作 3D 图表。

第一节：ECharts 3D 图表简介

1.1 ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它具有以下特点：

  • 跨平台：支持多种平台和浏览器。
  • 丰富的图表类型：包括折线图、柱状图、饼图、地图等。
  • 易于使用：通过简单的配置即可实现各种图表效果。
  • 丰富的扩展：支持自定义图表类型和插件。

1.2 ECharts 3D 图表类型

ECharts 3D 图表主要包括以下类型：

  • 3D 柱状图
  • 3D 饼图
  • 3D 地图
  • 3D 散点图
  • 3D 线图

第二节：ECharts 3D 图表制作入门

2.1 环境搭建

要使用 ECharts 制作 3D 图表，首先需要在项目中引入 ECharts 库。可以通过以下两种方式引入：

方式一：使用 CDN 链接

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

方式二：使用 npm 安装

npm install echarts --save

2.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 type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        visualMap: {
            max: 100,
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#b3cde3', '#e6f5ff']
            }
        },
        xAxis3D: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis3D: {
            type: 'category',
            data: ['1', '2', '3', '4', '5']
        },
        zAxis3D: {
            type: 'value'
        },
        series: [{
            type: 'bar',
            data: [
                [0, 0, 60],
                [0, 1, 80],
                [0, 2, 70],
                [0, 3, 110],
                [0, 4, 130]
            ]
        }]
    };

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

第三节：ECharts 3D 图表进阶

3.1 3D 饼图

3D 饼图在 ECharts 中使用 pie3D 类型实现。以下是一个示例代码：

<!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 type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        visualMap: {
            min: 0,
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
        },
        series: [{
            name: '访问来源',
            type: 'pie3D',
            radius: [20, 110],
            roseType: 'radius',
            data: [
                {value: 60, name: '搜索引擎'},
                {value: 40, name: '直接访问'}
            ],
            label: {
                normal: {
                    textStyle: {
                        fontSize: 16,
                        color: '#f00'
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#f00',
                    opacity: 0.5,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return idx * 100;
            }
        }]
    };

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

3.2 3D 地图

3D 地图在 ECharts 中使用 map3D 类型实现。以下是一个示例代码：

<!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 type="text/javascript">
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        tooltip: {},
        visualMap: {
            max: 100,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true
        },
        xAxis3D: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis3D: {
            type: 'category',
            data: ['1', '2', '3', '4', '5']
        },
        zAxis3D: {
            type: 'value'
        },
        series: [{
            type: 'map3D',
            mapType: 'world',
            data: [
                {name: '非洲', value: 100},
                {name: '欧洲', value: 50},
                {name: '亚洲', value: 70},
                {name: '北美洲', value: 30},
                {name: '南美洲', value: 20}
            ]
        }]
    };

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

第四节：实战案例详解

4.1 制作 3D 柱状图展示全球人口分布

本案例将使用 ECharts 3D 柱状图展示全球人口分布情况。数据来源于联合国统计数据库。

数据获取：

  1. 访问联合国统计数据库官网（https://data.un.org/）。
  2. 在搜索框中输入 “World Population” 搜索相关数据。
  3. 下载所需数据文件。

数据预处理：

  1. 使用 Excel 或其他数据处理软件打开数据文件。
  2. 将数据整理成以下格式：
国家 人口
中国 1,400,000,000
美国 330,000,000
印度 1,350,000,000
… …

代码实现：

<!-- ... 省略引入 ECharts 库的代码 ... -->

<script type="text/javascript">
    // ... 省略 ECharts 初始化代码 ...

    var option = {
        // ... 省略其他配置项 ...

        series: [{
            type: 'bar3D',
            data: data,
            label: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            },
            itemStyle: {
                color: '#5470C6'
            }
        }]
    };

    myChart.setOption(option);
</script>

4.2 制作 3D 饼图展示全球 GDP 分布

本案例将使用 ECharts 3D 饼图展示全球 GDP 分布情况。数据来源于世界银行数据库。

数据获取：

  1. 访问世界银行数据库官网（https://data.worldbank.org/）。
  2. 在搜索框中输入 “GDP” 搜索相关数据。
  3. 下载所需数据文件。

数据预处理：

  1. 使用 Excel 或其他数据处理软件打开数据文件。
  2. 将数据整理成以下格式：
国家 GDP（亿美元）
中国 11,000
美国 21,000
日本 5,000
… …

代码实现：

<!-- ... 省略引入 ECharts 库的代码 ... -->

<script type="text/javascript">
    // ... 省略 ECharts 初始化代码 ...

    var option = {
        // ... 省略其他配置项 ...

        series: [{
            type: 'pie3D',
            data: data,
            radius: [20, 110],
            roseType: 'radius',
            label: {
                show: true,
                formatter: '{b}: {c} ({d}%)'
            },
            itemStyle: {
                color: '#5470C6'
            }
        }]
    };

    myChart.setOption(option);
</script>

总结

通过本文的学习，您已经掌握了使用 ECharts 制作 3D 图表的基本知识和技巧。在实际应用中，可以根据具体需求选择合适的图表类型和数据来源，发挥 ECharts 3D 图表的优势。希望本文对您有所帮助！

-- 展开阅读全文 --