ECharts3D柱状图
功能概述
3D 柱状图是一种通过柱形的长度来表现数据大小的一种立体图表类型。
ECharts 3D 柱状图可以通过开的自定义属性定制出更丰富的视觉效果，下图是部分示例：
示例文件包：可下载后直接导入系统参考查看。
添加 ECharts 3D 柱状图插件
单击可视化插件按钮展开插件列表，然后选中3D柱状图并拖拽至编辑区，即可添加一个3D柱状图插件。
数据绑定
添加插件后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。
示例中我们使用的是一个数据集。
将数据集或模型中的字段拖拽到插件的各个绑定区域完成数据绑定，在左侧编辑区可见插件已经按照绑定的字段进行了绘制。
数据绑定区域 | 说明 |
|---|---|
数值 | 绑定数值类字段，可绑定一个或多个字段。 如果已经在系列区域绑定了字段，则数值区域将无法绑定多个字段。 |
分类 | 绑定组件的分析纬度，可绑定一个字段。 |
系列 | 绑定组件分析的系列，扩展分类纬度，可绑定一个字段。 如果数值中已绑定多个字段，则不可以绑定系列。 |
提示标签 | 提示标签是指当鼠标移至图形时，会出现相应的提示信息。使用方法详见鼠标提示标签。 |
钻取 | 设置组件数据钻取路径，详见数据钻取。 |
数据处理
ECharts 插件与内置图表类似都可一进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。
数据处理详细操作介绍请参考数据处理。
数据探索与分析
ECharts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。
比如为组件添加过滤器、排名筛选、切换类型、添加参考线等等。示例中我们添加了数据过滤使其仅显示了3个类别的数据。
有关具体操作的介绍，请参考数据探索与分析中对应的介绍。
基本属性外观设置
在编辑区右侧选择属性设置或者双击该插件，打开属性设置面板可进行外观属性的设置。
绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。
显示最大最小标注
打开显示标注开关后，可进一步设置是否显示最大/最小标注，标注颜色（默认跟随柱子显示）以及标注字体。
显示缩放轴
显示缩放轴： 开启后将在图表中显示缩放轴。
缩放轴尺寸： 设置缩放轴的宽度。
缩放轴默认长度： 设置预览图表时缩放轴默认显示的长度，也就决定了默认显示的数据数量。
缩放轴颜色： 设置缩放轴的颜色。
启用滚动缩放： 是否开启鼠标滚轮控制缩放轴功能。开启后，预览图表时无需拖动缩放轴，使用鼠标滚动即可进行缩放。
提示标签坐标轴提示器
用于开启鼠标提示时对应的坐标数据和指示线，开启后可进一步设置指示器类型、直线类型/颜色/宽度。
自定义属性
ECharts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。
自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。
窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。
示例
例如使用JS 代码自定义属性修改了柱状图的显示样式，预览效果如下：
具体代码如下，供您参考。
let dessert = []
let mp = []
let drink = []
let cates = []
let min = []
let total = []
option.xAxis.data.forEach(item => {
cates.push(item.value)
min.push(1)
})
option.series.forEach(item => {
if(item.name==='点心')
{
item.data.forEach(data => {
dessert.push(data.value)
})
}else if(item.name==='谷类麦片')
{
item.data.forEach(data => {
mp.push(data.value)
})
}else
{
item.data.forEach(data => {
drink.push(data.value)
})
}
})
dessert.forEach((item,index) => {
let tmp = item + mp[index]
total.push(tmp)
})
option.backgroundColor='#000E1A'
option.tooltip= {
trigger: 'axis',
borderColor: 'rgba(255,255,255,.3)',
backgroundColor: 'rgba(13,5,30,.6)',
textStyle: {
color: 'white',
},
borderWidth: 1,
padding: 5,
formatter: function (parms) {
var str =
'客户地区：' +
parms[0].axisValue +
'</br>' +
parms[0].marker +
'点心：' +
parms[0].value +
'</br>' +
parms[1].marker +
'谷类麦片：' +
parms[1].value +
'</br>' +
parms[2].marker +
'饮料:' +
parms[2].value;
return str;
},
}
option.axisPointer.show = true
option.textStyle= {
color: '#C9C9C9',
}
option.legend.selectedMode = false
option.xAxis = {
type: 'category',
data: cates,
axisLine: {
show: false,
lineStyle: {
color: '#B5B5B5',
},
},
axisTick: {
show: false,
},
axisLabel: {
margin: 20, //刻度标签与轴线之间的距离。
textStyle: {
fontFamily: 'Microsoft YaHei',
color: '#FFF',
},
fontSize: 25,
fontStyle: 'bold',
},
}
option.legend.textStyle= {
color: '#ffffff',
fontSize: 25,
}
option.grid = {
containLabel: true,
left: '10%',
top: '20%',
bottom: '10%',
right: '10%',
}
option.series = [
{
type: 'bar',
name: '点心',
data: dessert,
stack: 'food',
barMaxWidth: 'auto',
barWidth: 60,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#017ebb',
},
{
offset: 1,
color: '#06fbfe',
},
],
},
},
},
{
name: '谷类麦片',
type: 'bar',
data: mp,
stack: 'food',
barMaxWidth: 'auto',
barWidth: 60,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#fbc292',
},
{
offset: 1,
color: '#f06e91',
},
],
},
},
},
{
name: '饮料',
type: 'line',
data: drink,
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(255, 227, 168, 0)',
},
{
offset: 0.5,
color: 'rgba(255, 227, 168, 1)',
},
{
offset: 1,
color: 'rgba(255, 227, 168, 0)',
}
],
},
shadowColor: 'rgba(255, 120, 0,1)',
shadowBlur: 8,
},
areaStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgba(197, 106, 255, 0.6)',
},
{
offset: 0.6,
color: 'rgba(255, 120, 0, 0)',
}
],
}
},
},
},
},
{
data: min,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: 'diamond',
symbolOffset: [0, '50%'],
symbolSize: [60, 20],
zlevel: 2,
itemStyle: {
normal: {
color: '#06fbfe',
},
},
},
{
data: dessert,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [60, 20],
zlevel: 2,
},
{
data: dessert,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [60, 20],
zlevel: 2,
},
{
data: total,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [0, 20],
zlevel: 2,
},
{
data: dessert,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [60, 20],
zlevel: 2,
itemStyle: {
normal: {
color: '#06fbfe',
},
},
},
{
data: total,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [60, 20],
zlevel: 2,
itemStyle: {
normal: {
color: '#fbc292',
},
},
},
]
return option