在数据可视化领域,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 图表制作技巧。在实际应用中,你可以根据自己的需求,调整图表的样式、颜色、标签等配置项,使图表更具吸引力。希望本文能对你有所帮助!
