图表 Chart

<div style="display:grid;gap:16px;width:100%;max-width:720px">
<div class="xxd-chart-card">
  <div class="xxd-chart-card__head"><h3 class="xxd-chart-card__title">每天写入篇数</h3><span class="xxd-chart-card__meta">最近 14 天</span></div>
  <div class="xxd-chart" id="chart-line"></div>
</div>
<div class="xxd-chart-card">
  <div class="xxd-chart-card__head"><h3 class="xxd-chart-card__title">各插件用户</h3></div>
  <div class="xxd-chart" id="chart-bar" style="--chart-h:220px"></div>
</div>
</div>
<script>
  if (window.echarts) {
    const days = Array.from({ length: 14 }, (_, i) => `${i + 1}日`);
    const line = echarts.init(document.getElementById("chart-line"));
    const lineOpt = () => Xxd.chartOptions({ legend: {}, xAxis: { type: "category", data: days, boundaryGap: false }, yAxis: { type: "value" }, series: [{ name: "长文发布", type: "line", data: [42, 48, 45, 60, 58, 66, 71, 69, 80, 78, 85, 90, 88, 96] }, { name: "图片排序", type: "line", data: [20, 22, 25, 24, 28, 27, 30, 33, 31, 35, 34, 36, 38, 40] }] });
    line.setOption(lineOpt());
    Xxd.watchChartTheme(line, lineOpt);
    const bar = echarts.init(document.getElementById("chart-bar"));
    const barOpt = () => Xxd.chartOptions({ xAxis: { type: "category", data: ["长文发布", "排序链接", "批量存图", "今日待办"] }, yAxis: { type: "value" }, series: [{ type: "bar", data: [2410, 830, 5102, 312] }] });
    bar.setOption(barOpt());
    Xxd.watchChartTheme(bar, barOpt);
    new ResizeObserver(() => { line.resize(); bar.resize(); }).observe(document.getElementById("chart-line").parentElement.parentElement);
  }
</script>

export function ChartDemo() {
  const [echarts, setEcharts] = useState<typeof import("echarts") | null>(null);
  const [, bump] = useState(0);
  useEffect(() => {
    import("echarts").then(setEcharts);
    // 切主题 / 主色时重新取令牌
    const mo = new MutationObserver(() => bump((n) => n + 1));
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "data-accent", "style"] });
    return () => mo.disconnect();
  }, []);
  if (!echarts) return <div className="xxd-chart" />;
  const days = Array.from({ length: 14 }, (_, i) => `${i + 1}日`);
  const options = chartOptions({
    legend: {},
    xAxis: { type: "category", data: days, boundaryGap: false },
    yAxis: { type: "value" },
    series: [
      { name: "长文发布", type: "line", data: [42, 48, 45, 60, 58, 66, 71, 69, 80, 78, 85, 90, 88, 96] },
      { name: "图片排序", type: "line", data: [20, 22, 25, 24, 28, 27, 30, 33, 31, 35, 34, 36, 38, 40] },
    ],
  });
  return (
    <div className="xxd-chart-card" style={{ width: "100%", maxWidth: 720 }}>
      <div className="xxd-chart-card__head"><h3 className="xxd-chart-card__title">每天写入篇数</h3><span className="xxd-chart-card__meta">Kumo &lt;Chart&gt; + Xxd.chartOptions</span></div>
      <Chart echarts={echarts as never} options={options as never} height={260} />
    </div>
  );
}