# 图表 Chart

分类：展示

ECharts + Xxd.chartOptions()：一条重点线用主色，其余是墨色的深浅；发丝网格线；切主题、主色自动重画。也能直接喂给 Kumo 的 <Chart options>。

## 示例
```html
<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>
```

## 属性与类名
- 类名：`xxd-chart` `xxd-chart-card` `xxd-chart-card__head` `xxd-chart-card__title` `xxd-chart-card__meta`

## JS
```js
chart.setOption(Xxd.chartOptions(option))
Xxd.watchChartTheme(chart, () => Xxd.chartOptions(option))
// React：<Chart echarts={echarts} options={Xxd.chartOptions(option)} />
```

## 键盘与读屏
- 图表旁边要有一句话结论或一张表；颜色之外，线宽也区分重点线。