正文

从零开始：轻松掌握 ECharts 3D 图表制作技巧

/0 浏览量
0501

在数据可视化领域，ECharts 是一个功能强大且灵活的图表库，它支持多种图表类型，包括 3D 图表。3D 图表可以更直观地展示三维空间中的数据，使数据更具视觉冲击力。本文将带你从零开始，轻松掌握 ECharts 3D 图表制作技巧。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松在网页中嵌入各种图表。它具有以下特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、地图、散点图等多种图表类型。
  • 高度可定制：支持丰富的配置项，可以自定义图表的样式、颜色、标签等。
  • 跨平台：兼容多种浏览器，包括 IE、Chrome、Firefox 等。

二、ECharts 3D 图表基础

ECharts 3D 图表主要分为以下几种类型：

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

以下将分别介绍这些图表的制作方法。

1. 3D 柱状图

3D 柱状图可以直观地展示不同维度上的数据对比。以下是一个简单的 3D 柱状图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入 3D 柱状图模块
require('echarts/lib/chart/bar3D');

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

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

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

2. 3D 饼图

3D 饼图可以展示不同数据在整体中的占比。以下是一个简单的 3D 饼图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入 3D 饼图模块
require('echarts/lib/chart/pie3D');

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

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    visualMap: {
        min: 10,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [
        {
            name: '访问来源',
            type: 'pie3D',
            radius: [20, 100],
            center: ['50%', '50%'],
            data: [
                {value: 10, name: '搜索引擎'},
                {value: 5, name: '直接访问'},
                {value: 15, name: '邮件营销'},
                {value: 25, name: '联盟广告'},
                {value: 20, name: '视频广告'}
            ],
            itemStyle: {
                color: '#c23531',
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{b}: {c} ({d}%)'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        color: '#f7f7f7'
                    }
                }
            },
            labelLine: {
                show: false
            },
            label: {
                show: false
            }
        }
    ]
};

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

3. 3D 散点图

3D 散点图可以展示不同数据在三维空间中的分布情况。以下是一个简单的 3D 散点图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入 3D 散点图模块
require('echarts/lib/chart/scatter3D');

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

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'scatter3D',
        data: [
            [10, 20, 30],
            [20, 30, 40],
            [30, 40, 50],
            [40, 50, 60],
            [50, 60, 70]
        ]
    }]
};

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

4. 3D 地图

3D 地图可以展示不同地理位置的数据。以下是一个简单的 3D 地图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入 3D 地图模块
require('echarts/lib/chart/map3D');

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

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value'
    },
    series: [{
        type: 'map3D',
        mapType: 'world',
        data: [
            {name: '非洲', value: 100},
            {name: '欧洲', value: 200},
            {name: '亚洲', value: 300},
            {name: '北美洲', value: 400},
            {name: '南美洲', value: 500},
            {name: '大洋洲', value: 600},
            {name: '南极洲', value: 700}
        ]
    }]
};

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

三、总结

通过本文的介绍，相信你已经掌握了 ECharts 3D 图表制作技巧。在实际应用中，你可以根据自己的需求，调整图表的样式、颜色、标签等配置项，使图表更具吸引力。希望本文能对你有所帮助！

-- 展开阅读全文 --