73 lines
3.0 KiB
JavaScript
73 lines
3.0 KiB
JavaScript
import { compactMoneyAxis, moneyMajor } from "../../utils/format.js";
|
|
import { niceAxis } from "./createMetricTrendOption.js";
|
|
|
|
export function createReportRevenueOption(series) {
|
|
const labels = series.map((item) => item.label);
|
|
const channelValues = series.map((item) => moneyMajor(item.google) + moneyMajor(item.mifapay) + moneyMajor(item.coin_seller));
|
|
const totalValues = series.map((item) => moneyMajor(item.lineTotal ?? item.total));
|
|
const channelAxis = niceAxis(channelValues);
|
|
const totalAxis = niceAxis(totalValues);
|
|
|
|
return {
|
|
animationDuration: 520,
|
|
color: ["#1688d9", "#18a389", "#6377e8", "#172033"],
|
|
grid: { bottom: 30, left: 54, right: 54, top: 42 },
|
|
legend: [
|
|
{ data: ["Google", "MifaPay", "币商"], icon: "roundRect", itemGap: 16, itemHeight: 8, itemWidth: 12, left: 18, textStyle: { color: "#5f6f86", fontSize: 12 }, top: 0 },
|
|
{ data: ["总计 (USD)"], itemGap: 8, itemHeight: 8, itemWidth: 18, right: 18, textStyle: { color: "#172033", fontSize: 12 }, top: 0 }
|
|
],
|
|
tooltip: {
|
|
backgroundColor: "#ffffff",
|
|
borderColor: "#d8e2ed",
|
|
extraCssText: "box-shadow: 0 14px 34px rgba(15, 23, 42, .14);",
|
|
textStyle: { color: "#172033" },
|
|
trigger: "axis"
|
|
},
|
|
xAxis: {
|
|
axisLabel: { color: "#6b7a90", margin: 10 },
|
|
axisLine: { lineStyle: { color: "#dbe5ef" } },
|
|
axisTick: { show: false },
|
|
boundaryGap: true,
|
|
data: labels,
|
|
type: "category"
|
|
},
|
|
yAxis: [
|
|
{
|
|
axisLabel: { color: "#6b7a90", formatter: compactMoneyAxis },
|
|
axisTick: { show: false },
|
|
interval: channelAxis.interval,
|
|
max: channelAxis.max,
|
|
min: 0,
|
|
splitLine: { lineStyle: { color: "rgba(104, 123, 148, 0.16)", type: "dashed" } },
|
|
type: "value"
|
|
},
|
|
{
|
|
axisLabel: { color: "#6b7a90", formatter: compactMoneyAxis },
|
|
axisTick: { show: false },
|
|
interval: totalAxis.interval,
|
|
max: totalAxis.max,
|
|
min: 0,
|
|
splitLine: { show: false },
|
|
type: "value"
|
|
}
|
|
],
|
|
series: [
|
|
{ barGap: "-100%", barWidth: 26, data: series.map((item) => moneyMajor(item.google)), emphasis: { focus: "series" }, name: "Google", stack: "recharge", type: "bar" },
|
|
{ barWidth: 26, data: series.map((item) => moneyMajor(item.mifapay)), emphasis: { focus: "series" }, name: "MifaPay", stack: "recharge", type: "bar" },
|
|
{ barWidth: 26, data: series.map((item) => moneyMajor(item.coin_seller)), emphasis: { focus: "series" }, name: "币商", stack: "recharge", type: "bar" },
|
|
{
|
|
data: series.map((item) => moneyMajor(item.lineTotal ?? item.total)),
|
|
lineStyle: { color: "#172033", shadowBlur: 8, shadowColor: "rgba(23, 32, 51, .14)", width: 3 },
|
|
name: "总计 (USD)",
|
|
smooth: 0.42,
|
|
symbol: "circle",
|
|
symbolSize: 7,
|
|
itemStyle: { borderColor: "#ffffff", borderWidth: 2, color: "#172033" },
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
z: 4
|
|
}
|
|
]
|
|
};
|
|
}
|