ECharts 图表测试

```echarts {height-360}
{
  "tooltip": { "trigger": "axis" },
  "xAxis": {
    "type": "category",
    "data": ["2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2022", "2023", "2024", "2026"]
  },
  "yAxis": { "type": "value" },
  "series": [
    {
      "name": "文章数",
      "type": "bar",
      "data": [3, 3, 3, 10, 15, 10, 9, 8, 12, 10, 3, 7, 5, 9]
    }
  ]
}
```

```echarts {height-420}
{
  "title": { "text": "一周内容入口趋势", "left": "center", "top": 8 },
  "tooltip": { "trigger": "axis" },
  "legend": { "top": 44, "data": ["首页", "搜索", "标签", "RSS", "外链"] },
  "toolbox": {
    "right": 12,
    "feature": {
      "saveAsImage": { "title": "保存" },
      "dataZoom": { "title": { "zoom": "缩放", "back": "还原" } },
      "restore": { "title": "重置" }
    }
  },
  "grid": { "left": 42, "right": 24, "top": 92, "bottom": 36, "containLabel": true },
  "xAxis": {
    "type": "category",
    "boundaryGap": false,
    "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  "yAxis": { "type": "value" },
  "series": [
    { "name": "首页", "type": "line", "stack": "总量", "smooth": true, "areaStyle": {}, "data": [120, 132, 101, 134, 90, 230, 210] },
    { "name": "搜索", "type": "line", "stack": "总量", "smooth": true, "areaStyle": {}, "data": [220, 182, 191, 234, 290, 330, 310] },
    { "name": "标签", "type": "line", "stack": "总量", "smooth": true, "areaStyle": {}, "data": [150, 232, 201, 154, 190, 330, 410] },
    { "name": "RSS", "type": "line", "stack": "总量", "smooth": true, "areaStyle": {}, "data": [82, 93, 90, 93, 129, 133, 132] },
    { "name": "外链", "type": "line", "stack": "总量", "smooth": true, "areaStyle": {}, "data": [62, 72, 71, 74, 90, 93, 88] }
  ]
}
```

```echarts {height-320}
{
  "tooltip": { "trigger": "item" },
  "legend": { "bottom": 0 },
  "series": [
    {
      "name": "分类",
      "type": "pie",
      "radius": ["42%", "68%"],
      "center": ["50%", "45%"],
      "avoidLabelOverlap": true,
      "data": [
        { "name": "技术备忘", "value": 43 },
        { "name": "随笔感悟", "value": 28 },
        { "name": "生活点滴", "value": 12 },
        { "name": "博客相关", "value": 10 },
        { "name": "游戏娱乐", "value": 8 },
        { "name": "测试", "value": 5 }
      ]
    }
  ]
}
```

```echarts {height-420 js}
return {
  title: { text: "文章质量指标", left: "center", top: 8 },
  tooltip: { trigger: "axis" },
  legend: { top: 44 },
  dataset: {
    source: [
      ["月份", "发布", "修订", "评论", "平均阅读"],
      ["1月", 4, 7, 18, 420],
      ["2月", 3, 6, 12, 390],
      ["3月", 5, 10, 26, 560],
      ["4月", 2, 4, 10, 330],
      ["5月", 6, 13, 31, 680],
      ["6月", 8, 16, 44, 760]
    ]
  },
  grid: { left: 48, right: 56, top: 92, bottom: 42 },
  xAxis: { type: "category" },
  yAxis: [
    { type: "value", name: "数量" },
    { type: "value", name: "阅读", position: "right" }
  ],
  series: [
    { type: "bar", name: "发布" },
    { type: "bar", name: "修订" },
    { type: "bar", name: "评论" },
    {
      type: "line",
      name: "平均阅读",
      yAxisIndex: 1,
      smooth: true,
      symbolSize: 9,
      lineStyle: { width: 3 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(84, 112, 198, 0.28)" },
          { offset: 1, color: "rgba(84, 112, 198, 0.02)" }
        ])
      }
    }
  ]
};
```

```echarts {height-420 js}
(() => {
  const points = [
    ["技术备忘", 43, 18, 760],
    ["随笔感悟", 28, 30, 640],
    ["生活点滴", 12, 14, 380],
    ["博客相关", 10, 12, 420],
    ["游戏娱乐", 8, 9, 300],
    ["测试", 5, 6, 260]
  ];

  return {
    title: { text: "分类规模和互动", left: "center", top: 8 },
    tooltip: {
      formatter: (params) => {
        const item = params.data;
        return `${item[0]}<br>文章：${item[1]}<br>评论：${item[2]}<br>阅读：${item[3]}`;
      }
    },
    grid: { left: 52, right: 30, top: 72, bottom: 52 },
    xAxis: { name: "文章数", type: "value" },
    yAxis: { name: "评论数", type: "value" },
    visualMap: {
      min: 240,
      max: 800,
      dimension: 3,
      right: 8,
      top: 82,
      text: ["高阅读", "低阅读"],
      calculable: true
    },
    series: [
      {
        name: "分类",
        type: "scatter",
        symbolSize: (data) => Math.max(18, Math.sqrt(data[3]) * 2.2),
        data: points,
        label: { show: true, formatter: (params) => params.data[0], position: "top" },
        emphasis: { focus: "series" }
      }
    ]
  };
})()
```

