z-chart

<z-chart type="line" title="Weekly Active Users" width="620" height="260">
  <z-chart-axis position="bottom" type="category" title="Week"></z-chart-axis>
  <z-chart-axis position="left" type="value"></z-chart-axis>
  <z-chart-series name="Desktop"></z-chart-series>
  <z-chart-series name="Mobile"></z-chart-series>
</z-chart>
// 数字数组也可直接作为 series.data：
series.data = [12, 18, 16, 24, 22, 30, 28, 36];

<z-chart type="area" title="Downloads" width="620" height="260">
  <z-chart-series name="App Store"></z-chart-series>
  <z-chart-series name="Google Play"></z-chart-series>
</z-chart>
// 不写 z-chart-axis 时自动生成分类 x 轴与数值 y 轴

<z-chart type="pie" title="Traffic Sources" width="340" height="300">
  <z-chart-series name="Traffic"></z-chart-series>
</z-chart>
// 饼图仅支持 SVG 渲染（renderer="canvas" 自动回退）
series.data = [{ label: "Organic", value: 45 }, { label: "Paid", value: 25 }];

<z-chart type="donut" title="Budget Allocation" width="340" height="300">
  <z-chart-series name="Budget"></z-chart-series>
</z-chart>
// type="donut" 时中心显示合计；环形图仅支持 SVG 渲染（canvas 自动回退）
series.data = [{ label: "Engineering", value: 320 }, { label: "Marketing", value: 180 }];

<z-chart type="radar" title="Store Profile: Binjiang vs Region Average" width="440" height="360">
  <z-chart-series name="滨江店"></z-chart-series>
  <z-chart-series name="区域均值"></z-chart-series>
</z-chart>
// 每个系列一组 {label, value}；label 即轴名，各系列顺序必须一致
shop.data = [{ label: "营业额", value: 128000 }, { label: "出杯量", value: 820 }, { label: "客单价", value: 32.5 }, { label: "实收率", value: 0.86 }, { label: "复购率", value: 0.42 }, { label: "达成率", value: 1.08 }];
// 逐轴归一：每根轴的分母是「所有系列在该轴上的最大值」→ 顶点越靠外 = 该轴越强
// 系列必须是同一指标的不同主体（本店 vs 区域均值）；销售额与订单数混在一张雷达里，小的会被压到圆心

<z-chart type="radar" title="Store Inspection Score" width="400" height="340">
  <z-chart-series name="巡检得分"></z-chart-series>
</z-chart>
// 单系列：分母取「全图最大值」（此处 92）—— 最外圈是它，不是满分 100
series.data = [{ label: "服务", value: 92 }, { label: "出杯速度", value: 78 }, { label: "卫生", value: 85 }, { label: "陈列", value: 66 }, { label: "客诉处理", value: 88 }];

<z-chart type="sparkline" title="CPU %" width="280" height="48" legend="false" show-grid="false">
  <z-chart-series name="CPU"></z-chart-series>
</z-chart>
// 迷你图默认高度 48px，单系列折线 + 渐变填充
series.data = [22, 18, 25, 30, 28, 35, 32, 40];

<z-chart type="sparkline" title="Latency (ms)" width="280" height="48" legend="false" show-grid="false">
  <z-chart-series name="Latency"></z-chart-series>
</z-chart>
// 迷你图只画单系列，适合 CPU/延迟等指标监控
series.data = [120, 95, 110, 88, 130, 105, 92, 118];

<z-chart type="map" title="Regional Sales" width="620" height="360"></z-chart>
// geojson / values 是 DOM property（attribute 不生效），需 JS 设置：
chart.geojson = { type: "FeatureCollection", features: [...] };
chart.values = { north: 1200, east: 3400, south: 2100, west: 980, center: 2600 };