ECharts 是一个使用 JavaScript 实现的开源可视化库,它提供了一整套完整的图表解决方案,可以满足大多数数据可视化的需求。在 ECharts 中,3D 图表是一个相对较新的功能,它为用户提供了丰富的视觉展示效果,使得复杂的数据结构能够以更加直观和立体的形式呈现出来。本文将详细介绍 ECharts 3D 图表的展示效果、应用技巧以及如何在项目中使用它们。
1. ECharts 3D 图表类型
ECharts 目前支持以下几种 3D 图表类型:
- 3D 柱状图
- 3D 饼图
- 3D 地图
- 3D 散点图
- 3D 混合图
每种图表都有其独特的应用场景,用户可以根据自己的需求选择合适的图表类型。
2. ECharts 3D 图表展示效果
2.1 3D 柱状图
3D 柱状图适用于展示多维度的数据对比,可以直观地展示各个维度的数值差异。以下是一个简单的 3D 柱状图示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis3D: {
type: 'category',
data: ['1', '2', '3', '4']
},
zAxis3D: {
type: 'value'
},
grid3D: {
viewControl: {
rotate: true,
scaleLimit: {
min: 0.1,
max: 10
}
}
},
series: [
{
type: 'bar',
data: [
[0, 0, 5],
[0, 1, 8],
[0, 2, 6],
[0, 3, 3]
],
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
};
myChart.setOption(option);
2.2 3D 饼图
3D 饼图适用于展示占比关系,以下是一个简单的 3D 饼图示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['A', 'B', 'C', 'D']
},
visualMap: {
type: 'piecewise',
max: 40,
left: '5%',
bottom: '20%',
pieces: [
{ value: 30, label: '30-40', color: '#FAC858' },
{ value: 20, label: '20-30', color: '#FBBB57' },
{ value: 10, label: '10-20', color: '#F7E058' },
{ value: 0, label: '0-10', color: '#C8E058' }
]
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '60%'],
roseType: 'radius',
data: [
{ value: 30, name: 'A' },
{ value: 20, name: 'B' },
{ value: 10, name: 'C' },
{ value: 30, name: 'D' }
],
label: {
normal: {
textStyle: {
color: '#fff'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 10,
shadowOffsetY: 5
},
emphasis: {
color: '#e5323e'
}
}
}
]
};
myChart.setOption(option);
2.3 3D 地图
3D 地图适用于展示地理空间数据,以下是一个简单的 3D 地图示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '全球 3D 地图示例',
subtext: 'ECharts 地理坐标系示例'
},
tooltip: {},
legend: {
orient: 'vertical',
left: 'left',
data: ['数据 1', '数据 2']
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本,默认为数值文本
calculable: true
},
geo: {
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
name: '数据 1',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{name: '巴西', value: [19.9934, -49.9676, 100]},
// ... 其他数据点
],
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: '{b}'
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
{
name: '数据 2',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [
{name: '巴西', value: [19.9934, -49.9676, 200]},
// ... 其他数据点
],
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}: {c}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 2
}
]
};
myChart.setOption(option);
2.4 3D 散点图
3D 散点图适用于展示数据之间的关系,以下是一个简单的 3D 散点图示例:
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value'
},
grid3D: {
viewControl: {
rotate: true,
scaleLimit: {
min: 0.1,
max: 10
}
}
},
series: [
{
type: 'scatter3D',
data: [
[1, 2, 3],
[2, 3, 5],
[3, 5, 8],
[5, 7, 10]
],
symbolSize: 10
}
]
};
myChart.setOption(option);
3. ECharts 3D 图表应用技巧
3.1 调整视角和比例
在使用 ECharts 3D 图表时,可以通过调整视角和比例来更好地展示数据。这可以通过 viewControl 配置项实现。
grid3D: {
viewControl: {
rotate: true, // 允许旋转视角
zoom: true, // 允许缩放图表
pan: true, // 允许平移图表
alpha: 45, // 倾斜角度
beta: 30, // 仰视角度
distance: 100 // 与图表的距离
}
}
3.2 设置坐标轴
根据不同的数据结构,需要设置合适的坐标轴。ECharts 提供了丰富的坐标轴配置项,如 type、name、splitLine 等。
xAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis3D: {
type: 'value',
name: '数量',
splitLine: {
lineStyle: {
color: '#ddd'
}
}
}
3.3 添加图表元素
在 ECharts 3D 图表中,可以通过添加标题、图例、数据标签、提示框等元素来丰富图表内容。
title: {
text: 'ECharts 3D 散点图示例'
},
legend: {
data: ['数据 1']
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}'
},
series: [
{
name: '数据 1',
type: 'scatter3D',
data: [[1, 2, 3], [2, 3, 5], [3, 5, 8], [5, 7, 10]],
symbolSize: 10
}
]
3.4 跨平台兼容性
ECharts 具有良好的跨平台兼容性,可以在多种浏览器和操作系统上运行。同时,ECharts 还支持多种编程语言和框架,方便用户在项目中集成。
4. 总结
ECharts 3D 图表为用户提供了丰富的可视化效果和丰富的功能,可以更好地展示复杂的数据结构。通过本文的介绍,相信你已经对 ECharts 3D 图表的展示效果和应用技巧有了更深入的了解。在实际项目中,你可以根据具体需求选择合适的图表类型和配置项,将 ECharts 3D 图表应用到各种场景中。
