option = title text Accumulated Waterfall Chart tooltip trigger axis axisPointer type shadow formatter function params let tar; if params1 && params1value !== -
要在Expenses的数据上方显示markPoint,可以在series中的Expenses的配置中添加markPoint属性。markPoint中的data属性可以设置markPoint的位置和样式。
以下是修改后的代码:
option = {
title: {
text: 'Accumulated Waterfall Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let tar;
if (params[1] && params[1].value !== '-') {
tar = params[1];
} else {
tar = params[2];
}
return tar && tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
legend: {
data: ['Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: (function () {
let list = [];
for (let i = 1; i <= 11; i++) {
list.push('Nov ' + i);
}
return list;
})()
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'top'
},
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'bottom'
},
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
markPoint: {
data: [
{
name: '位置',
symbol: 'pin',
symbolSize: 20,
coord: ['Nov 4', 108]
},
{
name: '位置',
symbol: 'pin',
symbolSize: 20,
coord: ['Nov 5', 154]
},
{
name: '位置',
symbol: 'pin',
symbolSize: 20,
coord: ['Nov 10', 361]
},
{
name: '位置',
symbol: 'pin',
symbolSize: 20,
coord: ['Nov 11', 203]
}
]
}
}
]
};
在Expenses的配置中添加了markPoint属性,并在markPoint的data属性中设置了四个markPoint的位置和样式。coord属性可以设置markPoint的位置,其中'Nov 4'、'Nov 5'、'Nov 10'和'Nov 11'是x轴的坐标,108、154、361和203是y轴的坐标。
通过设置symbol属性为'pin',可以设置markPoint的图标样式为定位图标。
通过设置symbolSize属性,可以设置markPoint的图标大小。
这样,Expenses的数据上方就会显示markPoint,由文字“位置”图标“定位”组成
原文地址: https://www.cveoy.top/t/topic/iRP5 著作权归作者所有。请勿转载和采集!