We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
用于提供创建 svg、自适应图表大小等配置, 继承于 View,有着 View 的 api 职责:创建 容器 计算大小、resize 重新计算、初始化默认 interaction
用于提供创建 svg、自适应图表大小等配置, 继承于 View,有着 View 的 api
职责:创建 容器 计算大小、resize 重新计算、初始化默认 interaction
插件化 最小打包、用户自定义 options reactive next tick web component 优劣 组件通讯 event ? view 桥梁?
插件化 最小打包、用户自定义
options reactive next tick
web component 优劣
组件通讯 event ? view 桥梁?
插件化 prototype 方式实现 immutable 会 clone() 实现, mutable 重写 set 等方法
插件化 prototype 方式实现
prototype
immutable 会 clone() 实现, mutable 重写 set 等方法
dayjs.extend = (plugin, option) => { plugin(option, Dayjs, dayjs) return dayjs } // badMutable export default (o, c) => { const proto = c.rtotype proto.set = function (string, int) { return this.$set(string, int) } } // index.js class Dayjs { set(string, int) { return this.clone().$set(string, int) }
alauda-chart ├─ src │ ├─ chart │ │ ├─ index.ts │ │ └─ view.ts │ ├─ components // 组件 title legend tooltip shape.... | │ ├─ annotation // 辅助组件 line text 阀值线标尺等 | │ ├─ axis // 坐标 | │ ├─ base // abstract component 抽象类 | │ ├─ index // 负责组件的注册、删除、获取等 | │ ├─ title | │ ├─ legend // 图例 | │ ├─ shape // 图形 └─ tooltip // 工具提示 │ ├─ interactions // 交互类 | │ ├─ index.ts │ ├─ themme // 主题 │ ├─ utils // 工具 │ │ ├─ constant.ts // 常量 │ │ ├─ util.ts // 工具 │ ├─ event-emitter.ts // 事件绑定类 async event! │ ├─ index.ts // 入口文件-- 导出chart相关 及 注册(组件、事件等) └─
组件、interaction 等都通过 register 方式加载 默认会注册一些组件
组件、interaction 等都通过 register 方式加载
默认会注册一些组件
title
legend
axis
shape // line area bar pie point 注册方式
tooltip
web-component 方式
<chart option={option} data={data} > <view option={option}> <line></line> <area></area> </view> <title></title> <legend></legend> <axis></axis> <tooltip></tooltip> </chart>
interface ChartOption { // 绘制的 DOM 可以是 DOM select 也可以是 DOM 实例 container: string | HTMLElement; // 图表宽高度 不设置默认根据父容器高度自适应 width?: number; height?: number; // 图表内边距 上 右 下 左 padding?: number[]; // 默认交互 ['tooltip', 'legend-filter', 'legend-active'] defaultInteractions?: string[]; // 图表组件等相关的配置。同时支持配置式 和 声明式 options: Options; } interface Options { axis?: Axis; legend: Legend; scale: Scale; // .... }
会议纪要
使用 web component 实现
合并 changeData data data 内置 nextTick (vue nextTick 可否直接使用)
event-emitter 可使用第三方 async event 或者 web component 原生的
插件化:不使用 prototype 实现
reactive: chart 默认手动更新, data 支持 reactive 方式,内置 nextTick
数据变更 => watcher push 事件队列 => 下一次事件触发 => 清空队列
IE 不兼容 有 polyfills 但一些样式 css 无效 不考虑 ie
已经成熟
避免二次包装
nextTick
web component attr string property 传入参数只支持 string
attr text-offset 将 option 拍平以 xx-xx-xx 格式定义 (array 还是有问题)
框架内 自定义属性 例如 vue 的 :data="data" (提供序列化方式)
不使用 web component (在调研一段事件看是否有好的方式解决)
evemt emmit
插件化
组件通讯
The text was updated successfully, but these errors were encountered:
zChanges
No branches or pull requests
Chart
调研点
dayjs 插件化、 immutable
结构
Core
title
legend
axis
shape // line area bar pie point 注册方式
tooltip
Api
创建图表对象
Option
必要的
Todo
nextTick 默认先支持手动 render 后面在支持实时更新会议纪要
使用 web component 实现
合并 changeData data data 内置 nextTick (vue nextTick 可否直接使用)
event-emitter 可使用第三方 async event 或者 web component 原生的
结论
插件化:不使用 prototype 实现
reactive: chart 默认手动更新, data 支持 reactive 方式,内置 nextTick
nextTick
web-component
已经成熟
避免二次包装
讨论点
nextTick
web component attr string property 传入参数只支持 string
attr text-offset 将 option 拍平以 xx-xx-xx 格式定义 (array 还是有问题)
框架内 自定义属性 例如 vue 的 :data="data" (提供序列化方式)
不使用 web component (在调研一段事件看是否有好的方式解决)
evemt emmit
插件化
组件通讯
The text was updated successfully, but these errors were encountered: