1. 概述
1.1 版本
报表服务器版本 | 插件版本 |
---|---|
11.0 | 1.0.5 |
1.2 应用场景
本文将使用 ECharts 图表引用模板数据集制作一个堆积瀑布图:
第一节点显示年初,中间显示每月变化,最终节点显示合计值。效果如下图所示:
2. 示例
2.1 新建模板
1)新建普通报表。
2)准备数据:本示例使用测试数据,仅展示数据结构,具体可以自己实现。
3)插入图表:选中A1单元格,调整宽高。点击插入图表,选择「ECharts图表」。
2.2 编辑代码
选中图表,点击「单元格元素>配置>代码编辑器」,输入代码。
代码如下所示:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
data: ['确定性投资', '潜在性投资','调整']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
},
xAxis: {
type: 'category',
data: ['年度', '1', '2', '3', '4', '5', '6','7','8','9','10','11','12','合计'],
splitLine: {
show: false
},
// 坐标轴刻度
axisTick: {
show: false,
},
},
series: [
{
name: '占位',
//图表类型为柱形
type: 'bar',
// 堆积为total
stack: 'total',
itemStyle: {
normal: {
// 透明设置
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
label: {
show: false
},
emphasis: {
focus: 'series',
itemStyle:{
barBorderColor:"rgba(0,0,0,0)",
}
},
data: [0,29585,29585,29585,31234,32141,33181,34002,34002,34002,34002,34002,34002,0]
},
{
name: '确定性投资',
type: 'bar',
// 堆积为total
stack: 'total',
itemStyle: {
normal: {
barBorderColor: '#0075be',
color: '#0075be'
},
emphasis: {
barBorderColor: '#0075be',
color: '#0075be'
}
},
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [9983,,,,,,,,,,,,,16467]
},
{
name: '潜在性投资',
type: 'bar',
stack: 'total',
label: {
show: true
},
itemStyle: {
normal: {
barBorderColor: '#71af3a',
color: '#71af3a'
},
emphasis: {
barBorderColor: '#71af3a',
color: '#71af3a'
}
},
emphasis: {
focus: 'series'
},
data: [19602,,,,,,,,,,,,,16066]
},
{
name: '调整',
type: 'bar',
stack: 'total',
label: {
show: true,
position: 'top'
},
itemStyle: {
normal: {
barBorderColor: '#87cfe6',
color: '#87cfe6'
},
emphasis: {
barBorderColor: '#87cfe6',
color: '#87cfe6'
}
},
emphasis: {
focus: 'series'
},
data: [,,,1649,907,1040,821,,,,,,,]
}
]
};
2.3 效果预览
运行效果如下图所示:
3. 模板下载
点击下载模板:Echarts实现堆积瀑布图.cpt