{"_id":"@areslabs/data-charts-visualization","_rev":"3-90b3a83aaf33908d5aa2a2b0d2549fbe","name":"@areslabs/data-charts-visualization","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@areslabs/data-charts-visualization","version":"1.0.0","_id":"@areslabs/data-charts-visualization@1.0.0","maintainers":[{"name":"jameshen","email":"jameshen@gmail.com"},{"name":"ykforerlang","email":"1527997464@qq.com"},{"name":"yvettelau","email":"542783088@qq.com"},{"name":"areslabsbot","email":"332442181@qq.com"}],"bin":{"areslabs-data-charts":"dist/cli.js"},"dist":{"shasum":"b02ec5e8cdff8beae09dbff1204d97f650a36d6e","tarball":"https://registry.npmjs.org/@areslabs/data-charts-visualization/-/data-charts-visualization-1.0.0.tgz","fileCount":4,"integrity":"sha512-wElU6qGaAQjnEYLfWkf4bHMmb9fw3JbhP/Bg2b/Ewa/SE9D2Fc0yfag437B2hxBMHqpK3Gr72WYkPFM5A9nifw==","signatures":[{"sig":"MEYCIQC9SLKDtbj+OfvNWce+L2GWoIUP+QBH8uNCZw4BF+2hqwIhAKsbuioiT63sL8LXikCD4AhzCL2cbY84RHBTjPuxo38b","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1131653},"gitHead":"924f8d600e44c6f741e3504244d913b216baa79e","scripts":{"test":"node ./scripts/render_cli_preview_matrix.js","build":"node ./scripts/build.mjs","prepare":"npm run build","typecheck":"tsc --project tsconfig.json --noEmit"},"_npmUser":{"name":"ykforerlang","email":"1527997464@qq.com"},"_npmVersion":"10.9.4","description":"ECharts SSR chart rendering CLI","directories":{},"_nodeVersion":"22.22.0","dependencies":{"sharp":"0.34.5","echarts":"5.6.0"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28.0","typescript":"^5.9.3","@types/node":"^24.6.0"},"_npmOperationalInternal":{"tmp":"tmp/data-charts-visualization_1.0.0_1775548880888_0.8748084525286535","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@areslabs/data-charts-visualization","version":"1.0.1","_id":"@areslabs/data-charts-visualization@1.0.1","maintainers":[{"name":"jameshen","email":"jameshen@gmail.com"},{"name":"ykforerlang","email":"1527997464@qq.com"},{"name":"yvettelau","email":"542783088@qq.com"},{"name":"areslabsbot","email":"332442181@qq.com"}],"bin":{"areslabs-data-charts":"dist/cli.js"},"dist":{"shasum":"5f801e0e8001a46b726117ffe2b32568a989e19a","tarball":"https://registry.npmjs.org/@areslabs/data-charts-visualization/-/data-charts-visualization-1.0.1.tgz","fileCount":4,"integrity":"sha512-3utGrYbTDyxoCbO81Ac3Ns9+YHIeL6fyx4dO4qD4L3bbbRMymIfwvJFImEPUh3FDqA9L5HbnPqMYAt1DDaaGIg==","signatures":[{"sig":"MEYCIQD3hoOFp/eMvp50uVUynopvt4bhFtJaRxVPF1sYfXMGUAIhAOBiYotdFxF7cDzmexQY2154dc9DpU8P9O+VdC3Rag0N","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1135419},"gitHead":"0b7019b561cc7d5c2b9daa89feae2a8d4878bc6c","scripts":{"test":"node ./scripts/render_cli_preview_matrix.js","build":"node ./scripts/build.mjs","prepare":"npm run build","typecheck":"tsc --project tsconfig.json --noEmit"},"_npmUser":{"name":"ykforerlang","email":"1527997464@qq.com"},"_npmVersion":"10.9.4","description":"ECharts SSR chart rendering CLI","directories":{},"_nodeVersion":"22.22.0","dependencies":{"sharp":"0.34.5","echarts":"5.6.0"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28.0","typescript":"^5.9.3","@types/node":"^24.6.0"},"_npmOperationalInternal":{"tmp":"tmp/data-charts-visualization_1.0.1_1775665283895_0.821962638093588","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@areslabs/data-charts-visualization","version":"1.0.2","description":"ECharts SSR chart rendering CLI","bin":{"areslabs-data-charts":"dist/cli.js"},"scripts":{"build":"node ./scripts/build.mjs","test":"node ./scripts/render_cli_preview_matrix.js","typecheck":"tsc --project tsconfig.json --noEmit","prepare":"npm run build"},"dependencies":{"echarts":"5.6.0","sharp":"0.34.5"},"devDependencies":{"@types/node":"^24.6.0","esbuild":"^0.28.0","typescript":"^5.9.3"},"_id":"@areslabs/data-charts-visualization@1.0.2","gitHead":"cbbfb6a16ffc9849ad48d0d8e8c3456979bd89c8","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-v4B5HtCddC0xzdP9nBDhbiDyEIZpLhf2bcTYzyVn/xEbG0i83uwKtOO2ZaeOF1/TFI12IxPbYLAyQlml61mgRw==","shasum":"668aa7d4806f7150eb1765056ed96509edfb8a08","tarball":"https://registry.npmjs.org/@areslabs/data-charts-visualization/-/data-charts-visualization-1.0.2.tgz","fileCount":4,"unpackedSize":1135690,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEKtopPQBlnFtSuLjCEMi35AIyfnRl7W79wMfBoauduDAiEAyDbkDXW0f5cneonScRTSbPariEeq2+T0lBTPCMtZyX8="}]},"_npmUser":{"name":"ykforerlang","email":"1527997464@qq.com"},"directories":{},"maintainers":[{"name":"jameshen","email":"jameshen@gmail.com"},{"name":"ykforerlang","email":"1527997464@qq.com"},{"name":"yvettelau","email":"542783088@qq.com"},{"name":"areslabsbot","email":"332442181@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/data-charts-visualization_1.0.2_1775756127346_0.9828402524218358"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-07T08:01:20.793Z","modified":"2026-04-09T17:35:27.729Z","1.0.0":"2026-04-07T08:01:21.107Z","1.0.1":"2026-04-08T16:21:24.090Z","1.0.2":"2026-04-09T17:35:27.532Z"},"description":"ECharts SSR chart rendering CLI","maintainers":[{"name":"jameshen","email":"jameshen@gmail.com"},{"name":"ykforerlang","email":"1527997464@qq.com"},{"name":"yvettelau","email":"542783088@qq.com"},{"name":"areslabsbot","email":"332442181@qq.com"}],"readme":"# @areslabs/data-charts-visualization\n\n一个在 Node.js 环境中将 ECharts 渲染为 PNG 或 SVG 的命令行工具。\n\n## 安装与调用\n\n发布后推荐直接通过 `npx` 调用：\n\n```bash\nnpx -y @areslabs/data-charts-visualization@1.0.1 --help\n```\n\n包暴露的 bin 名称为：\n\n```bash\nareslabs-data-charts\n```\n\n## 用法\n\n```bash\nareslabs-data-charts --chart-type <type> (--data <json> | --data-file <file>) (--config <json> | --config-file <file>) [--variant <json>] [--width <px>] [--height <px>] [--out <dir|file>]\n```\n\n支持的图表类型：\n\n```text\nline, bar, pie, gauge, area, dualAxis, scatter, radar, funnel\n```\n\n## 参数说明\n\n- `--chart-type`：图表类型。\n- `--data`：图表数据，使用内联 JSON 传递。\n- `--data-file`：图表数据文件路径。\n- `--config`：完整 helper config，使用内联 JSON 传递。\n- `--config-file`：完整 helper config 文件路径。\n- `--variant`：一次性渲染策略，使用内联 JSON 传递。\n- `--width`：输出宽度，单位像素，默认 `650`。\n- `--height`：输出高度，单位像素，默认 `360`。\n- `--out`：输出目录或输出文件路径。默认写入系统临时目录下的 `areslabs-data-charts`。\n\n约束：\n\n- `--data` 和 `--data-file` 二选一，必须传一个。\n- `--config` 和 `--config-file` 二选一，必须传一个。\n- `--variant` 只支持内联 JSON，不支持文件。\n- `--config` 必须是完整配置对象，且同时包含 `common` 和 `specific`。\n\n## Payload 说明\n\nCLI 输入由三部分组成：\n\n- `data`：原始 ECharts 数据片段。\n- `config`：完整 helper config。\n- `variant`：一次性渲染策略。\n\n其中 `data` 和 `config` 必填，`variant` 可选。\n\n### Data 传递说明\n\n`--data` 和 `--data-file` 接收的都是原始 ECharts 数据片段。CLI 会把这份数据与生成出的基础 option 和样式配置合并后再渲染。\n\n常见顶层字段：\n\n- `series`：系列数组。\n- `xAxis`：x 轴配置或 x 轴数组。\n- `yAxis`：y 轴配置或 y 轴数组。\n- `dataset`：可选的 ECharts dataset。\n- `radar`：雷达图 indicator 配置。\n- 其他数据层需要的 ECharts option 片段。\n\n常见数据结构：\n\n折线图、柱状图、面积图：\n\n```json\n{\n  \"xAxis\": { \"data\": [\"Mon\", \"Tue\", \"Wed\"] },\n  \"yAxis\": {},\n  \"series\": [\n    { \"type\": \"line\", \"name\": \"Visits\", \"data\": [120, 132, 101] }\n  ]\n}\n```\n\n散点图：\n\n```json\n{\n  \"xAxis\": { \"type\": \"value\" },\n  \"yAxis\": { \"type\": \"value\" },\n  \"series\": [\n    { \"type\": \"scatter\", \"name\": \"North\", \"data\": [[10, 18], [14, 22], [18, 28]] }\n  ]\n}\n```\n\n饼图：\n\n```json\n{\n  \"series\": [\n    {\n      \"type\": \"pie\",\n      \"data\": [\n        { \"name\": \"A\", \"value\": 40 },\n        { \"name\": \"B\", \"value\": 60 }\n      ]\n    }\n  ]\n}\n```\n\n仪表盘：\n\n```json\n{\n  \"series\": [\n    {\n      \"type\": \"gauge\",\n      \"data\": [\n        { \"name\": \"Completion\", \"value\": 68 }\n      ]\n    }\n  ]\n}\n```\n\n双轴图：\n\n```json\n{\n  \"xAxis\": { \"data\": [\"Mon\", \"Tue\", \"Wed\"] },\n  \"yAxis\": [{ \"name\": \"Volume\" }, { \"name\": \"Rate\" }],\n  \"series\": [\n    { \"name\": \"Sales\", \"yAxisIndex\": 0, \"data\": [320, 332, 301] },\n    { \"name\": \"Rate\", \"yAxisIndex\": 1, \"data\": [10, 12, 9] }\n  ]\n}\n```\n\n雷达图：\n\n```json\n{\n  \"radar\": {\n    \"indicator\": [\n      { \"name\": \"Quality\", \"max\": 100 },\n      { \"name\": \"Speed\", \"max\": 100 }\n    ]\n  },\n  \"series\": [\n    {\n      \"type\": \"radar\",\n      \"data\": [\n        { \"name\": \"Team A\", \"value\": [90, 82] }\n      ]\n    }\n  ]\n}\n```\n\n漏斗图：\n\n```json\n{\n  \"series\": [\n    {\n      \"type\": \"funnel\",\n      \"data\": [\n        { \"name\": \"Visit\", \"value\": 100 },\n        { \"name\": \"Signup\", \"value\": 60 },\n        { \"name\": \"Pay\", \"value\": 20 }\n      ]\n    }\n  ]\n}\n```\n\n也支持 dataset 模式，例如：\n\n```json\n{\n  \"dataset\": {\n    \"source\": [\n      [\"day\", \"visits\", \"orders\"],\n      [\"Mon\", 120, 32],\n      [\"Tue\", 132, 41]\n    ]\n  },\n  \"xAxis\": { \"type\": \"category\" },\n  \"yAxis\": { \"type\": \"value\" },\n  \"series\": [\n    { \"type\": \"line\", \"name\": \"Visits\", \"encode\": { \"x\": \"day\", \"y\": \"visits\" } },\n    { \"type\": \"line\", \"name\": \"Orders\", \"encode\": { \"x\": \"day\", \"y\": \"orders\" } }\n  ]\n}\n```\n\n### Config 字段说明\n\n`--config` 和 `--config-file` 接收完整 helper config 对象：\n\n```json\n{\n  \"chartType\": \"line\",\n  \"common\": {},\n  \"specific\": {}\n}\n```\n\n约束：\n\n- `chartType` 可选，但如果传了，必须与 `--chart-type` 一致。\n- `common` 必填。\n- `specific` 必填。\n- CLI 将 `config` 视为完整载荷，不会再和默认配置做补丁合并。\n\n### `common`\n\n`common` 结构如下：\n\n```json\n{\n  \"title\": {\n    \"main\": {\n      \"show\": true,\n      \"align\": \"left\",\n      \"fontSize\": 18,\n      \"color\": \"#111827\",\n      \"bold\": true\n    },\n    \"subtitle\": {\n      \"show\": false,\n      \"fontSize\": 12,\n      \"color\": \"#6b7280\"\n    }\n  },\n  \"canvas\": {\n    \"backgroundColor\": \"#ffffff\",\n    \"palette\": [\"#5470c6\", \"#91cc75\"],\n    \"plotArea\": {\n      \"left\": \"6%\",\n      \"right\": \"6%\",\n      \"top\": \"12%\",\n      \"bottom\": \"6%\"\n    }\n  },\n  \"legend\": {\n    \"show\": true,\n    \"position\": \"top-right\",\n    \"orient\": \"horizontal\",\n    \"fontSize\": 12,\n    \"color\": \"#374151\"\n  },\n  \"axes\": {\n    \"x\": {\n      \"lineShow\": true,\n      \"tickShow\": true,\n      \"rotate\": 0,\n      \"labelFontSize\": 12,\n      \"labelColor\": \"#374151\",\n      \"lineColor\": \"#9ca3af\",\n      \"formatter\": \"{value}\"\n    },\n    \"y\": {\n      \"lineShow\": true,\n      \"tickShow\": true,\n      \"scale\": false,\n      \"labelFontSize\": 12,\n      \"labelColor\": \"#374151\",\n      \"lineColor\": \"#9ca3af\",\n      \"formatter\": \"{value}\"\n    }\n  },\n  \"splitLines\": {\n    \"horizontal\": {\n      \"show\": true,\n      \"color\": \"#e5e7eb\",\n      \"type\": \"dashed\",\n      \"width\": 1\n    },\n    \"vertical\": {\n      \"show\": false,\n      \"color\": \"#e5e7eb\",\n      \"type\": \"dashed\",\n      \"width\": 1\n    }\n  }\n}\n```\n\n标题文案不属于 `config.common.title`，应放在 `data.title.text` 和 `data.title.subtext` 中。\n\n`common.title.main`：\n\n- `show`\n- `text`\n- `align`\n- `fontSize`\n- `color`\n- `bold`\n\n`common.title.subtitle`：\n\n- `show`\n- `text`\n- `fontSize`\n- `color`\n\n`common.canvas`：\n\n- `backgroundColor`\n- `palette`：颜色数组\n- `plotArea.left`\n- `plotArea.right`\n- `plotArea.top`\n- `plotArea.bottom`\n\n`common.legend`：\n\n- `show`\n- `position`：`top-left`、`top-center`、`top-right`、`middle-left`、`middle-right`、`bottom-left`、`bottom-center`、`bottom-right`\n- `orient`：`horizontal` 或 `vertical`\n- `fontSize`\n- `color`\n\n`common.axes.x` 和 `common.axes.y`：\n\n- `lineShow`\n- `tickShow`\n- `scale`：仅 y 轴使用，默认 `false`\n- `rotate`：仅 x 轴使用\n- `labelFontSize`\n- `labelColor`\n- `lineColor`\n- `formatter`\n\n`common.splitLines.horizontal` 和 `common.splitLines.vertical`：\n\n- `show`\n- `color`\n- `type`：`solid`、`dashed`、`dotted`\n- `width`\n\n### `specific`\n\n`specific` 的字段依赖 `--chart-type`。\n\n`line`：\n\n- `line.smooth`\n- `line.showSymbol`\n- `line.connectNulls`\n- `line.symbol`\n- `line.symbolSize`\n- `line.lineStyleType`\n- `line.lineWidth`\n- `dataLabels.show`\n- `dataLabels.fontSize`\n- `dataLabels.color`\n\n`bar`：\n\n- `bar.barGap`\n- `bar.itemOpacity`\n- `bar.borderRadius`\n- `bar.borderWidth`\n- `bar.borderColor`\n- `dataLabels.show`\n- `dataLabels.position`\n- `dataLabels.fontSize`\n- `dataLabels.color`\n\n`area`：\n\n- `area.smooth`\n- `area.showSymbol`\n- `area.symbol`\n- `area.symbolSize`\n- `area.connectNulls`\n- `area.areaOpacity`\n- `area.areaFillMode`\n- `area.lineStyleType`\n- `area.lineWidth`\n- `dataLabels.show`\n- `dataLabels.fontSize`\n- `dataLabels.color`\n\n`scatter`：\n\n- `point.symbol`\n- `point.symbolSize`\n- `point.itemOpacity`\n- `point.borderWidth`\n- `point.borderColor`\n- `dataLabels.show`\n- `dataLabels.formatter`\n- `dataLabels.fontSize`\n- `dataLabels.color`\n\n`pie`：\n\n- `labelPosition`\n- `startAngle`\n- `showLabel`\n- `labelFontSize`\n- `labelColor`\n- `labelFormatter`\n- `labelLineShow`\n- `labelLineColor`\n- `labelLineWidth`\n- `itemOpacity`\n- `borderWidth`\n- `borderColor`\n\n`dualAxis`：\n\n- `leftAxis.labelFontSize`\n- `leftAxis.labelColor`\n- `leftAxis.lineShow`\n- `leftAxis.lineColor`\n- `leftAxis.tickShow`\n- `leftAxis.formatter`\n- `rightAxis.labelFontSize`\n- `rightAxis.labelColor`\n- `rightAxis.lineShow`\n- `rightAxis.lineColor`\n- `rightAxis.tickShow`\n- `rightAxis.formatter`\n- `leftBar.showLabel`\n- `leftBar.labelPosition`\n- `leftBar.labelFontSize`\n- `leftBar.labelColor`\n- `leftBar.opacity`\n- `leftBar.barGap`\n- `leftBar.borderRadius`\n- `leftBar.borderWidth`\n- `leftBar.borderColor`\n- `leftBar.colors`\n- `rightBar.showLabel`\n- `rightBar.labelPosition`\n- `rightBar.labelFontSize`\n- `rightBar.labelColor`\n- `rightBar.opacity`\n- `rightBar.barGap`\n- `rightBar.borderRadius`\n- `rightBar.borderWidth`\n- `rightBar.borderColor`\n- `rightBar.colors`\n- `leftLine.smooth`\n- `leftLine.area`\n- `leftLine.showSymbol`\n- `leftLine.connectNulls`\n- `leftLine.showLabel`\n- `leftLine.colors`\n- `leftLine.lineStyleType`\n- `leftLine.lineWidth`\n- `leftLine.symbol`\n- `leftLine.symbolSize`\n- `leftLine.labelFontSize`\n- `leftLine.labelColor`\n- `rightLine.smooth`\n- `rightLine.area`\n- `rightLine.showSymbol`\n- `rightLine.connectNulls`\n- `rightLine.showLabel`\n- `rightLine.colors`\n- `rightLine.lineStyleType`\n- `rightLine.lineWidth`\n- `rightLine.symbol`\n- `rightLine.symbolSize`\n- `rightLine.labelFontSize`\n- `rightLine.labelColor`\n\n`gauge`：\n\n- `startAngle`\n- `endAngle`\n- `progressShow`\n- `progressWidth`\n- `progressColor`\n- `axisWidth`\n- `bandStops`\n- `titleShow`\n- `titleFontSize`\n- `titleColor`\n- `detailShow`\n- `detailFormatter`\n- `detailFontSize`\n- `detailColor`\n- `axisLabelShow`\n- `axisLabelDistance`\n- `axisLabelFontSize`\n- `axisLabelColor`\n- `splitLineShow`\n- `splitLineLength`\n- `splitLineWidth`\n- `splitLineColor`\n- `axisTickShow`\n- `axisTickLength`\n- `axisTickWidth`\n- `axisTickColor`\n- `pointerShow`\n- `pointerWidth`\n- `pointerColor`\n- `anchorShow`\n- `anchorSize`\n- `anchorColor`\n\n`radar`：\n\n- `shape`\n- `splitNumber`\n- `showSymbol`\n- `showLabel`\n- `labelFormatter`\n- `areaOpacity`\n- `splitLineColor`\n- `splitLineWidth`\n- `splitLineType`\n- `axisLineColor`\n- `axisLineWidth`\n- `axisLineType`\n- `axisNameFontSize`\n- `axisNameColor`\n- `axisNameBold`\n- `symbol`\n- `symbolSize`\n- `lineStyleType`\n- `lineWidth`\n- `labelFontSize`\n- `labelColor`\n\n`funnel`：\n\n- `sort`\n- `gap`\n- `minSize`\n- `maxSize`\n- `itemOpacity`\n- `labelPosition`\n- `showLabel`\n- `labelFormatter`\n- `labelFontSize`\n- `labelColor`\n\n### Variant 完整说明\n\n`--variant` 是可选参数，只支持内联 JSON。\n\n它用于一次性渲染策略，不属于持久化 helper config 的一部分。适合临时预览策略，不适合替代正式配置文件。\n\n结构示例：\n\n```json\n{\n  \"stack\": true,\n  \"layout\": \"horizontal\",\n  \"pieMode\": \"donut\",\n  \"leftSeriesType\": \"bar\",\n  \"rightSeriesType\": \"line\"\n}\n```\n\n支持字段：\n\n- `stack`：布尔值\n- `layout`：`horizontal` 或 `vertical`\n- `pieMode`：`pie`、`donut`、`roseArea`、`roseRadius`\n- `leftSeriesType`：通常为 `bar` 或 `line`\n- `rightSeriesType`：通常为 `bar` 或 `line`\n\n按图表类型的生效范围：\n\n- `line`：支持 `stack`\n- `bar`：支持 `stack` 和 `layout`\n- `area`：支持 `stack`\n- `pie`：支持 `pieMode`\n- `dualAxis`：支持 `layout`、`leftSeriesType` 和 `rightSeriesType`\n- `gauge`、`scatter`、`radar`、`funnel`：当前没有消费任何 variant 字段\n\n优先级说明：\n\n- `variant` 不会替代 `config`\n- `variant` 只影响一次性的临时渲染策略\n- 对 `dualAxis` 来说，`variant.layout`、`variant.leftSeriesType` 和 `variant.rightSeriesType` 会覆盖本次渲染使用的双轴基础策略，但不会回写持久化配置\n- 对 `dualAxis` 来说，水平分割线显示轴仍来自持久化 `config.common.splitLines.horizontal.display`，只支持 `left`、`right`；如需隐藏，使用 `config.common.splitLines.horizontal.show = false`，不通过 `variant` 传递\n- 对柱状布局和堆叠预览来说，`variant` 只在本次渲染生效，不会回写到 helper config\n\n## 输出规则\n\n- 如果 `--out` 是以 `.png` 或 `.svg` 结尾的文件路径，则直接写到该文件。\n- 如果 `--out` 是目录路径，则在目录下生成带时间戳的 PNG 文件。\n- 如果不传 `--out`，则默认输出到系统临时目录。\n\n## 示例\n\n使用数据文件和配置文件渲染：\n\n```bash\nnpx -y @areslabs/data-charts-visualization@1.0.1 \\\n  --chart-type line \\\n  --data-file ./data/line.json \\\n  --config-file ./config/line_style.json \\\n  --out ./output/line.png\n```\n\n使用内联 JSON 渲染：\n\n```bash\nnpx -y @areslabs/data-charts-visualization@1.0.1 \\\n  --chart-type pie \\\n  --data '{\"series\":[{\"type\":\"pie\",\"data\":[{\"name\":\"A\",\"value\":40},{\"name\":\"B\",\"value\":60}]}]}' \\\n  --config '{\"common\":{\"title\":{\"main\":{\"show\":true,\"text\":\"Pie Demo\",\"align\":\"center\",\"fontSize\":18,\"color\":\"#111827\",\"bold\":true},\"subtitle\":{\"show\":false,\"text\":\"\",\"fontSize\":12,\"color\":\"#6b7280\"}},\"canvas\":{\"backgroundColor\":\"#ffffff\",\"palette\":[\"#5470c6\",\"#91cc75\"],\"plotArea\":{\"left\":\"6%\",\"right\":\"6%\",\"top\":\"12%\",\"bottom\":\"6%\"}},\"legend\":{\"show\":true,\"position\":\"bottom-center\",\"orient\":\"horizontal\",\"fontSize\":12,\"color\":\"#374151\"},\"axes\":{\"x\":{},\"y\":{}},\"splitLines\":{\"horizontal\":{},\"vertical\":{}}},\"specific\":{\"labelPosition\":\"outside\",\"startAngle\":90,\"showLabel\":true,\"labelFontSize\":11,\"labelColor\":\"#334155\",\"labelFormatter\":\"{b} {d}%\",\"labelLineShow\":true,\"labelLineColor\":\"#94a3b8\",\"labelLineWidth\":1,\"itemOpacity\":0.96,\"borderWidth\":0,\"borderColor\":\"#ffffff\"}}' \\\n  --out ./output/pie.svg\n```\n\n带一次性 variant 的渲染：\n\n```bash\nnpx -y @areslabs/data-charts-visualization@1.0.1 \\\n  --chart-type bar \\\n  --data-file ./data/bar.json \\\n  --config-file ./config/bar_style.json \\\n  --variant '{\"layout\":\"horizontal\",\"stack\":true}' \\\n  --out ./output/\n```\n\n双轴图临时指定左右系列类型：\n\n```bash\nnpx -y @areslabs/data-charts-visualization@1.0.1 \\\n  --chart-type dualAxis \\\n  --data-file ./data/dual-axis.json \\\n  --config-file ./config/dual_axis_style.json \\\n  --variant '{\"leftSeriesType\":\"bar\",\"rightSeriesType\":\"line\"}' \\\n  --out ./output/dual-axis.png\n```\n","readmeFilename":"README.zh.md"}