return {
dataset: {
source: ctx.data.objects.reverse()
},
title: {
text: "Monthly Sales Trend",
subtext: "Last 12 Months",
left: "center"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
legend: {
data: ["Revenue", "Order Count", "Avg Order Value"],
bottom: 0
},
grid: {
left: "5%",
right: "5%",
bottom: "60",
top: "80",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
axisLabel: {
rotate: 45
}
},
yAxis: [
{
type: "value",
name: "Amount(¥)",
position: "left",
axisLabel: {
formatter: (value) => {
return (value/10000).toFixed(0) + '0k';
}
}
},
{
type: "value",
name: "Order Count",
position: "right"
}
],
series: [
{
name: "Revenue",
type: "line",
smooth: true,
encode: {
x: "month",
y: "monthly_revenue"
},
areaStyle: {
opacity: 0.3
},
itemStyle: {
color: "#5470c6"
}
},
{
name: "Order Count",
type: "bar",
yAxisIndex: 1,
encode: {
x: "month",
y: "order_count"
},
itemStyle: {
color: "#91cc75",
opacity: 0.6
}
},
{
name: "Avg Order Value",
type: "line",
encode: {
x: "month",
y: "avg_order_value"
},
itemStyle: {
color: "#fac858"
},
lineStyle: {
type: "dashed"
}
}
]
}