43 lines
2.7 KiB
JavaScript
43 lines
2.7 KiB
JavaScript
import { compactMoneyAxis, moneyMajor } from "../../utils/format.js";
|
|
import { niceAxis } from "./createMetricTrendOption.js";
|
|
|
|
export function createRevenueOption(series) {
|
|
const labels = series.map((item) => item.label);
|
|
const leftValues = series.map((item) => moneyMajor(item.google) + moneyMajor(item.mifapay) + moneyMajor(item.coin_seller));
|
|
const rightValues = series.map((item) => moneyMajor(item.lineTotal ?? item.total));
|
|
const leftAxis = niceAxis(leftValues);
|
|
const rightAxis = niceAxis(rightValues);
|
|
return {
|
|
animationDuration: 650,
|
|
color: ["#1bd8f2", "#20c9aa", "#4f8cff", "#f2f6ff"],
|
|
grid: { bottom: 30, left: 54, right: 54, top: 44 },
|
|
legend: [
|
|
{ data: ["Google", "MifaPay", "币商"], icon: "roundRect", itemGap: 16, itemHeight: 8, itemWidth: 12, left: 22, textStyle: { color: "#a8bdd8", fontSize: 12 }, top: 1 },
|
|
{ data: ["总计 (USD)"], itemGap: 8, itemHeight: 8, itemWidth: 18, right: 18, textStyle: { color: "#d8e8f8", fontSize: 12 }, top: 1 }
|
|
],
|
|
tooltip: { backgroundColor: "#08243a", borderColor: "#1a5f82", extraCssText: "box-shadow: 0 10px 26px rgba(0,0,0,.32);", textStyle: { color: "#e9f6ff" }, trigger: "axis" },
|
|
xAxis: { axisLabel: { color: "#90a8c4", margin: 10 }, axisLine: { lineStyle: { color: "#1a3a56" } }, axisTick: { show: false }, boundaryGap: true, data: labels, type: "category" },
|
|
yAxis: [
|
|
{ axisLabel: { color: "#90a8c4", formatter: compactMoneyAxis }, axisTick: { show: false }, interval: leftAxis.interval, max: leftAxis.max, min: 0, splitLine: { lineStyle: { color: "rgba(111, 166, 212, 0.16)", type: "dashed" } }, type: "value" },
|
|
{ axisLabel: { color: "#90a8c4", formatter: compactMoneyAxis }, axisTick: { show: false }, interval: rightAxis.interval, max: rightAxis.max, min: 0, splitLine: { show: false }, type: "value" }
|
|
],
|
|
series: [
|
|
{ barGap: "-100%", barWidth: 28, data: series.map((item) => moneyMajor(item.google)), emphasis: { focus: "series" }, name: "Google", stack: "recharge", type: "bar" },
|
|
{ barWidth: 28, data: series.map((item) => moneyMajor(item.mifapay)), emphasis: { focus: "series" }, name: "MifaPay", stack: "recharge", type: "bar" },
|
|
{ barWidth: 28, 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: "#f2f6ff", shadowBlur: 10, shadowColor: "rgba(242,246,255,.42)", width: 3 },
|
|
name: "总计 (USD)",
|
|
smooth: 0.42,
|
|
symbol: "circle",
|
|
symbolSize: 7,
|
|
itemStyle: { borderColor: "#f2f6ff", borderWidth: 2, color: "#f2f6ff" },
|
|
type: "line",
|
|
yAxisIndex: 1,
|
|
z: 4
|
|
}
|
|
]
|
|
};
|
|
}
|