正文

教你轻松上手，echarts 3D图表制作全攻略，从基础到实战一步到位

/0 浏览量
0820

引言

在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松地创建各种图表。随着技术的不断发展，ECharts 也推出了 3D 图表功能，让数据展示更加生动和立体。本文将带你从基础到实战，全面了解 ECharts 3D 图表制作。

第一章：ECharts 3D 图表简介

1.1 ECharts 3D 图表概述

ECharts 3D 图表是基于 ECharts 2D 图表扩展而来，它支持多种 3D 图表类型，如 3D 柱状图、3D 饼图、3D 地图等。通过 ECharts 3D 图表，我们可以将数据以更加直观和立体的方式呈现出来。

1.2 ECharts 3D 图表的优势

  • 直观性：3D 图表可以更好地展示数据的层次感和空间感。
  • 交互性：ECharts 支持丰富的交互功能，如缩放、旋转、平移等。
  • 兼容性：ECharts 3D 图表可以在大多数浏览器中正常显示。

第二章：ECharts 3D 图表基础

2.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.2 基本配置

ECharts 3D 图表的基本配置与 2D 图表类似，主要包括：

  • 标题：title
  • 工具箱：toolbox
  • 图例：legend
  • 数据系列：series

以下是一个简单的 3D 柱状图示例：

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

var option = {
    title: {
        text: '3D 柱状图示例'
    },
    tooltip: {},
    xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: [[0, 0, 10], [0, 1, 20], [0, 2, 30], [0, 3, 40]]
    }]
};

myChart.setOption(option);

第三章：ECharts 3D 图表实战

3.1 3D 地图

ECharts 3D 地图可以展示全球或特定区域的地理信息。以下是一个简单的 3D 地图示例：

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

var option = {
    title: {
        text: '3D 地图示例'
    },
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    geo3D: {
        map: 'world',
        roam: true,
        shading: 'lambert',
        label: {
            show: false,
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            color: '#fff',
            borderColor: '#000'
        },
        silent: true,
        emphasis: {
            label: {
                show: true
            }
        }
    },
    series: [{
        type: 'effectScatter3D',
        coordinateSystem: 'geo3D',
        symbolSize: function (val) {
            return val[2] / 10;
        },
        data: [
            [120.18, 30.24, 100],
            [121.47, 31.23, 90],
            [121.38, 31.28, 80],
            [121.28, 31.26, 70],
            [121.08, 31.23, 60],
            [121.15, 31.18, 50],
            [121.27, 31.22, 40],
            [121.30, 31.26, 30],
            [121.24, 31.19, 20],
            [121.20, 31.23, 10]
        ]
    }]
};

myChart.setOption(option);

3.2 3D 饼图

ECharts 3D 饼图可以展示数据的占比关系。以下是一个简单的 3D 饼图示例：

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

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

myChart.setOption(option);

第四章：ECharts 3D 图表进阶

4.1 交互与动画

ECharts 3D 图表支持丰富的交互和动画效果，如缩放、旋转、平移、飞入等。以下是一个简单的缩放动画示例：

myChart.dispatchAction({
    type: 'dataZoom',
    start: 0,
    end: 100
});

4.2 自定义主题

ECharts 支持自定义主题，你可以根据自己的需求修改图表的样式。以下是一个简单的自定义主题示例：

var theme = {
    color: ['#3398DB', '#FF6347', '#FDD835', '#5470C6', '#91C7AE', '#EEDD78', '#D7D7D7', '#27727B'],
    title: {
        textStyle: {
            color: '#333'
        }
    },
    tooltip: {
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    visualMap: {
        color: ['#5470C6', '#91C7AE', '#EEDD78', '#FF9F7F']
    },
    legend: {
        textStyle: {
            color: '#333'
        }
    }
};

echarts.registerTheme('custom', theme);

第五章：总结

通过本文的学习，相信你已经对 ECharts 3D 图表制作有了全面的了解。从基础配置到实战应用，再到进阶技巧，ECharts 3D 图表可以帮助你将数据以更加生动和立体的方式呈现出来。希望本文能对你有所帮助，祝你学习愉快！

-- 展开阅读全文 --