正文

轻松掌握ECharts 3D图表制作：从入门到精通，实操案例教学

/0 浏览量
0517

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助用户将数据通过丰富的图表形式展示出来。随着技术的不断发展，ECharts 也推出了 3D 图表功能，让数据可视化更加生动和立体。本文将带领大家从入门到精通，通过实操案例教学，轻松掌握 ECharts 3D 图表制作。

一、ECharts 3D 图表简介

ECharts 3D 图表是基于 ECharts 2D 图表扩展而来，它支持多种 3D 图表类型，如 3D 柱状图、3D 饼图、3D 地图等。通过 3D 图表，我们可以更直观地展示数据的立体关系，增强数据的可视化效果。

二、ECharts 3D 图表制作入门

1. 环境搭建

首先，我们需要在项目中引入 ECharts 3D 图表所需的文件。可以通过以下代码实现：

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

2. 基本配置

接下来，我们需要创建一个基本的 3D 图表实例。以下是一个 3D 柱状图的示例：

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

var option = {
    tooltip: {},
    visualMap: {
        max: 1000,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#b3cde3', '#f1e2cc', '#f7d980', '#feb97c', '#fe9929', '#d94e5d', '#e15759', '#f45f3e']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [
            [0, 0, 100],
            [1, 0, 200],
            [2, 0, 300],
            [3, 0, 400],
            [4, 0, 500],
            [5, 0, 600],
            [6, 0, 700]
        ]
    }]
};

myChart.setOption(option);

3. 3D 图表类型

ECharts 3D 图表支持多种类型，以下列举几种常见的 3D 图表类型：

  • 3D 柱状图
  • 3D 饼图
  • 3D 地图
  • 3D 散点图
  • 3D 雷达图

三、实操案例教学

1. 3D 柱状图

以下是一个 3D 柱状图的实操案例，展示不同城市的人口数量：

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

var option = {
    tooltip: {},
    visualMap: {
        max: 1000,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#b3cde3', '#f1e2cc', '#f7d980', '#feb97c', '#fe9929', '#d94e5d', '#e15759', '#f45f3e']
        }
    },
    xAxis3D: {
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [
            [0, 0, 200],
            [1, 0, 300],
            [2, 0, 400],
            [3, 0, 500],
            [4, 0, 600],
            [5, 0, 700],
            [6, 0, 800]
        ]
    }]
};

myChart.setOption(option);

2. 3D 饼图

以下是一个 3D 饼图的实操案例，展示不同产品的销售额占比：

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

var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

myChart.setOption(option);

3. 3D 地图

以下是一个 3D 地图的实操案例，展示全球不同国家的 GDP：

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

var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    geo3D: {
        map: 'world',
        roam: true,
        label: {
            show: false,
            textStyle: {
                color: '#fff',
                fontSize: 16,
                borderWidth: 1,
                borderColor: '#fff'
            }
        },
        itemStyle: {
            color: '#323c48',
            borderColor: '#111'
        }
    },
    series: [{
        type: 'bar',
        coordinateSystem: 'geo3D',
        data: [
            {name: '美国', value: [106.49, 37.02, 1000]},
            {name: '中国', value: [116.4074, 39.9042, 1000]},
            // ... 其他国家数据
        ]
    }]
};

myChart.setOption(option);

四、总结

通过本文的学习，相信大家对 ECharts 3D 图表制作有了更深入的了解。在实际应用中，我们可以根据需求选择合适的 3D 图表类型，并通过调整配置参数来优化图表效果。希望本文能帮助大家轻松掌握 ECharts 3D 图表制作，为数据可视化领域贡献自己的力量。

-- 展开阅读全文 --