QXS-BNS

Appearance

本页导航

DataChart ​

qxs-data-chart 是 @qxs-bns/components 里的数据图表组件，面向宿主直接回填结构化数据，适合后台趋势图、占比图、表格看板和区域地图这类展示场景。

基础用法 ​

loading
ts
import '@qxs-bns/components/data-chart'

如果你已经全量引入：

ts
import '@qxs-bns/components'

使用说明 ​

loading
  • qxs-data-chart 的主数据入口是 data property，推荐由宿主直接维护。
  • showTypeName 决定主图表类型，常用值包括 table、bar、line、pie、area。
  • chartOptions 会在默认图表配置之后做深度合并，适合定制颜色、网格、平滑曲线等业务外观。
  • jsCodeSnippet 在 WC 版里只接受 JSON 对象字符串，不执行任意脚本。

常见场景 ​

loading

宿主接入示例 ​

loading

API ​

属性 ​

NameDescriptionTypeDefault
show-type-name图表类型'bar' | 'line' | 'pie' | 'table' | 'area' | 'funnel' | 'card' | 'radar' | 'scatter' | 'scatter-simple''table'
sub-show-type图表子类型string''
model-name图表标题string''
data图表数据。推荐通过 property 传入EChartData{ data: [], desc: ... }
chartOptions业务侧额外图表配置。推荐通过 property 传入EChartsOption{}
js-code-snippetJSON 对象字符串补丁，会在默认配置和 chartOptions 后合并string''
lazy-load是否等组件进入视口后再初始化图表；表格 / 卡片类型仍会立即渲染booleantrue
geo-json-url地图模式使用的 GeoJSON 地址string'/geo-data/china.json'

方法 ​

NameDescription
exportExal()导出当前数据为 spreadsheet 兼容的 CSV 文件
getMyChart()获取当前 ECharts 实例；表格 / 卡片类型时返回 null

CSS Parts ​

PartDescription
chart图表容器
table表格容器
card-list卡片列表容器
card-item单张卡片
placeholder空数据占位

常见问题 ​

为什么地图图表需要本地 geo 数据？ ​

qxs-data-chart 的地图模式默认会请求 /geo-data/china.json，这样可以避免第三方在线地图源在内网或受限环境里不可用。
如果你的部署目录不是站点根目录，可以通过 geo-json-url 指向业务自己的 GeoJSON 地址。

为什么 data 和 chartOptions 建议用 property，而不是字符串属性？ ​

因为它们本质上都是对象。
在 Vue / React / 原生 HTML 宿主里直接回填对象 property，既不用手动序列化，也更符合组件的实际使用方式。

相关文档 ​