const colors = ['#5378EE', '#FA6400', '#F7B500'];
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
var relVal = params[0].name + '<br/>';
relVal += params[0].seriesName + ':' + Math.abs(params[0].value) + '元' + '<br/>';
relVal += params[1].seriesName + ':' + Math.abs(params[1].value) + '元' + '<br/>';
relVal += params[2].seriesName + ':' + Math.abs(params[2].value) + '元' + '<br/>';
return relVal; //负数取绝对值变正数
},
},
grid: {
right: '20%',
bottom:'20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['收入金额', '支出金额', '差额'],
right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
bottom: "20px"
},
dataZoom: [
{
type: 'inside', //无滑动条内置缩放 type: 'slider', //缩放滑动条
filterMode: 'filter',
xAxisIndex: [0], //X轴滑动
start: 1,
end: 100,
},
],
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
show: true,
onZero: false
},
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
}
],
yAxis: [
{
type: 'value',
position: 'left',
},
],
series: [
{
name: '收入金额',
type: 'bar',
stack: '总量',
yAxisIndex: 0,
data: [
1,10,20,30,40, 1,10,20,30,40
]
},
{
name: '支出金额',
type: 'bar',
stack: '总量',
yAxisIndex: 0,
data: [
-2,-20,-25,-35,-45,-2,-20,-25,-35,-45
]
},
{
name: '差额',
type: 'bar',
yAxisIndex: 0,
data: [
-1,-10,-5,-5,-5, -1,-10,-5,-5,-5
]
},
]
};