```echarts {height-440 js}
return {
  title: [
    { text: "维护状态雷达", left: "24%", top: 10, textAlign: "center" },
    { text: "发布节奏", left: "75%", top: 10, textAlign: "center" }
  ],
  tooltip: {},
  radar: {
    center: ["26%", "55%"],
    radius: "58%",
    indicator: [
      { name: "内容完整", max: 100 },
      { name: "代码整洁", max: 100 },
      { name: "图片处理", max: 100 },
      { name: "移动适配", max: 100 },
      { name: "可维护性", max: 100 }
    ]
  },
  series: [
    {
      type: "radar",
      areaStyle: { opacity: 0.18 },
      data: [
        { name: "当前", value: [86, 78, 92, 84, 80] },
        { name: "目标", value: [92, 88, 96, 90, 88] }
      ]
    },
    {
      type: "gauge",
      center: ["75%", "58%"],
      radius: "68%",
      min: 0,
      max: 30,
      progress: { show: true, width: 12 },
      axisLine: { lineStyle: { width: 12 } },
      detail: { valueAnimation: true, formatter: "{value} 篇/月" },
      data: [{ value: 18, name: "近期峰值" }]
    }
  ]
};
```

```echarts {width-full height-360 js}
(() => {
  const dates = Array.from({ length: 42 }, (_, index) => `6-${String(index + 1).padStart(2, "0")}`);
  const values = dates.map((_, index) => Math.round(42 + Math.sin(index / 3) * 18 + index * 1.7));

  return {
    title: { text: "连续访问趋势", left: "center", top: 8 },
    tooltip: { trigger: "axis" },
    grid: { left: 48, right: 24, top: 64, bottom: 76 },
    xAxis: { type: "category", boundaryGap: false, data: dates },
    yAxis: { type: "value" },
    dataZoom: [
      { type: "inside", start: 35, end: 100 },
      { start: 35, end: 100, bottom: 20 }
    ],
    series: [
      {
        name: "访问",
        type: "line",
        smooth: true,
        symbol: "none",
        areaStyle: {},
        data: values
      }
    ]
  };
})()
```

```echarts {height-360 js async}
async () => {
  const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
  const hours = ["0", "4", "8", "12", "16", "20"];
  const data = await Promise.resolve(
    days.flatMap((day, dayIndex) =>
      hours.map((hour, hourIndex) => [
        hourIndex,
        dayIndex,
        Math.round((Math.sin(dayIndex + 1) + 1.4) * (hourIndex + 2) * 8)
      ])
    )
  );

  return {
    title: { text: "访问热力分布", left: "center", top: 8 },
    tooltip: {
      position: "top",
      formatter: (params) => `${days[params.value[1]]} ${hours[params.value[0]]}:00<br>${params.value[2]} 次`
    },
    grid: { top: 68, left: 48, right: 24, bottom: 46 },
    xAxis: { type: "category", data: hours.map((hour) => `${hour}:00`), splitArea: { show: true } },
    yAxis: { type: "category", data: days, splitArea: { show: true } },
    visualMap: {
      min: 0,
      max: 120,
      calculable: true,
      orient: "horizontal",
      left: "center",
      bottom: 8
    },
    series: [
      {
        name: "访问",
        type: "heatmap",
        data,
        label: { show: true },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.35)"
          }
        }
      }
    ]
  };
}
```

```echarts
{
  "tooltip": { "trigger": "axis" },
  "xAxis": {
    "type": "category",
    "data": ["A", "B", "C", "D", "E"]
  },
  "yAxis": { "type": "value" },
  "series": [
    {
      "type": "bar",
      "data": [10, 22, 16, 30, 18]
    }
  ]
}
```

```echarts {src=./monthly-visits.yaml height=360}
```

```echarts {src=./category-share.toml height=360}
```

```echarts {src=./dynamic-option.js height=360 js renderer=svg}
```

```echarts {width-600 height-360}
{
  "tooltip": { "trigger": "axis" },
  "xAxis": {
    "type": "category",
    "data": ["A", "B", "C", "D", "E", "F"]
  },
  "yAxis": { "type": "value" },
  "series": [
    {
      "type": "bar",
      "data": [5, 10, 15, 20, 25, 30]
    }
  ]
}
```