├── .eslintrc ├── .gitignore ├── README.md ├── app.acss ├── app.js ├── app.json ├── components ├── area │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── bubble │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── column │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── k │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── line │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── mixins │ └── methods.js ├── pie │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── radar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── rose │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── scatter │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── timeshare │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json └── util.js ├── examples ├── area │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── bar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── bubble │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── column │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── dodge-area │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── dodge-bar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── dodge │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── img │ ├── area.png │ ├── bar.png │ ├── bubble.png │ ├── column.png │ ├── dodge-area.png │ ├── dodge-bar.png │ ├── dodge.png │ ├── double-axis.png │ ├── gauge.png │ ├── k.png │ ├── labelline-pie.png │ ├── line.png │ ├── pie.png │ ├── radar.png │ ├── radial-bar.png │ ├── ring.png │ ├── rose.png │ ├── scatter.png │ ├── stack-area.png │ ├── stack-bar.png │ ├── stack-column.png │ └── timeshare.png ├── index │ ├── index.acss │ ├── index.axml │ └── index.js ├── k │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── labelline-pie │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── line │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── pie │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── radar-fund │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── radar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── radial-bar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── ring │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── rose │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── scatter │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── stack-area │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── stack-bar │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── stack-column │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json └── timeshare │ ├── index.acss │ ├── index.axml │ ├── index.js │ └── index.json ├── package.json └── scripts └── compiler.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-ali", 3 | "globals": { 4 | "my": true, 5 | "App": true, 6 | "Component": true, 7 | "Page": true 8 | }, 9 | "rules": {} 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.log 3 | .idea 4 | .entry 5 | .ipr 6 | .iws 7 | *~ 8 | ~* 9 | *.diff 10 | *.patch 11 | *.bak 12 | .DS_Store 13 | Thumbs.db 14 | .project 15 | .*proj 16 | .svn 17 | *.swp 18 | *.swo 19 | *.pyc 20 | *.pyo 21 | node_modules 22 | .cache 23 | .vscode 24 | *.xcworkspace 25 | yarn.lock 26 | .tea 27 | .entry 28 | /build/ 29 | /lib/ 30 | /es/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mini-chart 2 | 小程序图表库 3 | 4 | ## 使用方法（line举例） 5 | 6 | #### 结构一览 7 | 8 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*UMFlQqDZLwsAAAAAAAAAAABjARQnAQ) 9 | 10 | #### json引入组件 11 | 12 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*tNvnT71PHJIAAAAAAAAAAABjARQnAQ) 13 | 14 | #### axml使用组件 15 | 16 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*q1AbSbiOKp4AAAAAAAAAAABjARQnAQ) 17 | 18 | #### js传入数据 19 | 20 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*W2EmQLMf3tQAAAAAAAAAAABjARQnAQ) 21 | 22 | ## line 线图 23 | 24 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*AN4SRahZ23oAAAAAAAAAAABjARQnAQ) 25 | 26 | ### API 27 | 28 | #### `categories`: Array\ 29 | 30 | x坐标列表，等同全部数据的宽度。 31 | 32 | #### `series`: Array\ 33 | 34 | 线的数据，可以为多条线。如果只有一条线，整体也应该是个数组。 35 | 36 | * data: Array\ 线的数据，一般等同`categories`的长度，空缺则线段不连接不绘。 37 | * type: String 一条线的标识名称，多条时确保不冲突。 38 | * style: String 线的种类，可以取值`dash`虚线和`smooth`曲线，默认直接。 39 | * color: String 线的颜色。 40 | * point: Object 是否绘制圆点，可以配置`size`控制点半径、`stroke`点颜色、`lineWidth`点边线宽。 41 | 42 | #### `padding`: int/Array\ 43 | 44 | 图形内边距，同css。以下所有图形均有。 45 | 46 | #### `appendPadding`: int/Array\ 47 | 48 | 图表画布区域四边的预留边距，即我们会在`padding`的基础上，为四边再加上`appendPadding`的数值，默认为`15`。 49 | 50 | #### `xAxis`: Object 51 | 52 | x坐标轴的配置。 53 | 54 | * tickCount: int 显示的坐标个数。 55 | * htAlign: boolean 是否首尾缩进对齐。 56 | * 更多设置详见F2。 57 | 58 | #### `yAxis`: Object 59 | 60 | y坐标轴的配置，同`xAxis`。 61 | 62 | #### `legend`: Object 63 | 64 | 整体图例设置，默认空。 65 | 66 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 67 | * offsetX: int 水平偏移。 68 | * offsetY: int 垂直偏移。 69 | * 更多设置详见F2。 70 | 71 | #### `tooltip`: Object 72 | 73 | 触摸提示设置，默认空。 74 | 75 | * showTitle: boolean 是否展示标题，默认不展示。 76 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 77 | * offsetX: int 水平偏移。 78 | * offsetY: int 垂直偏移。 79 | * 更多设置详见F2。 80 | 81 | ## area 区域图 82 | 83 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*vxFXT6RUqeQAAAAAAAAAAABjARQnAQ) 84 | 85 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*lg-WT5X0WMcAAAAAAAAAAABjARQnAQ) 86 | 87 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*mbA2S7xIHyAAAAAAAAAAAABjARQnAQ) 88 | 89 | #### `categories`: Array\ 90 | 91 | x坐标列表，等同全部数据的宽度。 92 | 93 | #### `series`: Array\ 94 | 95 | 区域的数据，可以为多个区域。如果只有一个区域，整体也应该是个数组。 96 | 97 | * data: Array\ 区域的数据，一般等同`categories`的长度，空缺则区域不连接不绘。 98 | * type: String 一个区域的标识名称，多个时确保不冲突。 99 | * style: String 区域边线的种类，可以取值`dash`虚线和`smooth`曲线，默认直接。 100 | * color: String 区域和边线的颜色。 101 | * point: Object 是否绘制圆点，可以配置`size`控制点半径、`stroke`点颜色、`lineWidth`点边线宽。 102 | 103 | #### `xAxis`: Object 104 | 105 | x坐标轴的配置。 106 | 107 | * tickCount: int 显示的坐标个数。 108 | * htAlign: boolean 是否首尾缩进对齐。 109 | * 更多设置详见F2。 110 | 111 | #### `yAxis`: Object 112 | 113 | y坐标轴的配置，同`xAxis`。 114 | 115 | #### `legend`: Object 116 | 117 | 整体图例设置，默认空。 118 | 119 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 120 | * offsetX: int 水平偏移。 121 | * offsetY: int 垂直偏移。 122 | * 更多设置详见F2。 123 | 124 | #### `tooltip`: Object 125 | 126 | 触摸提示设置，默认空。 127 | 128 | * showTitle: boolean 是否展示标题，默认不展示。 129 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 130 | * offsetX: int 水平偏移。 131 | * offsetY: int 垂直偏移。 132 | * 更多设置详见F2。 133 | 134 | #### `adjust`: Object/String 135 | 136 | * type: String 层叠，取值`stack`时分组，取值`dodge`时多个区域在y方向上层叠。 137 | * marginRatio: Number 分组间柱子的间距 138 | 139 | ## column 柱状图 140 | 141 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*gx9YTZvQGykAAAAAAAAAAABjARQnAQ) 142 | 143 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*xLy9T4pFDtUAAAAAAAAAAABjARQnAQ) 144 | 145 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*yJkRT7Q8l2YAAAAAAAAAAABjARQnAQ) 146 | 147 | #### `categories`: Array\ 148 | 149 | x坐标列表，等同全部数据的宽度。 150 | 151 | #### `series`: Array\ 152 | 153 | 柱形的数据，可以为多类柱形。如果只有一类，整体也应该是个数组。 154 | 155 | #### `series`: Array\ 156 | 157 | * data: Array\ 区域的数据，一般等同`categories`的长度，空缺则区域不连接不绘。 158 | * type: String 一类柱形的标识名称，多类时确保不冲突。 159 | * color: String 柱形的颜色。 160 | 161 | #### `xAxis`: Object 162 | 163 | x坐标轴的配置。 164 | 165 | * tickCount: int 显示的坐标个数。 166 | * htAlign: boolean 是否首尾缩进对齐。 167 | * 更多设置详见F2。 168 | 169 | #### `yAxis`: Object 170 | 171 | y坐标轴的配置，同`xAxis`。 172 | 173 | #### `legend`: Object 174 | 175 | 整体图例设置，默认空。 176 | 177 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 178 | * offsetX: int 水平偏移。 179 | * offsetY: int 垂直偏移。 180 | * 更多设置详见F2。 181 | 182 | #### `tooltip`: Object 183 | 184 | 触摸提示设置，默认空。 185 | 186 | * showTitle: boolean 是否展示标题，默认不展示。 187 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 188 | * offsetX: int 水平偏移。 189 | * offsetY: int 垂直偏移。 190 | * 更多设置详见F2。 191 | 192 | #### `adjust`: Object/String 193 | 194 | * type: String 层叠，取值`stack`时分组，取值`dodge`时多个区域在y方向上层叠。 195 | * marginRatio: Number 分组间柱子的间距 196 | 197 | #### `coord`: Object 198 | 199 | 坐标系设置 200 | 201 | * `transposed`: Boolean 是否转换，当为`true`时柱状图会横置x/y轴，变成条形图。 202 | 203 | ## bar 条形图 204 | 205 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*xmuUSZGAHEwAAAAAAAAAAABjARQnAQ) 206 | 207 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*vVZTRZbiG7IAAAAAAAAAAABjARQnAQ) 208 | 209 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*hWUBSZBo204AAAAAAAAAAABjARQnAQ) 210 | 211 | 同上。 212 | 213 | #### `coord`: Object 214 | 215 | 坐标系设置 216 | 217 | * `transposed`: Boolean 是否转换，当为`true`时柱状图会横置x/y轴，变成条形图。 218 | 219 | ## radar 雷达图 220 | 221 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*9VM4SIYvSDUAAAAAAAAAAABjARQnAQ) 222 | 223 | 224 | #### `categories`: Array\ 225 | 226 | x坐标列表，等同全部数据的宽度。 227 | 228 | #### `series`: Array\ 229 | 230 | 柱形的数据，可以为多类柱形。如果只有一类，整体也应该是个数组。 231 | 232 | #### `series`: Array\ 233 | 234 | * data: Array\ 区域的数据，一般等同`categories`的长度，空缺则区域不连接不绘。 235 | * type: String 一类柱形的标识名称，多类时确保不冲突。 236 | * style: String 区域边线的种类，可以取值`dash`虚线和`smooth`曲线，默认直接。 237 | * color: String 区域和边线的颜色。 238 | * point: Object 是否绘制圆点，可以配置`size`控制点半径、`stroke`点颜色、`lineWidth`点边线宽。 239 | 240 | #### `yAxis`: Object 241 | 242 | y坐标轴的配置。 243 | 244 | * tickCount: int 显示的坐标个数。 245 | * 更多设置详见F2。 246 | 247 | #### `legend`: Object 248 | 249 | 整体图例设置，默认空。 250 | 251 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 252 | * offsetX: int 水平偏移。 253 | * offsetY: int 垂直偏移。 254 | * 更多设置详见F2。 255 | 256 | #### `tooltip`: Object 257 | 258 | 触摸提示设置，默认空。 259 | 260 | * showTitle: boolean 是否展示标题，默认不展示。 261 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 262 | * offsetX: int 水平偏移。 263 | * offsetY: int 垂直偏移。 264 | * 更多设置详见F2。 265 | 266 | ## pie 饼图 267 | 268 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*92j1R5XgWRoAAAAAAAAAAABjARQnAQ) 269 | 270 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*yorITpTRvg8AAAAAAAAAAABjARQnAQ) 271 | 272 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*ooUjRJxHlkYAAAAAAAAAAABjARQnAQ) 273 | 274 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*ohEpSJMkX8QAAAAAAAAAAABjARQnAQ) 275 | 276 | #### `series`: Array\ 277 | 278 | 一维。 279 | 280 | * data: int 饼的数据量。 281 | * type: String 一个饼形的标识名称，多个时确保不冲突。 282 | * color: String 饼形的颜色。 283 | * key: String 当嵌套环图时使用不用的key标识不同的环。 284 | 285 | #### `radius`: Number 286 | 287 | 饼的缩放大小，默认1。 288 | 289 | #### `innerRadius`: Number 290 | 291 | 饼的内环缩放大小，默认0。当大于0时饼图呈现环状。 292 | 293 | #### `legend`: Object 294 | 295 | 整体图例设置，默认空。 296 | 297 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 298 | * offsetX: int 水平偏移。 299 | * offsetY: int 垂直偏移。 300 | * 更多设置详见F2。 301 | 302 | #### `tooltip`: Object 303 | 304 | 触摸提示设置，默认空。 305 | 306 | * showTitle: boolean 是否展示标题，默认不展示。 307 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 308 | * offsetX: int 水平偏移。 309 | * offsetY: int 垂直偏移。 310 | * 更多设置详见F2。 311 | 312 | #### `style`: Objet 313 | 314 | 饼之间线的样式。 315 | 316 | * lineWidth: int 线宽。 317 | * stroke: String 线色。 318 | 319 | #### `guide`: Object 320 | 321 | * line: Object 辅助线配置。 322 | * text: Object 辅助文字配置。 323 | 324 | #### `pieLabel`: boolean 325 | 326 | 是否展示标签示例文字。 327 | 328 | #### `activeShape`: boolean 329 | 330 | 饼图是否有点击效果。 331 | 332 | #### `sidePadding`: int 333 | 334 | 标签文字和饼图之间的padding，越大越近，越小越远。 335 | 336 | ## rose 玫瑰图 337 | 338 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*nWZ4S7j-fQsAAAAAAAAAAABjARQnAQ) 339 | 340 | #### `series`: Array\ 341 | 342 | 一维。 343 | 344 | * data: int 饼的数据量。 345 | * type: String 一个饼形的标识名称，多个时确保不冲突。 346 | * color: String 饼形的颜色。 347 | 348 | #### `legend`: Object 349 | 350 | 整体图例设置，默认空。 351 | 352 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 353 | * offsetX: int 水平偏移。 354 | * offsetY: int 垂直偏移。 355 | * 更多设置详见F2。 356 | 357 | #### `tooltip`: Object 358 | 359 | 触摸提示设置，默认空。 360 | 361 | * showTitle: boolean 是否展示标题，默认不展示。 362 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 363 | * offsetX: int 水平偏移。 364 | * offsetY: int 垂直偏移。 365 | * 更多设置详见F2。 366 | 367 | ## scatter 散点图 368 | 369 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*JSrHQ7rYY7sAAAAAAAAAAABjARQnAQ) 370 | 371 | #### `series`: Array\ 372 | 373 | 点的数据，可以为多组点。如果只有一组点，整体也应该是个数组。 374 | 375 | * data: Array\ 点的数据。 376 | * key: Number x坐标值。 377 | * value: Number y坐标值。 378 | * type: String 一组点的标识名称，多组时确保不冲突。 379 | * color: String 点的颜色。 380 | * size: Number 点大小。 381 | 382 | #### `xAxis`: Object 383 | 384 | x坐标轴的配置。 385 | 386 | * tickCount: int 显示的坐标个数。 387 | * htAlign: boolean 是否首尾缩进对齐。 388 | * 更多设置详见F2。 389 | 390 | #### `yAxis`: Object 391 | 392 | y坐标轴的配置，同`xAxis`。 393 | 394 | #### `style`: Objet 395 | 396 | 点的样式。 397 | 398 | * fillOpacity: Number 透明度。 399 | 400 | #### `legend`: Object 401 | 402 | 整体图例设置，默认空。 403 | 404 | * position: String 显示位置，可选`top`、`bottom`、`left`、`right`。 405 | * offsetX: int 水平偏移。 406 | * offsetY: int 垂直偏移。 407 | * 更多设置详见F2。 408 | 409 | #### `tooltip`: Object 410 | 411 | 触摸提示设置，默认空。 412 | 413 | * showTitle: boolean 是否展示标题，默认不展示。 414 | * showCrosshairs: 是否显示辅助线，点图、路径图、线图、面积图默认展示。 415 | * offsetX: int 水平偏移。 416 | * offsetY: int 垂直偏移。 417 | * 更多设置详见F2。 418 | 419 | ## k 股票k线图 420 | 421 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*SG8_SKBmoG0AAAAAAAAAAABjARQnAQ) 422 | 423 | #### `series`: Array\ 424 | 425 | 一维。 426 | 427 | * time: String 时间。 428 | * start: Number 开盘价。 429 | * end: Number 收盘价。 430 | * max: Number 最高价。 431 | * min: Number 最低价。 432 | 433 | #### `xAxis`: Object 434 | 435 | x坐标轴的配置。 436 | 437 | * tickCount: int 显示的坐标个数。 438 | * htAlign: boolean 是否首尾缩进对齐。 439 | * 更多设置详见F2。 440 | 441 | #### `yAxis`: Object 442 | 443 | y坐标轴的配置，同`xAxis`。 444 | 445 | #### `guide`: Object 446 | 447 | * line: Object 辅助线配置。 448 | * text: Object 辅助文字配置。 449 | 450 | ## timeshare 分时图 451 | 452 | ![avatar](https://gw.alipayobjects.com/mdn/wealth_pro/afts/img/A*Td-MRac7nVoAAAAAAAAAAABjARQnAQ) 453 | 454 | #### `series`: Array\ 455 | 456 | 一维。 457 | 458 | * time: String 时间。 459 | * price: Number 价格。 460 | * volume: Number 成交量。 461 | 462 | #### `xAxis`: Object 463 | 464 | x坐标轴的配置。 465 | 466 | * tickCount: int 显示的坐标个数。 467 | * htAlign: boolean 是否首尾缩进对齐。 468 | * 更多设置详见F2。 469 | 470 | #### `yAxis`: Object 471 | 472 | y坐标轴的配置，同`xAxis`。 473 | 474 | #### `guide`: Object 475 | 476 | * line: Object 辅助线配置。 477 | * text: Object 辅助文字配置。 478 | 479 | -------------------------------------------------------------------------------- /app.acss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/app.acss -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({}); 2 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "examples/index/index", 4 | "examples/line/index", 5 | "examples/area/index", 6 | "examples/dodge-area/index", 7 | "examples/stack-area/index", 8 | "examples/column/index", 9 | "examples/dodge/index", 10 | "examples/stack-column/index", 11 | "examples/bar/index", 12 | "examples/dodge-bar/index", 13 | "examples/stack-bar/index", 14 | "examples/radar/index", 15 | "examples/radar-fund/index", 16 | "examples/pie/index", 17 | "examples/radial-bar/index", 18 | "examples/labelline-pie/index", 19 | "examples/ring/index", 20 | "examples/rose/index", 21 | "examples/scatter/index", 22 | "examples/bubble/index", 23 | "examples/k/index", 24 | "examples/timeshare/index" 25 | ], 26 | "window": { 27 | "defaultTitle": "小程序图表组件库" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /components/area/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-area{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/area/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/area/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { categories, series, xAxis, yAxis, tooltip, legend, adjust } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = []; 14 | if(series.length === 1) { 15 | data = series[0].data.map((item, i) => { 16 | return { 17 | key: categories[i], 18 | value: item, 19 | type: series[0].type, 20 | } 21 | }); 22 | } 23 | else if(series.length > 1) { 24 | series.forEach(kind => { 25 | data = data.concat(kind.data.map((item, i) => { 26 | return { 27 | key: categories[i], 28 | value: item, 29 | type: kind.type, 30 | }; 31 | })); 32 | }); 33 | } 34 | chart.source(data); 35 | 36 | if(xAxis) { 37 | if(xAxis.htAlign) { 38 | xAxis.label = util.label; 39 | } 40 | chart.scale('key', util.scale(xAxis)); 41 | chart.axis('key', util.axis(xAxis)); 42 | } 43 | if(yAxis) { 44 | chart.scale('value', util.scale(yAxis)); 45 | chart.axis('value', util.axis(yAxis)); 46 | } 47 | chart.tooltip(tooltip); 48 | chart.legend(legend); 49 | 50 | const style = {}; 51 | series.forEach(kind => { 52 | style[kind.type] = kind.style; 53 | }); 54 | const color = {}; 55 | series.forEach(kind => { 56 | color[kind.type] = kind.color; 57 | }); 58 | 59 | if(series.length === 1) { 60 | chart.area().position('key*value').color('type', type => { 61 | return color[type]; 62 | }).adjust(adjust); 63 | chart.line().position('key*value').color('type', type => { 64 | return color[type]; 65 | }).shape('type', type => { 66 | return style[type] || 'line'; 67 | }).adjust(adjust); 68 | if(series[0].point) { 69 | chart.point().position('key*value').style(series[0].point); 70 | } 71 | } 72 | else if(series.length > 1) { 73 | chart.area().position('key*value').color('type', type => { 74 | return color[type]; 75 | }).adjust(adjust); 76 | chart.line().position('key*value').color('type', type => { 77 | return color[type]; 78 | }).shape('type', type => { 79 | return style[type] || 'line'; 80 | }).adjust(adjust); 81 | let pointType = []; 82 | let pointStyle; 83 | series.forEach(kind => { 84 | if(kind.point) { 85 | pointType.push(kind.type); 86 | pointStyle = kind.point; 87 | } 88 | }); 89 | if(pointType.length) { 90 | chart.point().position('key*value').color('type').size('type', v => { 91 | if(pointType.indexOf(v) === -1) { 92 | return 0; 93 | } 94 | }).style(pointStyle); 95 | } 96 | } 97 | 98 | chart.changeSize(width, height); 99 | } 100 | 101 | Component({ 102 | mixins: [methods], 103 | props: { 104 | categories: [], 105 | series: [], 106 | xAxis: { 107 | tickCount: 3, 108 | }, 109 | yAxis: { 110 | tickCount: 3, 111 | }, 112 | tooltip: false, 113 | legend: false, 114 | }, 115 | didMount() { 116 | my.call('getStartupParams', {}, (result) => { 117 | util.tracert('area', result.appId, result.url); 118 | }); 119 | 120 | const id = `am-mc-area-${this.$id}`; 121 | const ctx = this.ctx = my.createCanvasContext(id); 122 | const canvas = this.canvas = new F2.Renderer(ctx); 123 | 124 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 125 | ctx.scale(pixelRatio, pixelRatio); 126 | 127 | my.createSelectorQuery() 128 | .select(`#${id}`) 129 | .boundingClientRect() 130 | .exec(res => { 131 | if(!res || !res.length || !res[0]) { 132 | return; 133 | } 134 | const { width, height } = res[0]; 135 | 136 | this.setData({ 137 | width: width * pixelRatio, 138 | height: height * pixelRatio, 139 | }, () => { 140 | const { padding, appendPadding } = this.props; 141 | 142 | this.chart = new F2.Chart({ 143 | el: canvas, 144 | width, 145 | height, 146 | padding, 147 | appendPadding, 148 | }); 149 | 150 | render(this.chart, this.props, width, height); 151 | }); 152 | }); 153 | }, 154 | didUpdate() { 155 | const id = `am-mc-area-${this.$id}`; 156 | const pixelRatio = this.pixelRatio; 157 | 158 | my.createSelectorQuery() 159 | .select(`#${id}`) 160 | .boundingClientRect() 161 | .exec(res => { 162 | if(!res || !res.length || !res[0]) { 163 | return; 164 | } 165 | const { width, height } = res[0]; 166 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 167 | this.ctx.scale(pixelRatio, pixelRatio); 168 | } 169 | 170 | this.setData({ 171 | width: width * pixelRatio, 172 | height: height * pixelRatio, 173 | }, () => { 174 | render(this.chart, this.props, width, height); 175 | }); 176 | }); 177 | 178 | 179 | }, 180 | }); 181 | -------------------------------------------------------------------------------- /components/area/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/bubble/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-bubble{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/bubble/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | -------------------------------------------------------------------------------- /components/bubble/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | const BLUE = '#1890ff'; 6 | const TEXTBLUE = '#1890FF'; 7 | 8 | function render(chart, props, width, height) { 9 | if(!chart) { 10 | return; 11 | } 12 | const { series, xAxis, yAxis, tooltip, grid } = props; 13 | 14 | chart.clear(); 15 | 16 | let data = []; 17 | if (series.length === 1) { 18 | series[0].data.forEach(item => { 19 | item.type = series[0].type; 20 | }); 21 | data = series[0].data; 22 | } 23 | else if (series.length > 1) { 24 | series.forEach((item, i) => { 25 | item.data.forEach(item2 => { 26 | item2.type = item.type || i; 27 | }); 28 | data = data.concat(item.data); 29 | }); 30 | } 31 | chart.source(data); 32 | 33 | // 开始配置坐标轴 34 | chart.axis('key', { 35 | label: function label(text) { 36 | return { 37 | text: text + ' ' + series[0].xExtAlias, // 格式化坐标轴显示文本 38 | }; 39 | }, 40 | grid: grid ? { 41 | stroke: '#d9d9d9', 42 | lineWidth: 1, 43 | lineDash: [2, 2], 44 | } : null 45 | }); 46 | chart.axis('value', { 47 | line: F2.Util.mix({}, F2.Global._defaultAxis.line, { 48 | top: false 49 | }), 50 | label: function label(text) { 51 | if (text > 0) { 52 | return { 53 | text: text + ' ' + series[0].yExtAlias, 54 | }; 55 | } 56 | } 57 | }); 58 | 59 | //配置坐标轴的伸长比 60 | if (xAxis) { 61 | if(xAxis.htAlign) { 62 | xAxis.label = util.label; 63 | } 64 | chart.scale('key', util.scale(xAxis)); 65 | } 66 | if (yAxis) { 67 | chart.scale('value', util.scale(yAxis)); 68 | } 69 | 70 | //ToolTip 展示desc和x，y坐标 71 | if (tooltip) { 72 | chart.tooltip(Object.assign(tooltip, { 73 | onShow: function onChange(ev) { 74 | let items = ev.items; 75 | items[0].title = items[0].origin.desc; 76 | items[0].name = 'x ' + items[0].origin.key; 77 | items[0].value = 'y ' + items[0].origin.value; 78 | } 79 | })); 80 | } 81 | 82 | //绘制气泡，半径范围[10,40],气泡颜色跟随设置中的颜色或者默认BLUE颜色 83 | chart.point() 84 | .position('key*value') 85 | .color(series[0].color || BLUE) 86 | .size('size', [10, 40]) 87 | .shape('circle') 88 | .style({ 89 | lineWidth: 1, 90 | stroke: series[0].color || BLUE, 91 | opacity: 0.3 92 | }); 93 | 94 | //绘制辅助文本，文本颜色跟随设置中的颜色或者默认文本TEXTBLUE颜色 95 | data.map(function (item) { 96 | chart.guide().text({ 97 | position: [item.key, item.value], 98 | content: item.name, 99 | style: { 100 | textAlign: 'center', 101 | textBaseline: 'middle', 102 | fill: series[0].color || TEXTBLUE 103 | } 104 | }); 105 | }); 106 | 107 | chart.changeSize(width, height); 108 | } 109 | 110 | Component({ 111 | mixins: [methods], 112 | props: { 113 | series: [], 114 | tooltip: { 115 | showTitle: true, 116 | showItemMarker: false, 117 | crosshairsType: 'xy', 118 | offsetY: 10 119 | }, 120 | }, 121 | didMount() { 122 | my.call('getStartupParams', {}, (result) => { 123 | util.tracert('bubble', result.appId, result.url); 124 | }); 125 | 126 | const id = `am-mc-bubble-${this.$id}`; 127 | const ctx = this.ctx = my.createCanvasContext(id); 128 | const canvas = this.canvas = new F2.Renderer(ctx); 129 | 130 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 131 | ctx.scale(pixelRatio, pixelRatio); 132 | 133 | my.createSelectorQuery() 134 | .select(`#${id}`) 135 | .boundingClientRect() 136 | .exec(res => { 137 | if (!res || !res.length || !res[0]) { 138 | return; 139 | } 140 | const { width, height } = res[0]; 141 | 142 | this.setData({ 143 | width: width * pixelRatio, 144 | height: height * pixelRatio, 145 | }, () => { 146 | const { padding, appendPadding } = this.props; 147 | 148 | this.chart = new F2.Chart({ 149 | el: canvas, 150 | width, 151 | height, 152 | padding, 153 | appendPadding, 154 | }); 155 | 156 | render(this.chart, this.props, width, height); 157 | }); 158 | }); 159 | }, 160 | didUpdate() { 161 | const id = `am-mc-bubble-${this.$id}`; 162 | const pixelRatio = this.pixelRatio; 163 | 164 | my.createSelectorQuery() 165 | .select(`#${id}`) 166 | .boundingClientRect() 167 | .exec(res => { 168 | if(!res || !res.length || !res[0]) { 169 | return; 170 | } 171 | const { width, height } = res[0]; 172 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 173 | this.ctx.scale(pixelRatio, pixelRatio); 174 | } 175 | 176 | this.setData({ 177 | width: width * pixelRatio, 178 | height: height * pixelRatio, 179 | }, () => { 180 | render(this.chart, this.props, width, height); 181 | }); 182 | }); 183 | }, 184 | }); 185 | -------------------------------------------------------------------------------- /components/bubble/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/column/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-column{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/column/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/column/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { categories, series, xAxis, yAxis, tooltip, legend, adjust, coord } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = []; 14 | if(series.length === 1) { 15 | data = series[0].data.map((item, i) => { 16 | return { 17 | key: categories[i], 18 | value: item, 19 | type: series[0].type, 20 | } 21 | }); 22 | } 23 | else if(series.length > 1) { 24 | series.forEach(kind => { 25 | data = data.concat(kind.data.map((item, i) => { 26 | return { 27 | key: categories[i], 28 | value: item, 29 | type: kind.type, 30 | }; 31 | })); 32 | }); 33 | } 34 | chart.source(data); 35 | 36 | if(coord) { 37 | chart.coord(coord); 38 | } 39 | if(xAxis) { 40 | if(xAxis.htAlign) { 41 | if(!coord || !coord.transposed) { 42 | xAxis.label = util.label; 43 | } 44 | else { 45 | yAxis.label = util.label; 46 | } 47 | } 48 | chart.scale('key', util.scale(xAxis)); 49 | chart.axis('key', util.axis(xAxis)); 50 | } 51 | if(yAxis) { 52 | chart.scale('value', util.scale(yAxis)); 53 | chart.axis('value', util.axis(yAxis)); 54 | } 55 | chart.tooltip(tooltip); 56 | chart.legend(legend); 57 | 58 | const color = {}; 59 | series.forEach(kind => { 60 | color[kind.type] = kind.color; 61 | }); 62 | 63 | if(series.length === 1) { 64 | chart.interval().position('key*value').color('type', type => { 65 | return color[type]; 66 | }).adjust(adjust); 67 | } 68 | else if(series.length > 1) { 69 | chart.interval().position('key*value').color('type', type => { 70 | return color[type]; 71 | }).adjust(adjust); 72 | } 73 | 74 | chart.changeSize(width, height); 75 | } 76 | 77 | Component({ 78 | mixins: [methods], 79 | props: { 80 | categories: [], 81 | series: [], 82 | xAxis: { 83 | tickCount: 3, 84 | }, 85 | yAxis: { 86 | tickCount: 3, 87 | }, 88 | tooltip: false, 89 | legend: false, 90 | adjust: 'stack', 91 | }, 92 | didMount() { 93 | my.call('getStartupParams', {}, (result) => { 94 | util.tracert('column', result.appId, result.url); 95 | }); 96 | 97 | const id = `am-mc-column-${this.$id}`; 98 | const ctx = this.ctx = my.createCanvasContext(id); 99 | const canvas = this.canvas = new F2.Renderer(ctx); 100 | 101 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 102 | ctx.scale(pixelRatio, pixelRatio); 103 | 104 | my.createSelectorQuery() 105 | .select(`#${id}`) 106 | .boundingClientRect() 107 | .exec(res => { 108 | if(!res || !res.length || !res[0]) { 109 | return; 110 | } 111 | const { width, height } = res[0]; 112 | 113 | this.setData({ 114 | width: width * pixelRatio, 115 | height: height * pixelRatio, 116 | }, () => { 117 | const { padding, appendPadding } = this.props; 118 | 119 | this.chart = new F2.Chart({ 120 | el: canvas, 121 | width, 122 | height, 123 | padding, 124 | appendPadding, 125 | }); 126 | 127 | render(this.chart, this.props, width, height); 128 | }); 129 | }); 130 | }, 131 | didUpdate() { 132 | const id = `am-mc-column-${this.$id}`; 133 | const pixelRatio = this.pixelRatio; 134 | 135 | my.createSelectorQuery() 136 | .select(`#${id}`) 137 | .boundingClientRect() 138 | .exec(res => { 139 | if(!res || !res.length || !res[0]) { 140 | return; 141 | } 142 | const { width, height } = res[0]; 143 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 144 | this.ctx.scale(pixelRatio, pixelRatio); 145 | } 146 | 147 | this.setData({ 148 | width: width * pixelRatio, 149 | height: height * pixelRatio, 150 | }, () => { 151 | render(this.chart, this.props, width, height); 152 | }); 153 | }); 154 | }, 155 | }); 156 | -------------------------------------------------------------------------------- /components/column/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/k/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-k{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/k/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/k/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { series, xAxis, yAxis, tooltip, guide } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = series.map(item => { 14 | return Object.assign({}, item, { 15 | range: [item.start, item.end, item.max, item.min], 16 | trend: item.start <= item.end ? 0 : 1, 17 | }); 18 | }); 19 | chart.source(data); 20 | 21 | if(xAxis) { 22 | if(xAxis.htAlign) { 23 | xAxis.label = util.label; 24 | } 25 | chart.scale('time', util.scale(xAxis)); 26 | chart.axis('time', util.axis(xAxis)); 27 | } 28 | if(yAxis) { 29 | chart.scale('range', util.scale(yAxis)); 30 | chart.axis('range', util.axis(yAxis)); 31 | } 32 | chart.tooltip(tooltip); 33 | chart.legend(false); 34 | 35 | chart.schema().position('time*range').color('trend', function(trend) { 36 | return ['#F4333C', '#1CA93D'][trend]; 37 | }).shape('candle'); 38 | 39 | if(guide) { 40 | if(guide.line) { 41 | chart.guide().line(guide.line); 42 | } 43 | if(guide.text) { 44 | chart.guide().text(guide.text); 45 | } 46 | } 47 | 48 | chart.changeSize(width, height); 49 | } 50 | 51 | Component({ 52 | mixins: [methods], 53 | props: { 54 | categories: [], 55 | series: [], 56 | xAxis: { 57 | tickCount: 3, 58 | }, 59 | yAxis: { 60 | tickCount: 3, 61 | }, 62 | tooltip: false, 63 | }, 64 | didMount() { 65 | my.call('getStartupParams', {}, (result) => { 66 | util.tracert('k', result.appId, result.url); 67 | }); 68 | 69 | const id = `am-mc-k-${this.$id}`; 70 | const ctx = this.ctx = my.createCanvasContext(id); 71 | const canvas = this.canvas = new F2.Renderer(ctx); 72 | 73 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 74 | ctx.scale(pixelRatio, pixelRatio); 75 | 76 | my.createSelectorQuery() 77 | .select(`#${id}`) 78 | .boundingClientRect() 79 | .exec(res => { 80 | if(!res || !res.length || !res[0]) { 81 | return; 82 | } 83 | const { width, height } = res[0]; 84 | 85 | this.setData({ 86 | width: width * pixelRatio, 87 | height: height * pixelRatio, 88 | }, () => { 89 | const { padding, appendPadding } = this.props; 90 | 91 | this.chart = new F2.Chart({ 92 | el: canvas, 93 | width, 94 | height, 95 | padding, 96 | appendPadding, 97 | }); 98 | 99 | render(this.chart, this.props, width, height); 100 | }); 101 | }); 102 | }, 103 | didUpdate() { 104 | const id = `am-mc-k-${this.$id}`; 105 | const pixelRatio = this.pixelRatio; 106 | 107 | my.createSelectorQuery() 108 | .select(`#${id}`) 109 | .boundingClientRect() 110 | .exec(res => { 111 | if(!res || !res.length || !res[0]) { 112 | return; 113 | } 114 | const { width, height } = res[0]; 115 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 116 | this.ctx.scale(pixelRatio, pixelRatio); 117 | } 118 | 119 | this.setData({ 120 | width: width * pixelRatio, 121 | height: height * pixelRatio, 122 | }, () => { 123 | render(this.chart, this.props, width, height); 124 | }); 125 | }); 126 | }, 127 | }); 128 | -------------------------------------------------------------------------------- /components/k/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/line/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-line{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/line/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/line/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { categories, series, xAxis, yAxis, tooltip, legend } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = []; 14 | if(series.length === 1) { 15 | data = series[0].data.map((item, i) => { 16 | return { 17 | key: categories[i], 18 | value: item, 19 | type: series[0].type, 20 | } 21 | }); 22 | } 23 | else if(series.length > 1) { 24 | series.forEach(kind => { 25 | data = data.concat(kind.data.map((item, i) => { 26 | return { 27 | key: categories[i], 28 | value: item, 29 | type: kind.type, 30 | }; 31 | })); 32 | }); 33 | } 34 | chart.source(data); 35 | 36 | if(xAxis) { 37 | if(xAxis.htAlign) { 38 | xAxis.label = util.label; 39 | } 40 | chart.scale('key', util.scale(xAxis)); 41 | chart.axis('key', util.axis(xAxis)); 42 | } 43 | if(yAxis) { 44 | chart.scale('value', util.scale(yAxis)); 45 | chart.axis('value', util.axis(yAxis)); 46 | } 47 | chart.tooltip(tooltip); 48 | chart.legend(legend); 49 | 50 | const style = {}; 51 | series.forEach(kind => { 52 | style[kind.type] = kind.style; 53 | }); 54 | const color = {}; 55 | series.forEach(kind => { 56 | color[kind.type] = kind.color; 57 | }); 58 | 59 | if(series.length === 1) { 60 | chart.line().position('key*value').color('type', type => { 61 | return color[type]; 62 | }).shape('type', type => { 63 | return style[type] || 'line'; 64 | }); 65 | if(series[0].point) { 66 | chart.point().position('key*value').style(series[0].point); 67 | } 68 | } 69 | else if(series.length > 1) { 70 | chart.line().position('key*value').color('type', type => { 71 | return color[type]; 72 | }).shape('type', type => { 73 | return style[type] || 'line'; 74 | }); 75 | let pointType = []; 76 | let pointStyle; 77 | series.forEach(kind => { 78 | if(kind.point) { 79 | pointType.push(kind.type); 80 | pointStyle = kind.point; 81 | } 82 | }); 83 | if(pointType.length) { 84 | chart.point().position('key*value').color('type', type => { 85 | return color[type]; 86 | }).size('type', v => { 87 | if(pointType.indexOf(v) === -1) { 88 | return 0; 89 | } 90 | }).style(pointStyle); 91 | } 92 | } 93 | 94 | chart.changeSize(width, height); 95 | } 96 | 97 | Component({ 98 | mixins: [methods], 99 | props: { 100 | categories: [], 101 | series: [], 102 | xAxis: { 103 | tickCount: 3, 104 | }, 105 | yAxis: { 106 | tickCount: 3, 107 | }, 108 | tooltip: false, 109 | legend: false, 110 | }, 111 | didMount() { 112 | my.call('getStartupParams', {}, (result) => { 113 | util.tracert('line', result.appId, result.url); 114 | }); 115 | 116 | const id = `am-mc-line-${this.$id}`; 117 | const ctx = this.ctx = my.createCanvasContext(id); 118 | const canvas = this.canvas = new F2.Renderer(ctx); 119 | 120 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 121 | ctx.scale(pixelRatio, pixelRatio); 122 | 123 | my.createSelectorQuery() 124 | .select(`#${id}`) 125 | .boundingClientRect() 126 | .exec(res => { 127 | if(!res || !res.length || !res[0]) { 128 | return; 129 | } 130 | const { width, height } = res[0]; 131 | 132 | this.setData({ 133 | width: width * pixelRatio, 134 | height: height * pixelRatio, 135 | }, () => { 136 | const { padding, appendPadding } = this.props; 137 | 138 | this.chart = new F2.Chart({ 139 | el: canvas, 140 | width, 141 | height, 142 | padding, 143 | appendPadding, 144 | }); 145 | 146 | render(this.chart, this.props, width, height); 147 | }); 148 | }); 149 | }, 150 | didUpdate() { 151 | const id = `am-mc-line-${this.$id}`; 152 | const pixelRatio = this.pixelRatio; 153 | 154 | my.createSelectorQuery() 155 | .select(`#${id}`) 156 | .boundingClientRect() 157 | .exec(res => { 158 | if(!res || !res.length || !res[0]) { 159 | return; 160 | } 161 | const { width, height } = res[0]; 162 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 163 | this.ctx.scale(pixelRatio, pixelRatio); 164 | } 165 | 166 | this.setData({ 167 | width: width * pixelRatio, 168 | height: height * pixelRatio, 169 | }, () => { 170 | render(this.chart, this.props, width, height); 171 | }); 172 | }); 173 | }, 174 | }); 175 | -------------------------------------------------------------------------------- /components/line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/mixins/methods.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | touchStart(e) { 4 | if (this.canvas) { 5 | this.canvas.emitEvent('touchstart', [e]); 6 | } 7 | }, 8 | touchMove(e) { 9 | if (this.canvas) { 10 | this.canvas.emitEvent('touchmove', [e]); 11 | } 12 | }, 13 | touchEnd(e) { 14 | if (this.canvas) { 15 | this.canvas.emitEvent('touchend', [e]); 16 | } 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /components/pie/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-pie{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/pie/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/pie/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { series, legend, style, radius, innerRadius, tooltip, guide, cascade, pieLabel, sidePadding, activeShape } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = cascade ? series : series.map(item => { 14 | item.key = 'key'; 15 | return item; 16 | }); 17 | chart.source(data); 18 | chart.coord('polar', { 19 | transposed: true, 20 | innerRadius, 21 | radius: radius || 1, 22 | }); 23 | 24 | if (pieLabel) { 25 | // 添加饼图文本 26 | chart.pieLabel({ 27 | sidePadding, 28 | activeShape, 29 | label1: function label1(data, color) { 30 | return { 31 | text: data.type, 32 | fill: color 33 | }; 34 | }, 35 | label2: function label2(data, color) { 36 | return { 37 | text: data.data, 38 | fill: color, 39 | fontWeight: 'bold' 40 | }; 41 | } 42 | }); 43 | } 44 | 45 | const color = []; 46 | const dftColors = F2.Global.colors; 47 | const length = dftColors.length; 48 | series.forEach((kind, i) => { 49 | color.push(kind.color || dftColors[i % length]); 50 | }); 51 | chart.axis(false); 52 | chart.tooltip(tooltip); 53 | chart.legend(legend); 54 | 55 | chart.interval() 56 | .position('key*data') 57 | .color('type', color) 58 | .adjust('stack') 59 | .style(style); 60 | 61 | if (guide) { 62 | if (guide.text) { 63 | chart.guide().text(guide.text); 64 | } 65 | } 66 | 67 | chart.changeSize(width, height); 68 | } 69 | 70 | Component({ 71 | mixins: [methods], 72 | props: { 73 | series: [], 74 | radius: 1, 75 | innerRadius: 0, 76 | cascade: false, 77 | pieLabel: false, 78 | sidePadding: 40, 79 | tooltip: false, 80 | legend: false, 81 | }, 82 | didMount() { 83 | my.call('getStartupParams', {}, (result) => { 84 | util.tracert('pie', result.appId, result.url); 85 | }); 86 | 87 | const id = `am-mc-pie-${this.$id}`; 88 | const ctx = this.ctx= my.createCanvasContext(id); 89 | const canvas = this.canvas = new F2.Renderer(ctx); 90 | 91 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 92 | ctx.scale(pixelRatio, pixelRatio); 93 | 94 | my.createSelectorQuery() 95 | .select(`#${id}`) 96 | .boundingClientRect() 97 | .exec(res => { 98 | if (!res || !res.length || !res[0]) { 99 | return; 100 | } 101 | const { width, height } = res[0]; 102 | 103 | this.setData({ 104 | width: width * pixelRatio, 105 | height: height * pixelRatio, 106 | }, () => { 107 | const { padding, appendPadding } = this.props; 108 | 109 | this.chart = new F2.Chart({ 110 | el: canvas, 111 | width, 112 | height, 113 | padding, 114 | appendPadding, 115 | }); 116 | 117 | render(this.chart, this.props, width, height); 118 | }); 119 | }); 120 | }, 121 | didUpdate() { 122 | const id = `am-mc-pie-${this.$id}`; 123 | const pixelRatio = this.pixelRatio; 124 | 125 | my.createSelectorQuery() 126 | .select(`#${id}`) 127 | .boundingClientRect() 128 | .exec(res => { 129 | if(!res || !res.length || !res[0]) { 130 | return; 131 | } 132 | const { width, height } = res[0]; 133 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 134 | this.ctx.scale(pixelRatio, pixelRatio); 135 | } 136 | 137 | this.setData({ 138 | width: width * pixelRatio, 139 | height: height * pixelRatio, 140 | }, () => { 141 | render(this.chart, this.props, width, height); 142 | }); 143 | }); 144 | }, 145 | }); 146 | -------------------------------------------------------------------------------- /components/pie/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/radar/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-radar { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | canvas { 7 | width: 100%; 8 | height: 100%; 9 | } 10 | 11 | .panel { 12 | text-align: center; 13 | } 14 | 15 | .panel button { 16 | outline: 0; 17 | line-height: 24px; 18 | display: inline-block; 19 | font-weight: 400; 20 | text-align: center; 21 | -ms-touch-action: manipulation; 22 | touch-action: manipulation; 23 | cursor: pointer; 24 | background-image: none; 25 | border: 1px solid transparent; 26 | white-space: nowrap; 27 | padding: 0 7px; 28 | font-size: 12px; 29 | border-radius: 2px; 30 | height: 24px; 31 | -webkit-user-select: none; 32 | -moz-user-select: none; 33 | -ms-user-select: none; 34 | user-select: none; 35 | position: relative; 36 | color: rgba(0, 0, 0, .65); 37 | background-color: #fff; 38 | border-color: #d9d9d9; 39 | } 40 | 41 | .panel button.active { 42 | color: #fff; 43 | background-color: #FE5C5B; 44 | border-color: #FE5C5B; 45 | } -------------------------------------------------------------------------------- /components/radar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/radar/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { categories, series, yAxis, tooltip, legend } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = []; 14 | if(series.length === 1) { 15 | data = series[0].data.map((item, i) => { 16 | return { 17 | key: categories[i], 18 | value: item, 19 | } 20 | }); 21 | } 22 | else if(series.length > 1) { 23 | series.forEach(kind => { 24 | data = data.concat(kind.data.map((item, i) => { 25 | return { 26 | key: categories[i], 27 | value: item, 28 | type: kind.type, 29 | }; 30 | })); 31 | }); 32 | } 33 | chart.source(data); 34 | chart.coord('polar'); 35 | 36 | if(yAxis) { 37 | chart.scale('value', util.scale(yAxis)); 38 | chart.axis('value', util.axis(yAxis)); 39 | } 40 | chart.tooltip(tooltip); 41 | chart.legend(legend); 42 | 43 | const style = {}; 44 | series.forEach(kind => { 45 | style[kind.type] = kind.style; 46 | }); 47 | const color = {}; 48 | series.forEach(kind => { 49 | color[kind.type] = kind.color; 50 | }); 51 | 52 | if(series.length === 1) { 53 | chart.area().position('key*value').color('type', type => { 54 | return color[type]; 55 | }).shape('type', type => { 56 | return style[type] || 'line'; 57 | }); 58 | chart.line().position('key*value').color('type', type => { 59 | return color[type]; 60 | }).shape('type', type => { 61 | return style[type] || 'line'; 62 | }); 63 | if(series[0].point) { 64 | chart.point().position('key*value').style(series[0].point); 65 | } 66 | } 67 | else if(series.length > 1) { 68 | chart.area().position('key*value').color('type', type => { 69 | return color[type]; 70 | }).shape('type', type => { 71 | return style[type] || 'line'; 72 | }); 73 | chart.line().position('key*value').color('type', type => { 74 | return color[type]; 75 | }).shape('type', type => { 76 | return style[type] || 'line'; 77 | }); 78 | let pointType = []; 79 | let pointStyle; 80 | series.forEach(kind => { 81 | if(kind.point) { 82 | pointType.push(kind.type); 83 | pointStyle = kind.point; 84 | } 85 | }); 86 | if(pointType.length) { 87 | chart.point().position('key*value').color('type').size('type', v => { 88 | if(pointType.indexOf(v) === -1) { 89 | return 0; 90 | } 91 | }).style(pointStyle); 92 | } 93 | } 94 | 95 | chart.changeSize(width, height); 96 | } 97 | 98 | Component({ 99 | mixins: [methods], 100 | props: { 101 | categories: [], 102 | series: [], 103 | yAxis: { 104 | tickCount: 3, 105 | }, 106 | tooltip: false, 107 | legend: false, 108 | }, 109 | didMount() { 110 | my.call('getStartupParams', {}, (result) => { 111 | util.tracert('radar', result.appId, result.url); 112 | }); 113 | 114 | const id = `am-mc-radar-${this.$id}`; 115 | const ctx = this.ctx = my.createCanvasContext(id); 116 | const canvas = this.canvas = new F2.Renderer(ctx); 117 | 118 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 119 | ctx.scale(pixelRatio, pixelRatio); 120 | 121 | my.createSelectorQuery() 122 | .select(`#${id}`) 123 | .boundingClientRect() 124 | .exec(res => { 125 | if(!res || !res.length) { 126 | return; 127 | } 128 | const { width, height } = res[0]; 129 | 130 | this.setData({ 131 | width: width * pixelRatio, 132 | height: height * pixelRatio, 133 | }, () => { 134 | const { padding, appendPadding } = this.props; 135 | 136 | this.chart = new F2.Chart({ 137 | el: canvas, 138 | width, 139 | height, 140 | padding, 141 | appendPadding, 142 | }); 143 | 144 | render(this.chart, this.props, width, height); 145 | }); 146 | }); 147 | }, 148 | didUpdate() { 149 | const id = `am-mc-radar-${this.$id}`; 150 | const pixelRatio = this.pixelRatio; 151 | 152 | my.createSelectorQuery() 153 | .select(`#${id}`) 154 | .boundingClientRect() 155 | .exec(res => { 156 | if(!res || !res.length || !res[0]) { 157 | return; 158 | } 159 | const { width, height } = res[0]; 160 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 161 | this.ctx.scale(pixelRatio, pixelRatio); 162 | } 163 | 164 | this.setData({ 165 | width: width * pixelRatio, 166 | height: height * pixelRatio, 167 | }, () => { 168 | render(this.chart, this.props, width, height); 169 | }); 170 | }); 171 | }, 172 | }); 173 | -------------------------------------------------------------------------------- /components/radar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/rose/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-rose{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/rose/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /components/rose/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { series, legend, tooltip, style } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = series.map(item => { 14 | return item; 15 | }); 16 | chart.source(data); 17 | chart.coord('polar'); 18 | 19 | const color = []; 20 | const dftColors = F2.Global.colors; 21 | const length = dftColors.length; 22 | series.forEach((kind, i) => { 23 | color.push(kind.color || dftColors[i % length]); 24 | }); 25 | chart.axis(false); 26 | chart.tooltip(tooltip); 27 | chart.legend(legend); 28 | 29 | chart.interval() 30 | .position('type*data') 31 | .color('type', color) 32 | .style(style); 33 | 34 | chart.changeSize(width, height); 35 | } 36 | 37 | Component({ 38 | mixins: [methods], 39 | props: { 40 | series: [], 41 | tooltip: false, 42 | legend: false, 43 | }, 44 | didMount() { 45 | my.call('getStartupParams', {}, (result) => { 46 | util.tracert('rose', result.appId, result.url); 47 | }); 48 | 49 | const id = `am-mc-rose-${this.$id}`; 50 | const ctx = this.ctx = my.createCanvasContext(id); 51 | const canvas = this.canvas = new F2.Renderer(ctx); 52 | 53 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 54 | ctx.scale(pixelRatio, pixelRatio); 55 | 56 | my.createSelectorQuery() 57 | .select(`#${id}`) 58 | .boundingClientRect() 59 | .exec(res => { 60 | if(!res || !res.length) { 61 | return; 62 | } 63 | const { width, height } = res[0]; 64 | 65 | this.setData({ 66 | width: width * pixelRatio, 67 | height: height * pixelRatio, 68 | }, () => { 69 | const { padding, appendPadding } = this.props; 70 | 71 | this.chart = new F2.Chart({ 72 | el: canvas, 73 | width, 74 | height, 75 | padding, 76 | appendPadding, 77 | }); 78 | 79 | render(this.chart, this.props, width, height); 80 | }); 81 | }); 82 | }, 83 | didUpdate() { 84 | const id = `am-mc-rose-${this.$id}`; 85 | const pixelRatio = this.pixelRatio; 86 | 87 | my.createSelectorQuery() 88 | .select(`#${id}`) 89 | .boundingClientRect() 90 | .exec(res => { 91 | if(!res || !res.length || !res[0]) { 92 | return; 93 | } 94 | const { width, height } = res[0]; 95 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 96 | this.ctx.scale(pixelRatio, pixelRatio); 97 | } 98 | 99 | this.setData({ 100 | width: width * pixelRatio, 101 | height: height * pixelRatio, 102 | }, () => { 103 | render(this.chart, this.props, width, height); 104 | }); 105 | }); 106 | }, 107 | }); 108 | -------------------------------------------------------------------------------- /components/rose/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/scatter/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-scatter{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | height:100%; 9 | } -------------------------------------------------------------------------------- /components/scatter/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | -------------------------------------------------------------------------------- /components/scatter/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(chart, props, width, height) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { series, xAxis, yAxis, tooltip, legend, style } = props; 10 | 11 | chart.clear(); 12 | 13 | let data = []; 14 | if (series.length === 1) { 15 | series[0].data.forEach(item => { 16 | item.type = series[0].type; 17 | }); 18 | data = series[0].data; 19 | } 20 | else if (series.length > 1) { 21 | series.forEach((item, i) => { 22 | item.data.forEach(item2 => { 23 | item2.type = item.type || i; 24 | }); 25 | data = data.concat(item.data); 26 | }); 27 | } 28 | chart.source(data); 29 | 30 | if (xAxis) { 31 | if(xAxis.htAlign) { 32 | xAxis.label = util.label; 33 | } 34 | chart.scale('key', util.scale(xAxis)); 35 | chart.axis('key', util.axis(xAxis)); 36 | } 37 | if (yAxis) { 38 | chart.scale('value', util.scale(yAxis)); 39 | chart.axis('value', util.axis(yAxis)); 40 | } 41 | chart.tooltip(tooltip); 42 | chart.legend(legend); 43 | 44 | const color = []; 45 | const size = []; 46 | const dftColors = F2.Global.colors; 47 | const length = dftColors.length; 48 | 49 | series.forEach((kind, i) => { 50 | color.push(kind.color || dftColors[i % length]); 51 | size.push(kind.size || 3) 52 | }); 53 | 54 | chart.point() 55 | .position('key*value') 56 | .color('type', color) 57 | .size('type', size) 58 | .style(style); 59 | 60 | chart.changeSize(width, height); 61 | } 62 | 63 | Component({ 64 | mixins: [methods], 65 | props: { 66 | series: [], 67 | tooltip: false, 68 | legend: false, 69 | }, 70 | didMount() { 71 | my.call('getStartupParams', {}, (result) => { 72 | util.tracert('scatter', result.appId, result.url); 73 | }); 74 | 75 | const id = `am-mc-scatter-${this.$id}`; 76 | const ctx = this.ctx = my.createCanvasContext(id); 77 | const canvas = this.canvas = new F2.Renderer(ctx); 78 | 79 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 80 | ctx.scale(pixelRatio, pixelRatio); 81 | 82 | my.createSelectorQuery() 83 | .select(`#${id}`) 84 | .boundingClientRect() 85 | .exec(res => { 86 | if (!res || !res.length || !res[0]) { 87 | return; 88 | } 89 | const { width, height } = res[0]; 90 | 91 | this.setData({ 92 | width: width * pixelRatio, 93 | height: height * pixelRatio, 94 | }, () => { 95 | const { padding, appendPadding } = this.props; 96 | 97 | this.chart = new F2.Chart({ 98 | el: canvas, 99 | width, 100 | height, 101 | padding, 102 | appendPadding, 103 | }); 104 | 105 | render(this.chart, this.props, width, height); 106 | }); 107 | }); 108 | }, 109 | didUpdate() { 110 | const id = `am-mc-scatter-${this.$id}`; 111 | const pixelRatio = this.pixelRatio; 112 | 113 | my.createSelectorQuery() 114 | .select(`#${id}`) 115 | .boundingClientRect() 116 | .exec(res => { 117 | if(!res || !res.length || !res[0]) { 118 | return; 119 | } 120 | const { width, height } = res[0]; 121 | if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) { 122 | this.ctx.scale(pixelRatio, pixelRatio); 123 | } 124 | 125 | this.setData({ 126 | width: width * pixelRatio, 127 | height: height * pixelRatio, 128 | }, () => { 129 | render(this.chart, this.props, width, height); 130 | }); 131 | }); 132 | }, 133 | }); 134 | -------------------------------------------------------------------------------- /components/scatter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /components/timeshare/index.acss: -------------------------------------------------------------------------------- 1 | .am-mc-timeshare{ 2 | width:100%; 3 | height:100%; 4 | } 5 | 6 | canvas{ 7 | width:100%; 8 | } 9 | 10 | .am-mc-timeshare-area{ 11 | height:80%; 12 | } 13 | 14 | .am-mc-timeshare-column{ 15 | height:20%; 16 | } 17 | -------------------------------------------------------------------------------- /components/timeshare/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 20 | 21 | -------------------------------------------------------------------------------- /components/timeshare/index.js: -------------------------------------------------------------------------------- 1 | import F2 from '@antv/my-f2'; 2 | import methods from '../mixins/methods'; 3 | import util from '../util'; 4 | 5 | function render(areaChart, columnChart, props, widthArea, heightArea, widthColumn, heightColumn) { 6 | if(!chart) { 7 | return; 8 | } 9 | const { series, xAxis, yAxis, tooltip, guide, } = props; 10 | 11 | areaChart.clear(); 12 | 13 | columnChart.clear(); 14 | 15 | let price = []; 16 | let data = series.map(item => { 17 | price.push(item.price); 18 | return { 19 | key: item.time, 20 | value: item.price, 21 | type: 'a', 22 | }; 23 | }); 24 | areaChart.source(data); 25 | 26 | if(xAxis) { 27 | if(xAxis.htAlign) { 28 | xAxis.label = util.label; 29 | } 30 | areaChart.scale('key', util.scale(xAxis)); 31 | areaChart.axis('key', util.axis(xAxis)); 32 | } 33 | if(yAxis) { 34 | areaChart.scale('value', util.scale(yAxis)); 35 | areaChart.axis('value', util.axis(yAxis)); 36 | } 37 | areaChart.tooltip(Object.assign(tooltip, { 38 | onChange: obj => { 39 | let currentPoint = { 40 | x: obj.x, 41 | y: obj.y 42 | }; 43 | columnChart.showTooltip(currentPoint); 44 | }, 45 | })); 46 | areaChart.legend(false); 47 | 48 | areaChart.area().position('key*value').color('type'); 49 | areaChart.line().position('key*value').color('type'); 50 | 51 | if(guide) { 52 | if(guide.line) { 53 | areaChart.guide().line(guide.line); 54 | } 55 | if(guide.text) { 56 | areaChart.guide().text(guide.text); 57 | } 58 | } 59 | 60 | areaChart.changeSize(widthArea, heightArea); 61 | 62 | if(!series || !series.length) { 63 | return; 64 | } 65 | 66 | let lastVolume = series[0].volume; 67 | data = series.map((item, i) => { 68 | let res = i ? { 69 | trend: item.price >= series[i - 1].price ? 0 : 1, 70 | key: item.time, 71 | value: item.volume - lastVolume, 72 | } : { 73 | trend: 0, 74 | key: item.time, 75 | value: item.volume, 76 | }; 77 | lastVolume = item.volume; 78 | return res; 79 | }); 80 | columnChart.source(data); 81 | 82 | columnChart.interval().position('key*value').color('trend', (item) => { 83 | return ['#FF4433', '#32A532'][item]; 84 | }); 85 | if(tooltip) { 86 | columnChart.tooltip(Object.assign(tooltip, { 87 | crosshairsType: 'y', 88 | custom: true, 89 | onChange: obj => { 90 | let currentPoint = { 91 | x: obj.x, 92 | y: obj.y 93 | }; 94 | areaChart.showTooltip(currentPoint); 95 | }, 96 | })); 97 | } 98 | else { 99 | columnChart.tooltip(false); 100 | } 101 | columnChart.legend(false); 102 | columnChart.axis(false); 103 | 104 | columnChart.changeSize(widthColumn, heightColumn); 105 | } 106 | 107 | Component({ 108 | mixins: [ 109 | { 110 | methods: { 111 | touchStartArea(e) { 112 | if (this.areaCanvas) { 113 | this.areaCanvas.emitEvent('touchstart', [e]); 114 | } 115 | }, 116 | touchMoveArea(e) { 117 | if (this.areaCanvas) { 118 | this.areaCanvas.emitEvent('touchmove', [e]); 119 | } 120 | }, 121 | touchEndArea(e) { 122 | if (this.areaCanvas) { 123 | this.areaCanvas.emitEvent('touchend', [e]); 124 | } 125 | }, 126 | touchStartColumn(e) { 127 | if (this.columnCanvas) { 128 | this.columnCanvas.emitEvent('touchstart', [e]); 129 | } 130 | }, 131 | touchMoveColumn(e) { 132 | if (this.columnCanvas) { 133 | this.columnCanvas.emitEvent('touchmove', [e]); 134 | } 135 | }, 136 | touchEndColumn(e) { 137 | if (this.columnCanvas) { 138 | this.columnCanvas.emitEvent('touchend', [e]); 139 | } 140 | }, 141 | }, 142 | } 143 | ], 144 | props: { 145 | series: [], 146 | xAxis: { 147 | tickCount: 3, 148 | }, 149 | yAxis: { 150 | tickCount: 3, 151 | }, 152 | appendPadding: 15, 153 | tooltip: false, 154 | }, 155 | didMount() { 156 | my.call('getStartupParams', {}, (result) => { 157 | util.tracert('timeshare', result.appId, result.url); 158 | }); 159 | 160 | const areaId = `am-mc-timeshare-area-${this.$id}`; 161 | const areaCtx = this.areaCtx = my.createCanvasContext(areaId); 162 | const areaCanvas = this.areaCanvas = new F2.Renderer(areaCtx); 163 | 164 | const columnId = `am-mc-timeshare-column-${this.$id}`; 165 | const columnCtx = this.columnCtx = my.createCanvasContext(columnId); 166 | const columnCanvas = this.columnCanvas = new F2.Renderer(columnCtx); 167 | 168 | const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio; 169 | areaCtx.scale(pixelRatio, pixelRatio); 170 | columnCtx.scale(pixelRatio, pixelRatio); 171 | 172 | my.createSelectorQuery() 173 | .select(`#${areaId}`) 174 | .boundingClientRect() 175 | .select(`#${columnId}`) 176 | .boundingClientRect() 177 | .exec(res => { 178 | if(!res || !res.length || !res[0] || !res[1]) { 179 | return; 180 | } 181 | const { width: widthArea, height: heightArea } = res[0]; 182 | const { width: widthColumn, height: heightColumn } = res[1]; 183 | 184 | this.setData({ 185 | widthArea: widthArea * pixelRatio, 186 | heightArea: heightArea * pixelRatio, 187 | widthColumn: widthColumn * pixelRatio, 188 | heightColumn: heightColumn * pixelRatio, 189 | }, () => { 190 | let { padding, appendPadding } = this.props; 191 | 192 | if(!Array.isArray(appendPadding)) { 193 | appendPadding = [appendPadding, appendPadding, appendPadding, appendPadding]; 194 | } 195 | 196 | const columnAppendPadding = Object.assign([], appendPadding); 197 | columnAppendPadding[0] = 0; 198 | 199 | this.areaChart = new F2.Chart({ 200 | el: areaCanvas, 201 | width: widthArea, 202 | height: heightArea, 203 | padding, 204 | appendPadding, 205 | }); 206 | 207 | this.columnChart = new F2.Chart({ 208 | el: columnCanvas, 209 | width: widthColumn, 210 | height: heightColumn, 211 | appendPadding: columnAppendPadding, 212 | }); 213 | 214 | render(this.areaChart, this.columnChart, this.props, widthArea, heightArea, widthColumn, heightColumn); 215 | }); 216 | }); 217 | }, 218 | didUpdate() { 219 | const areaId = `am-mc-timeshare-area-${this.$id}`; 220 | const columnId = `am-mc-timeshare-column-${this.$id}`; 221 | const pixelRatio = this.pixelRatio; 222 | 223 | my.createSelectorQuery() 224 | .select(`#${areaId}`) 225 | .boundingClientRect() 226 | .select(`#${columnId}`) 227 | .boundingClientRect() 228 | .exec(res => { 229 | if(!res || !res.length || !res[0] || !res[1]) { 230 | return; 231 | } 232 | const { width: widthArea, height: heightArea } = res[0]; 233 | const { width: widthColumn, height: heightColumn } = res[1]; 234 | if(this.data.widthArea !== widthArea * pixelRatio || this.data.heightArea !== heightArea * pixelRatio 235 | || this.data.widthColumn !== widthColumn * pixelRatio || this.data.heightColumn !== heightColumn * pixelRatio) { 236 | this.areaCtx.scale(pixelRatio, pixelRatio); 237 | this.columnCtx.scale(pixelRatio, pixelRatio); 238 | } 239 | 240 | this.setData({ 241 | widthArea: widthArea * pixelRatio, 242 | heightArea: heightArea * pixelRatio, 243 | widthColumn: widthColumn * pixelRatio, 244 | heightColumn: heightColumn * pixelRatio, 245 | }, () => { 246 | render(this.areaChart, this.columnChart, this.props, widthArea, heightArea, widthColumn, heightColumn); 247 | }); 248 | }); 249 | }, 250 | }); 251 | -------------------------------------------------------------------------------- /components/timeshare/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /components/util.js: -------------------------------------------------------------------------------- 1 | function scale(obj) { 2 | let key = ['range', 'tickCount', 'max', 'min', 'mask', 'type', 'nice', 'ticks']; 3 | let res = {}; 4 | for(let i = 0; i < key.length; i++) { 5 | let k = key[i]; 6 | if(obj.hasOwnProperty(k)) { 7 | res[k] = obj[k]; 8 | } 9 | } 10 | return res; 11 | } 12 | 13 | function axis(obj) { 14 | let key = ['label', 'line', 'grid']; 15 | let res = {}; 16 | for(let i = 0; i < key.length; i++) { 17 | let k = key[i]; 18 | if(obj.hasOwnProperty(k)) { 19 | if(k === 'line' && obj[k] === true) { 20 | obj[k] = F2.Global._defaultAxis.line; 21 | } 22 | else if(k === 'grid' && obj[k] === true) { 23 | obj[k] = F2.Global._defaultAxis.grid; 24 | } 25 | res[k] = obj[k]; 26 | } 27 | } 28 | return res; 29 | } 30 | 31 | function label(text, index, total) { 32 | const textCfg = {}; 33 | if (index === 0) { 34 | textCfg.textAlign = 'left'; 35 | } 36 | if (index === total - 1) { 37 | textCfg.textAlign = 'right'; 38 | } 39 | return textCfg; 40 | } 41 | 42 | function tracert(type, appId, url) { 43 | my.call('remotelog', { 44 | type: 'monitor', 45 | bizType: 'FORTUNEAPP', 46 | logLevel: 2, // 1 - high, 2 - medium, 3 - low 47 | actionId: 'exposure', 48 | param1: url, 49 | param4: { 50 | chInfo: '', 51 | type, 52 | appId, 53 | url, 54 | }, 55 | spmId: 'a945.b10625.c25441.d47746', 56 | }); 57 | } 58 | 59 | export default { 60 | scale, 61 | axis, 62 | label, 63 | tracert, 64 | }; 65 | -------------------------------------------------------------------------------- /examples/area/index.acss: -------------------------------------------------------------------------------- 1 | .area{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/area/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/area/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'area', 4 | categories: ['2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'], 5 | series: [ 6 | { 7 | type: 'a', 8 | style: 'dash', 9 | color: '#9CF', 10 | point: { 11 | size: 3, 12 | stroke: '#F00', 13 | lineWidth: 1, 14 | }, 15 | data: [116, 129, 135, 86, 73, 85, 73, 68, 92, 130, 245, 139, 115, 111, 309, 206, 137, 128, 85, 94, 71, 106, 84, 93, 85, 73, 83, 125, 107, 82, 44, 72, 106, 107, 66, 91, 92, 113, 107, 131, 111, 64, 69, 88, 77, 83, 111, 57, 55, 60], 16 | }, 17 | { 18 | type: 'b', 19 | color: '#93F', 20 | style: 'smooth', 21 | data: [60, 55, 57, 111, 83, 77, 88, 69, 64, 111, 131, 107, 113, 92, 91, 66, 107, 106, 72, 44, 82, 107, 125, 83, 73, 85, 93, 84, 106, 71, 94, 85, 128, 137, 206, 309, 111, 115, 139, 245, 130, 92, 68, 73, 85, 73, 86, 135, 129, 116], 22 | }, 23 | ], 24 | xAxis: { 25 | tickCount: 3, 26 | }, 27 | yAxis: { 28 | tickCount: 3, 29 | }, 30 | legend: { 31 | position: 'top', 32 | offsetY: 5 33 | }, 34 | tooltip: { 35 | showTitle: true, 36 | showCrosshairs: true, 37 | }, 38 | }, 39 | onReady() { 40 | setTimeout(() => { 41 | this.setData({ 42 | cn: 'area size', 43 | categories: ['2017-06-04', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'], 44 | }); 45 | }, 2000); 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /examples/area/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "area", 3 | "usingComponents": { 4 | "area": "../../components/area/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/bar/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/bar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/bar/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["巴西", "印尼", "美国", "印度", "中国"], 4 | series: [ 5 | { 6 | data: [18203, 23489, 29034, 104970, 131744], 7 | } 8 | ], 9 | xAxis: { 10 | tickCount: 5, 11 | }, 12 | yAxis: { 13 | tickCount: 4, 14 | }, 15 | coord: { 16 | transposed: true, 17 | }, 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /examples/bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "bar", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/bubble/index.acss: -------------------------------------------------------------------------------- 1 | /* required by usingComponents */ 2 | .bubble{ 3 | position:absolute; 4 | left:0; 5 | top:0; 6 | width:100%; 7 | height:50%; 8 | } 9 | .size{ 10 | height:100%; 11 | } 12 | -------------------------------------------------------------------------------- /examples/bubble/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/bubble/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'bubble', 4 | series: [ 5 | { 6 | xExtAlias:'gr3',//x轴坐标补充文字 7 | yExtAlias:'gr',//y轴坐标补充文字 8 | color:'#1890ff',//气泡颜色 9 | textColor:'#1890FF',//气泡内文字颜色 10 | data: [{ 11 | key: 95,//x轴 12 | value: 95,//y轴 13 | size: 39,//气泡大小 14 | name: 'BE',//气泡展示文字 15 | desc: 'Belgium'//tool tip展示文字 16 | }, 17 | { 18 | key: 86.5,//x轴 19 | value: 102.9,//y轴 20 | size: 14.7,//气泡大小 21 | name: 'DE',//气泡展示文字 22 | desc: 'Germany'//tool tip展示文字 23 | }, 24 | { 25 | key: 80.8,//x轴 26 | value: 91.5,//y轴 27 | size: 15.8,//气泡大小 28 | name: 'FI',//气泡展示文字 29 | desc: 'Finland'//tool tip展示文字 30 | }, 31 | { 32 | key: 80.4,//x轴 33 | value: 102.5,//y轴 34 | size: 12,//气泡大小 35 | name: 'NL',//气泡展示文字 36 | desc: 'Netherlands'//tool tip展示文字 37 | }, 38 | { 39 | key: 80.3,//x轴 40 | value: 86.1,//y轴 41 | size: 16.6,//气泡大小 42 | name: 'ES',//气泡展示文字 43 | desc: 'Spain'//tool tip展示文字 44 | }, 45 | { 46 | key: 71,//x轴 47 | value: 93.2,//y轴 48 | size: 24.7,//气泡大小 49 | name: 'UK',//气泡展示文字 50 | desc: 'United Kingdom'//tool tip展示文字 51 | }, 52 | { 53 | key: 65.5,//x轴 54 | value: 65.5,//y轴 55 | size: 35.3,//气泡大小 56 | name: 'US',//气泡展示文字 57 | desc: 'United States'//tool tip展示文字 58 | }], 59 | } 60 | ], 61 | xAxis: { 62 | tickCount: 5, 63 | }, 64 | yAxis: { 65 | tickCount: 4, 66 | }, 67 | grid: true, //是否展示网格辅助线 68 | }, 69 | onReady() { 70 | setTimeout(() => { 71 | this.setData({ 72 | cn: 'bubble size', 73 | grid: false, 74 | }); 75 | }, 2000); 76 | }, 77 | }); 78 | -------------------------------------------------------------------------------- /examples/bubble/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "bubble", 3 | "usingComponents": { 4 | "bubble": "../../components/bubble/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/column/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/column/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/column/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'column', 4 | categories: ["1951 年", "1952 年", "1956 年", "1957 年", "1958 年", "1959 年", "1960 年", "1962 年"], 5 | series: [ 6 | { 7 | data: [38, 52, 61, 145, 48, 38, 38, 38], 8 | } 9 | ], 10 | xAxis: { 11 | tickCount: 3, 12 | }, 13 | yAxis: { 14 | tickCount: 3, 15 | }, 16 | legend: { 17 | position: 'top', 18 | offsetY: 5 19 | }, 20 | }, 21 | onReady() { 22 | setTimeout(() => { 23 | this.setData({ 24 | cn: 'column size', 25 | categories: ["1950 年", "1952 年", "1956 年", "1957 年", "1958 年", "1959 年", "1960 年", "1962 年"], 26 | }); 27 | }, 2000); 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /examples/column/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "column", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/dodge-area/index.acss: -------------------------------------------------------------------------------- 1 | .area{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/dodge-area/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/dodge-area/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: [1940, 1941, 1942, 1943, 1944, 1945, 1946, 1947, 1948, 1949, 1950, 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], 4 | series: [ 5 | { 6 | type: 'USA', 7 | style: 'dash', 8 | color: '#9CF', 9 | point: { 10 | size: 3, 11 | stroke: '#F00', 12 | lineWidth: 1, 13 | }, 14 | data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326, 5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018], 15 | }, 16 | { 17 | type: 'Russia', 18 | color: '#93F', 19 | style: 'smooth', 20 | data: [null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787, 12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500], 21 | }, 22 | ], 23 | xAxis: { 24 | tickCount: 3, 25 | }, 26 | yAxis: { 27 | tickCount: 3, 28 | }, 29 | legend: { 30 | position: 'top', 31 | offsetY: 5 32 | }, 33 | adjust: 'dodge', 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /examples/dodge-area/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "dodge-area", 3 | "usingComponents": { 4 | "area": "../../components/area/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/dodge-bar/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/dodge-bar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /examples/dodge-bar/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["Mon.", "Tue.", "Wed.", "Thu.", "Fri."], 4 | series: [ 5 | { 6 | type: 'a', 7 | color: '#F00', 8 | data: [2800, 1800, 950, 500, 170], 9 | }, 10 | { 11 | type: 'b', 12 | data: [2260, 1300, 900, 390, 100], 13 | } 14 | ], 15 | xAxis: { 16 | tickCount: 5, 17 | }, 18 | yAxis: { 19 | tickCount: 4, 20 | }, 21 | adjust: 'dodge', 22 | coord: { 23 | transposed: true, 24 | }, 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/dodge-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "dodge-bar", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/dodge/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/dodge/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/dodge/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul.", "Aug."], 4 | series: [ 5 | { 6 | type: 'London', 7 | color: '#F00', 8 | data: [18.9, 28.8, 39.3, 81.4, 47, 20.3, 24, 35.6], 9 | }, 10 | { 11 | type: 'Berlin', 12 | data: [12.4, 23.2, 34.5, 99.7, 52.6, 35.5, 37.4, 42.4], 13 | } 14 | ], 15 | xAxis: { 16 | tickCount: 3, 17 | }, 18 | yAxis: { 19 | tickCount: 3, 20 | }, 21 | legend: { 22 | position: 'top', 23 | offsetY: 5 24 | }, 25 | adjust: 'dodge', 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /examples/dodge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "dodge", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/img/area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/area.png -------------------------------------------------------------------------------- /examples/img/bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/bar.png -------------------------------------------------------------------------------- /examples/img/bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/bubble.png -------------------------------------------------------------------------------- /examples/img/column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/column.png -------------------------------------------------------------------------------- /examples/img/dodge-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/dodge-area.png -------------------------------------------------------------------------------- /examples/img/dodge-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/dodge-bar.png -------------------------------------------------------------------------------- /examples/img/dodge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/dodge.png -------------------------------------------------------------------------------- /examples/img/double-axis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/double-axis.png -------------------------------------------------------------------------------- /examples/img/gauge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/gauge.png -------------------------------------------------------------------------------- /examples/img/k.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/k.png -------------------------------------------------------------------------------- /examples/img/labelline-pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/labelline-pie.png -------------------------------------------------------------------------------- /examples/img/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/line.png -------------------------------------------------------------------------------- /examples/img/pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/pie.png -------------------------------------------------------------------------------- /examples/img/radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/radar.png -------------------------------------------------------------------------------- /examples/img/radial-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/radial-bar.png -------------------------------------------------------------------------------- /examples/img/ring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/ring.png -------------------------------------------------------------------------------- /examples/img/rose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/rose.png -------------------------------------------------------------------------------- /examples/img/scatter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/scatter.png -------------------------------------------------------------------------------- /examples/img/stack-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/stack-area.png -------------------------------------------------------------------------------- /examples/img/stack-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/stack-bar.png -------------------------------------------------------------------------------- /examples/img/stack-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/stack-column.png -------------------------------------------------------------------------------- /examples/img/timeshare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ant-mini-program/mini-chart/f485b99b26875bc37ae7a6263acc5da1d231fd77/examples/img/timeshare.png -------------------------------------------------------------------------------- /examples/index/index.acss: -------------------------------------------------------------------------------- 1 | .container{ 2 | display:flex; 3 | flex-wrap: wrap; 4 | justify-content:space-around; 5 | box-sizing:border-box; 6 | font-family:Helvetica, Arial, "Helvetica Neue", "Droid Sans", "Microsoft YaHei", sans-serif; 7 | } 8 | 9 | .list-item{ 10 | flex-shrink: 0; 11 | padding:5px; 12 | width:70px; 13 | height:70px; 14 | text-align:center; 15 | font-size:12px; 16 | margin:10px; 17 | } 18 | 19 | .list-item image{ 20 | display:block; 21 | margin:0 auto 10px; 22 | box-sizing:border-box; 23 | width:100%; 24 | height:70px; 25 | padding:12px; 26 | background-color:#fff; 27 | border:1px solid #eee; 28 | border-radius:4px; 29 | } 30 | -------------------------------------------------------------------------------- /examples/index/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{chart.value}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /examples/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | charts: [ 4 | { name: 'line', value: '折线图' }, 5 | { name: 'area', value: '区域图' }, 6 | { name: 'dodge-area', value: '分组区域图' }, 7 | { name: 'stack-area', value: '层叠区域图' }, 8 | { name: 'column', value: '柱状图' }, 9 | { name: 'dodge', value: '分组柱状图' }, 10 | { name: 'stack-column', value: '层叠柱状图' }, 11 | { name: 'bar', value: '条形图' }, 12 | { name: 'dodge-bar', value: '分组条形图' }, 13 | { name: 'stack-bar', value: '层叠条形图' }, 14 | { name: 'ring', value: '环图' }, 15 | { name: 'pie', value: '饼图' }, 16 | { name: 'radial-bar', value: '嵌套环' }, 17 | { name: 'labelline-pie', value: '标签饼图' }, 18 | { name: 'rose', value: '玫瑰图' }, 19 | { name: 'radar', value: '雷达图' }, 20 | { name: 'scatter', value: '散点图' }, 21 | { name: 'bubble', value: '气泡图' }, 22 | { name: 'k', value: 'k线图' }, 23 | { name: 'timeshare', value: '分时图' }, 24 | ], 25 | }, 26 | gotoPage: function(e) { 27 | var page = e.currentTarget.dataset.page; 28 | my.navigateTo({ 29 | url: '../' + page + '/index', 30 | }); 31 | }, 32 | onReady: function() { 33 | }, 34 | }); 35 | -------------------------------------------------------------------------------- /examples/k/index.acss: -------------------------------------------------------------------------------- 1 | .k{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/k/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /examples/k/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'k', 4 | series: [ 5 | { 6 | time: '2015-10-09', 7 | start: 6.1, 8 | max: 6.44, 9 | min: 6.08, 10 | end: 6.34 11 | }, 12 | { 13 | time: '2015-10-12', 14 | start: 6.29, 15 | max: 6.89, 16 | min: 6.29, 17 | end: 6.69 18 | }, 19 | { 20 | time: '2015-10-13', 21 | start: 6.55, 22 | max: 6.81, 23 | min: 6.55, 24 | end: 6.75 25 | }, 26 | { 27 | time: '2015-10-14', 28 | start: 6.7, 29 | max: 6.99, 30 | min: 6.61, 31 | end: 6.66 32 | }, 33 | { 34 | time: '2015-10-15', 35 | start: 6.63, 36 | max: 6.9, 37 | min: 6.6, 38 | end: 6.89 39 | }, 40 | { 41 | time: '2015-10-16', 42 | start: 6.92, 43 | max: 7.38, 44 | min: 6.73, 45 | end: 7.15 46 | }, 47 | { 48 | time: '2015-10-19', 49 | start: 7.1, 50 | max: 7.14, 51 | min: 6.8, 52 | end: 6.94 53 | }, 54 | { 55 | time: '2015-10-20', 56 | start: 6.88, 57 | max: 7.19, 58 | min: 6.85, 59 | end: 7.12 60 | }, 61 | { 62 | time: '2015-10-21', 63 | start: 7.08, 64 | max: 7.1, 65 | min: 6.41, 66 | end: 6.41 67 | }, 68 | { 69 | time: '2015-10-22', 70 | start: 6.38, 71 | max: 6.67, 72 | min: 6.34, 73 | end: 6.65 74 | }, 75 | { 76 | time: '2015-10-23', 77 | start: 6.71, 78 | max: 6.85, 79 | min: 6.58, 80 | end: 6.79 81 | }, 82 | { 83 | time: '2015-10-26', 84 | start: 6.9, 85 | max: 7.08, 86 | min: 6.87, 87 | end: 6.95 88 | }, 89 | { 90 | time: '2015-10-27', 91 | start: 6.91, 92 | max: 7.31, 93 | min: 6.48, 94 | end: 7.18 95 | }, 96 | { 97 | time: '2015-10-28', 98 | start: 7.01, 99 | max: 7.14, 100 | min: 6.8, 101 | end: 6.85 102 | }, 103 | { 104 | time: '2015-10-29', 105 | start: 6.94, 106 | max: 7.2, 107 | min: 6.8, 108 | end: 7.05 109 | }, 110 | { 111 | time: '2015-10-30', 112 | start: 6.98, 113 | max: 7.27, 114 | min: 6.84, 115 | end: 7.18 116 | }, 117 | { 118 | time: '2015-11-02', 119 | start: 7.09, 120 | max: 7.44, 121 | min: 6.93, 122 | end: 7.17 123 | }, 124 | { 125 | time: '2015-11-03', 126 | start: 7.1, 127 | max: 7.17, 128 | min: 6.82, 129 | end: 7 130 | }, 131 | { 132 | time: '2015-11-04', 133 | start: 7.01, 134 | max: 7.5, 135 | min: 7.01, 136 | end: 7.46 137 | }, 138 | { 139 | time: '2015-11-05', 140 | start: 7.48, 141 | max: 7.57, 142 | min: 7.29, 143 | end: 7.48 144 | }, 145 | { 146 | time: '2015-11-06', 147 | start: 7.52, 148 | max: 7.71, 149 | min: 7.48, 150 | end: 7.64 151 | }, 152 | { 153 | time: '2015-11-09', 154 | start: 7.65, 155 | max: 7.66, 156 | min: 7.3, 157 | end: 7.58 158 | }, 159 | { 160 | time: '2015-11-10', 161 | start: 7.5, 162 | max: 7.68, 163 | min: 7.44, 164 | end: 7.57 165 | }, 166 | { 167 | time: '2015-11-11', 168 | start: 7.55, 169 | max: 7.81, 170 | min: 7.49, 171 | end: 7.8 172 | }, 173 | { 174 | time: '2015-11-12', 175 | start: 7.76, 176 | max: 8.18, 177 | min: 7.61, 178 | end: 8.15 179 | }, 180 | { 181 | time: '2015-11-13', 182 | start: 8.01, 183 | max: 8.75, 184 | min: 7.97, 185 | end: 8.41 186 | }, 187 | { 188 | time: '2015-11-16', 189 | start: 8.18, 190 | max: 8.69, 191 | min: 8.05, 192 | end: 8.62 193 | }, 194 | { 195 | time: '2015-11-17', 196 | start: 8.7, 197 | max: 8.78, 198 | min: 8.32, 199 | end: 8.37 200 | }, 201 | { 202 | time: '2015-11-18', 203 | start: 8.37, 204 | max: 8.6, 205 | min: 8.03, 206 | end: 8.09 207 | }, 208 | { 209 | time: '2015-11-19', 210 | start: 8.18, 211 | max: 8.33, 212 | min: 7.98, 213 | end: 8.32 214 | } 215 | ], 216 | xAxis: { 217 | tickCount: 3, 218 | }, 219 | yAxis: { 220 | tickCount: 3, 221 | }, 222 | guide: { 223 | line: { 224 | start: ['min', 7], 225 | end: ['max', 7], 226 | style: { 227 | lineDash: [8], 228 | stroke: '#F68300' 229 | } 230 | }, 231 | text: { 232 | position: ['min', 7], 233 | content: 7, 234 | style: { 235 | fill: '#808080', 236 | textAlign: 'start', 237 | textBaseline: 'bottom', 238 | fontSize: 10, 239 | fontWeight: 'bold' 240 | }, 241 | offsetX: 2 242 | }, 243 | }, 244 | }, 245 | onReady() { 246 | setTimeout(() => { 247 | this.setData({ 248 | cn: 'k size', 249 | xAxis: { 250 | tickCount: 3, 251 | }, 252 | }); 253 | }, 2000); 254 | }, 255 | }); 256 | -------------------------------------------------------------------------------- /examples/k/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "k", 3 | "usingComponents": { 4 | "k": "../../components/k/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/labelline-pie/index.acss: -------------------------------------------------------------------------------- 1 | .pie{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } -------------------------------------------------------------------------------- /examples/labelline-pie/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /examples/labelline-pie/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | series: [ 4 | { 5 | color: '#F00', 6 | type: '芳华', 7 | data: 0.4 8 | }, 9 | { 10 | type: '妖猫传', 11 | data: 0.2 12 | }, 13 | { 14 | type: '机器之血', 15 | data: 0.18 16 | }, 17 | { 18 | type: '心理罪', 19 | data: 0.15 20 | }, 21 | { 22 | type: '寻梦环游记', 23 | data: 0.05 24 | }, 25 | { 26 | type: '其他', 27 | data: 0.02 28 | }, 29 | ], 30 | radius: 0.6, 31 | style: { 32 | lineWidth: 2, 33 | stroke: '#fff', 34 | }, 35 | legend: { 36 | position: 'top', 37 | }, 38 | tooltip:true, 39 | pieLabel: true, //是否展示标签示例文字, 40 | activeShape:true,//饼图是否有点击效果 41 | sidePadding: 40 //标签文字和饼图之间的padding，越大越近，越小越远 42 | }, 43 | }); -------------------------------------------------------------------------------- /examples/labelline-pie/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "labelline-pie", 3 | "usingComponents": { 4 | "pie": "../../components/pie/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/line/index.acss: -------------------------------------------------------------------------------- 1 | .line{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/line/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/line/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'line', 4 | categories: ['2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'], 5 | series: [ 6 | { 7 | type: 'a', 8 | style: 'dash', 9 | point: { 10 | size: 3, 11 | stroke: '#F00', 12 | lineWidth: 1, 13 | }, 14 | data: [116, 129, 135, 86, 73, 85, 73, 68, 92, 130, 245, 139, 115, 111, 309, 206, 137, 128, 85, 94, 71, 106, 84, 93, 85, 73, 83, 125, 107, 82, 44, 72, 106, 107, 66, 91, 92, 113, 107, 131, 111, 64, 69, 88, 77, 83, 111, 57, 55, 60], 15 | }, 16 | { 17 | type: 'b', 18 | color: '#93F', 19 | style: 'smooth', 20 | data: [60, 55, 57, 111, 83, 77, 88, 69, 64, 111, 131, 107, 113, 92, 91, 66, 107, 106, 72, 44, 82, 107, 125, 83, 73, 85, 93, 84, 106, 71, 94, 85, 128, 137, 206, 309, 111, 115, 139, 245, 130, 92, 68, 73, 85, 73, 86, 135, 129, 116], 21 | }, 22 | ], 23 | xAxis: { 24 | tickCount: 3, 25 | }, 26 | yAxis: { 27 | tickCount: 3, 28 | }, 29 | legend: { 30 | position: 'top', 31 | offsetY: 5 32 | }, 33 | tooltip: { 34 | showTitle: true, 35 | showCrosshairs: true, 36 | }, 37 | }, 38 | onReady() { 39 | setTimeout(() => { 40 | this.setData({ 41 | cn: 'line size', 42 | categories: ['2017-06-04', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'], 43 | }); 44 | }, 2000); 45 | }, 46 | }); 47 | -------------------------------------------------------------------------------- /examples/line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "line", 3 | "usingComponents": { 4 | "line": "../../components/line/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/pie/index.acss: -------------------------------------------------------------------------------- 1 | .pie{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:90%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/pie/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /examples/pie/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'pie', 4 | series: [ 5 | { 6 | color: '#F00', 7 | type: '芳华', 8 | data: 0.4 9 | }, 10 | { 11 | type: '妖猫传', 12 | data: 0.2 13 | }, 14 | { 15 | type: '机器之血', 16 | data: 0.18 17 | }, 18 | { 19 | type: '心理罪', 20 | data: 0.15 21 | }, 22 | { 23 | type: '寻梦环游记', 24 | data: 0.05 25 | }, 26 | { 27 | type: '其他', 28 | data: 0.02 29 | }, 30 | ], 31 | radius: 0.7, 32 | style: { 33 | lineWidth: 2, 34 | stroke: '#fff', 35 | }, 36 | legend: { 37 | position: 'top', 38 | }, 39 | tooltip:true 40 | }, 41 | onReady() { 42 | setTimeout(() => { 43 | this.setData({ 44 | cn: 'pie size', 45 | radius: 0.6, 46 | }); 47 | }, 2000); 48 | }, 49 | }); 50 | -------------------------------------------------------------------------------- /examples/pie/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "pie", 3 | "usingComponents": { 4 | "pie": "../../components/pie/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/radar-fund/index.acss: -------------------------------------------------------------------------------- 1 | .radar{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } -------------------------------------------------------------------------------- /examples/radar-fund/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /examples/radar-fund/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["超大盘能力", "抗跌能力", "稳定能力", "绝对收益能力", "选证择时能力", "风险回报能力"], 4 | series: [ 5 | { 6 | type: '近一月', 7 | style: 'stoke', 8 | point: { 9 | size: 3, 10 | stroke: '#F00', 11 | lineWidth: 1, 12 | }, 13 | data: [6.5, 9.5, 9, 6, 6, 8], 14 | guideContent:'7.5' 15 | }, 16 | { 17 | type: '近三月', 18 | color: '#93F', 19 | style: 'stoke', 20 | data: [6, 7.5, 7, 5, 5, 8], 21 | guideContent:'6.4' 22 | }, 23 | { 24 | type: '近六月', 25 | color: '#93F', 26 | style: 'stoke', 27 | data: [6, 8.5, 7, 5, 6, 5.5], 28 | guideContent:'6.3' 29 | }, 30 | ], 31 | yAxis: { 32 | tickCount: 5, 33 | min: 0, 34 | max: 10, 35 | }, 36 | legend: { 37 | position: 'top', 38 | offsetY: 5 39 | }, 40 | fund:true, 41 | guide: { 42 | text: { 43 | position: ['50%', '50%'], 44 | content: '...', 45 | style: { 46 | fontSize: 40, 47 | fill: '#1890FF', 48 | }, 49 | }, 50 | }, 51 | }, 52 | }); -------------------------------------------------------------------------------- /examples/radar-fund/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "radar-fund", 3 | "usingComponents": { 4 | "radar": "../../components/radar/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/radar/index.acss: -------------------------------------------------------------------------------- 1 | .radar{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/radar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /examples/radar/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'radar', 4 | categories: ["Design", "Development", "Marketing", "Users", "Test", "Language", "Technology", "Support"], 5 | series: [ 6 | { 7 | type: 'a', 8 | style: 'dash', 9 | point: { 10 | size: 3, 11 | stroke: '#F00', 12 | lineWidth: 1, 13 | }, 14 | data: [70, 60, 50, 40, 60, 70, 70, 60], 15 | }, 16 | { 17 | type: 'b', 18 | color: '#93F', 19 | style: 'smooth', 20 | data: [30, 70, 60, 50, 70, 50, 40, 40], 21 | }, 22 | ], 23 | yAxis: { 24 | tickCount: 3, 25 | min: 0, 26 | max: 120, 27 | }, 28 | legend: { 29 | position: 'top', 30 | offsetY: 5 31 | }, 32 | }, 33 | onReady() { 34 | setTimeout(() => { 35 | this.setData({ 36 | cn: 'radar size', 37 | categories: ["Design", "Development", "Marketing", "Users", "Test", "Language", "Technology", "Support"], 38 | }); 39 | }, 2000); 40 | }, 41 | }); 42 | -------------------------------------------------------------------------------- /examples/radar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "radar", 3 | "usingComponents": { 4 | "radar": "../../components/radar/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/radial-bar/index.acss: -------------------------------------------------------------------------------- 1 | .radial-bar{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } -------------------------------------------------------------------------------- /examples/radial-bar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /examples/radial-bar/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | series: [ 4 | { 5 | color: '#F00', 6 | key:'1', 7 | type: '芳华', 8 | data: 0.4 9 | }, 10 | { 11 | key:'2', 12 | type: '芳华', 13 | data: 0.8 14 | }, 15 | { 16 | key:'3', 17 | type: '芳华', 18 | data: 0.2 19 | }, 20 | { 21 | key:'1', 22 | type: '妖猫传', 23 | data: 0.6 24 | }, 25 | { 26 | key:'2', 27 | type: '妖猫传', 28 | data: 0.2 29 | }, 30 | { 31 | key:'3', 32 | type: '妖猫传', 33 | data: 0.8 34 | } 35 | ], 36 | cascade: true, //是否展示环图 37 | innerRadius: 0.5,//环图内半径 38 | radius: 0.6, 39 | style: { 40 | lineWidth: 2, 41 | stroke: '#fff', 42 | }, 43 | legend: { 44 | position: 'top', 45 | }, 46 | tooltip:true 47 | }, 48 | }); -------------------------------------------------------------------------------- /examples/radial-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "radial-bar", 3 | "usingComponents": { 4 | "pie": "../../components/pie/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/ring/index.acss: -------------------------------------------------------------------------------- 1 | .ring{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/ring/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /examples/ring/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | series: [ 4 | { 5 | type: '股票类', 6 | data: 83.59, 7 | color: 'red', 8 | }, 9 | { 10 | type: '债券类', 11 | data: 2.17, 12 | }, 13 | { 14 | type: '现金类', 15 | data: 14.24, 16 | }, 17 | ], 18 | radius: 0.85, 19 | innerRadius: 0.7, 20 | legend: { 21 | position: 'right', 22 | }, 23 | guide: { 24 | text: { 25 | position: ['50%', '50%'], 26 | content: 'guide', 27 | style: { 28 | fontSize: 40, 29 | fill: '#1890FF', 30 | }, 31 | }, 32 | }, 33 | }, 34 | }); 35 | -------------------------------------------------------------------------------- /examples/ring/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "ring", 3 | "usingComponents": { 4 | "pie": "../../components/pie/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/rose/index.acss: -------------------------------------------------------------------------------- 1 | .rose{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/rose/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | -------------------------------------------------------------------------------- /examples/rose/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'rose', 4 | series: [ 5 | { 6 | color: '#F00', 7 | type: '芳华', 8 | data: 0.4 9 | }, 10 | { 11 | type: '妖猫传', 12 | data: 0.2 13 | }, 14 | { 15 | type: '机器之血', 16 | data: 0.18 17 | }, 18 | { 19 | type: '心理罪', 20 | data: 0.15 21 | }, 22 | { 23 | type: '寻梦环游记', 24 | data: 0.05 25 | }, 26 | { 27 | type: '其他', 28 | data: 0.02 29 | }, 30 | ], 31 | style: { 32 | lineWidth: 2, 33 | stroke: '#fff', 34 | }, 35 | legend: { 36 | position: 'top', 37 | }, 38 | }, 39 | onReady() { 40 | setTimeout(() => { 41 | this.setData({ 42 | cn: 'rose size', 43 | legend: { 44 | position: 'top', 45 | }, }); 46 | }, 2000); 47 | }, 48 | }); 49 | -------------------------------------------------------------------------------- /examples/rose/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "rose", 3 | "usingComponents": { 4 | "rose": "../../components/rose/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/scatter/index.acss: -------------------------------------------------------------------------------- 1 | .scatter{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/scatter/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/scatter/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'scatter', 4 | series: [ 5 | { 6 | type: 'female', 7 | color: '#F00', 8 | size: 3, 9 | data: [ 10 | { 11 | "key": 161.2, 12 | "value": 51.6 13 | }, 14 | { 15 | "key": 167.5, 16 | "value": 59 17 | }, 18 | { 19 | "key": 159.5, 20 | "value": 49.2 21 | }, 22 | { 23 | "key": 157, 24 | "value": 63 25 | }, 26 | { 27 | "key": 155.8, 28 | "value": 53.6 29 | }, 30 | { 31 | "key": 170, 32 | "value": 59 33 | }, 34 | { 35 | "key": 159.1, 36 | "value": 47.6 37 | }, 38 | { 39 | "key": 166, 40 | "value": 69.8 41 | }, 42 | { 43 | "key": 176.2, 44 | "value": 66.8 45 | }, 46 | { 47 | "key": 160.2, 48 | "value": 75.2 49 | }, 50 | { 51 | "key": 172.5, 52 | "value": 55.2 53 | }, 54 | { 55 | "key": 170.9, 56 | "value": 54.2 57 | }, 58 | { 59 | "key": 172.9, 60 | "value": 62.5 61 | }, 62 | { 63 | "key": 153.4, 64 | "value": 42 65 | }, 66 | { 67 | "key": 160, 68 | "value": 50 69 | }, 70 | { 71 | "key": 147.2, 72 | "value": 49.8 73 | }, 74 | { 75 | "key": 168.2, 76 | "value": 49.2 77 | }, 78 | { 79 | "key": 175, 80 | "value": 73.2 81 | }, 82 | { 83 | "key": 157, 84 | "value": 47.8 85 | }, 86 | { 87 | "key": 167.6, 88 | "value": 68.8 89 | }, 90 | { 91 | "key": 159.5, 92 | "value": 50.6 93 | } 94 | ], 95 | }, 96 | { 97 | type: 'male', 98 | size: 3, 99 | data: [ 100 | { 101 | "key": 170.3, 102 | "value": 73.2 103 | }, 104 | { 105 | "key": 180.3, 106 | "value": 83.2 107 | } 108 | ], 109 | } 110 | ], 111 | style: { 112 | fillOpacity: 0.3, 113 | }, 114 | xAxis: { 115 | tickCount: 5, 116 | }, 117 | yAxis: { 118 | tickCount: 5, 119 | }, 120 | legend: { 121 | position: 'top', 122 | }, 123 | }, 124 | onReady() { 125 | setTimeout(() => { 126 | this.setData({ 127 | cn: 'scatter size', 128 | legend: { 129 | position: 'top', 130 | }, }); 131 | }, 2000); 132 | }, 133 | }); 134 | -------------------------------------------------------------------------------- /examples/scatter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "scatter", 3 | "usingComponents": { 4 | "scatter": "../../components/scatter/index" 5 | } 6 | } -------------------------------------------------------------------------------- /examples/stack-area/index.acss: -------------------------------------------------------------------------------- 1 | .area{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/stack-area/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/stack-area/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: [1940, 1941, 1942, 1943, 1944, 1945, 1946, 1947, 1948, 1949, 1950, 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959, 1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], 4 | series: [ 5 | { 6 | type: 'USA', 7 | style: 'dash', 8 | color: '#9CF', 9 | point: { 10 | size: 3, 11 | stroke: '#F00', 12 | lineWidth: 1, 13 | }, 14 | data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326, 5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018], 15 | }, 16 | { 17 | type: 'Russia', 18 | color: '#93F', 19 | style: 'smooth', 20 | data: [null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787, 12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500], 21 | }, 22 | ], 23 | xAxis: { 24 | tickCount: 3, 25 | }, 26 | yAxis: { 27 | tickCount: 3, 28 | }, 29 | legend: { 30 | position: 'top', 31 | offsetY: 5 32 | }, 33 | adjust: 'stack', 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /examples/stack-area/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "stack-area", 3 | "usingComponents": { 4 | "area": "../../components/area/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/stack-bar/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/stack-bar/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | -------------------------------------------------------------------------------- /examples/stack-bar/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["Mon.", "Tue.", "Wed.", "Thu.", "Fri."], 4 | series: [ 5 | { 6 | type: 'a', 7 | color: '#F00', 8 | data: [2800, 1800, 950, 500, 170], 9 | }, 10 | { 11 | type: 'b', 12 | data: [2260, 1300, 900, 390, 100], 13 | } 14 | ], 15 | xAxis: { 16 | tickCount: 5, 17 | }, 18 | yAxis: { 19 | tickCount: 4, 20 | }, 21 | adjust: 'stack', 22 | coord: { 23 | transposed: true, 24 | }, 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/stack-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "stack-bar", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/stack-column/index.acss: -------------------------------------------------------------------------------- 1 | .column{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:100%; 7 | } 8 | -------------------------------------------------------------------------------- /examples/stack-column/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | -------------------------------------------------------------------------------- /examples/stack-column/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | categories: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul.", "Aug."], 4 | series: [ 5 | { 6 | type: 'London', 7 | color: '#F00', 8 | data: [18.9, 28.8, 39.3, 81.4, 47, 20.3, 24, 35.6], 9 | }, 10 | { 11 | type: 'Berlin', 12 | data: [12.4, 23.2, 34.5, 99.7, 52.6, 35.5, 37.4, 42.4], 13 | } 14 | ], 15 | xAxis: { 16 | tickCount: 3, 17 | }, 18 | yAxis: { 19 | tickCount: 3, 20 | }, 21 | legend: { 22 | position: 'top', 23 | offsetY: 5 24 | }, 25 | adjust: 'stack', 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /examples/stack-column/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "stack-column", 3 | "usingComponents": { 4 | "column": "../../components/column/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/timeshare/index.acss: -------------------------------------------------------------------------------- 1 | .timeshare{ 2 | position:absolute; 3 | left:0; 4 | top:0; 5 | width:100%; 6 | height:50%; 7 | } 8 | .size{ 9 | height:100%; 10 | } 11 | -------------------------------------------------------------------------------- /examples/timeshare/index.axml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /examples/timeshare/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | cn: 'timeshare', 4 | series: [{"time": "09:30", "price": 3.51, "volume": 3607}, { 5 | "time": "09:31", 6 | "price": 3.55, 7 | "volume": 4651 8 | }, {"time": "09:32", "price": 3.52, "volume": 4959}, { 9 | "time": "09:33", 10 | "price": 3.6, 11 | "volume": 8040 12 | }, {"time": "09:34", "price": 3.65, "volume": 11629}, { 13 | "time": "09:35", 14 | "price": 3.66, 15 | "volume": 16751 16 | }, {"time": "09:36", "price": 3.71, "volume": 21835}, { 17 | "time": "09:37", 18 | "price": 3.65, 19 | "volume": 24081 20 | }, {"time": "09:38", "price": 3.67, "volume": 25235}, { 21 | "time": "09:39", 22 | "price": 3.72, 23 | "volume": 30912 24 | }, {"time": "09:40", "price": 3.76, "volume": 37643}, { 25 | "time": "09:41", 26 | "price": 3.7, 27 | "volume": 39704 28 | }, {"time": "09:42", "price": 3.77, "volume": 44969}, { 29 | "time": "09:43", 30 | "price": 3.74, 31 | "volume": 46685 32 | }, {"time": "09:44", "price": 3.72, "volume": 48431}, { 33 | "time": "09:45", 34 | "price": 3.9, 35 | "volume": 59112 36 | }, {"time": "09:46", "price": 3.91, "volume": 69519}, { 37 | "time": "09:47", 38 | "price": 3.91, 39 | "volume": 71032 40 | }, {"time": "09:48", "price": 3.91, "volume": 72977}, { 41 | "time": "09:49", 42 | "price": 3.91, 43 | "volume": 74119 44 | }, {"time": "09:50", "price": 3.91, "volume": 75469}, { 45 | "time": "09:51", 46 | "price": 3.91, 47 | "volume": 75944 48 | }, {"time": "09:52", "price": 3.91, "volume": 76460}, { 49 | "time": "09:53", 50 | "price": 3.91, 51 | "volume": 76679 52 | }, {"time": "09:54", "price": 3.91, "volume": 77056}, { 53 | "time": "09:55", 54 | "price": 3.91, 55 | "volume": 77293 56 | }, {"time": "09:56", "price": 3.91, "volume": 77378}, { 57 | "time": "09:57", 58 | "price": 3.91, 59 | "volume": 77519 60 | }, {"time": "09:58", "price": 3.91, "volume": 77773}, { 61 | "time": "09:59", 62 | "price": 3.91, 63 | "volume": 77945 64 | }, {"time": "10:00", "price": 3.91, "volume": 78278}, { 65 | "time": "10:01", 66 | "price": 3.91, 67 | "volume": 78320 68 | }, {"time": "10:02", "price": 3.91, "volume": 78438}, { 69 | "time": "10:03", 70 | "price": 3.91, 71 | "volume": 78588 72 | }, {"time": "10:04", "price": 3.91, "volume": 78625}, { 73 | "time": "10:05", 74 | "price": 3.91, 75 | "volume": 78795 76 | }, {"time": "10:06", "price": 3.91, "volume": 78984}, { 77 | "time": "10:07", 78 | "price": 3.91, 79 | "volume": 79045 80 | }, {"time": "10:08", "price": 3.91, "volume": 79138}, { 81 | "time": "10:09", 82 | "price": 3.91, 83 | "volume": 79283 84 | }, {"time": "10:10", "price": 3.91, "volume": 80948}, { 85 | "time": "10:11", 86 | "price": 3.91, 87 | "volume": 83281 88 | }, {"time": "10:12", "price": 3.91, "volume": 84307}, { 89 | "time": "10:13", 90 | "price": 3.91, 91 | "volume": 84727 92 | }, {"time": "10:14", "price": 3.91, "volume": 85022}, { 93 | "time": "10:15", 94 | "price": 3.91, 95 | "volume": 85513 96 | }, {"time": "10:16", "price": 3.91, "volume": 86705}, { 97 | "time": "10:17", 98 | "price": 3.91, 99 | "volume": 89644 100 | }, {"time": "10:18", "price": 3.91, "volume": 90633}, { 101 | "time": "10:19", 102 | "price": 3.91, 103 | "volume": 91482 104 | }, {"time": "10:20", "price": 3.91, "volume": 91723}, { 105 | "time": "10:21", 106 | "price": 3.91, 107 | "volume": 92850 108 | }, {"time": "10:22", "price": 3.91, "volume": 93059}, { 109 | "time": "10:23", 110 | "price": 3.91, 111 | "volume": 93834 112 | }, {"time": "10:24", "price": 3.91, "volume": 94177}, { 113 | "time": "10:25", 114 | "price": 3.91, 115 | "volume": 94434 116 | }, {"time": "10:26", "price": 3.91, "volume": 95225}, { 117 | "time": "10:27", 118 | "price": 3.91, 119 | "volume": 95409 120 | }, {"time": "10:28", "price": 3.91, "volume": 95811}, { 121 | "time": "10:29", 122 | "price": 3.91, 123 | "volume": 97324 124 | }, {"time": "10:30", "price": 3.91, "volume": 98086}, { 125 | "time": "10:31", 126 | "price": 3.91, 127 | "volume": 99399 128 | }, {"time": "10:32", "price": 3.91, "volume": 99671}, { 129 | "time": "10:33", 130 | "price": 3.91, 131 | "volume": 99695 132 | }, {"time": "10:34", "price": 3.91, "volume": 99705}, { 133 | "time": "10:35", 134 | "price": 3.91, 135 | "volume": 99853 136 | }, {"time": "10:36", "price": 3.91, "volume": 99994}, { 137 | "time": "10:37", 138 | "price": 3.91, 139 | "volume": 100127 140 | }, {"time": "10:38", "price": 3.91, "volume": 100154}, { 141 | "time": "10:39", 142 | "price": 3.91, 143 | "volume": 100228 144 | }, {"time": "10:40", "price": 3.91, "volume": 100644}, { 145 | "time": "10:41", 146 | "price": 3.91, 147 | "volume": 100707 148 | }, {"time": "10:42", "price": 3.91, "volume": 100821}, { 149 | "time": "10:43", 150 | "price": 3.91, 151 | "volume": 100887 152 | }, {"time": "10:44", "price": 3.91, "volume": 101030}, { 153 | "time": "10:45", 154 | "price": 3.91, 155 | "volume": 101040 156 | }, {"time": "10:46", "price": 3.91, "volume": 101082}, { 157 | "time": "10:47", 158 | "price": 3.91, 159 | "volume": 101095 160 | }, {"time": "10:48", "price": 3.91, "volume": 101168}, { 161 | "time": "10:49", 162 | "price": 3.91, 163 | "volume": 101309 164 | }, {"time": "10:50", "price": 3.91, "volume": 101507}, { 165 | "time": "10:51", 166 | "price": 3.91, 167 | "volume": 101774 168 | }, {"time": "10:52", "price": 3.91, "volume": 102118}, { 169 | "time": "10:53", 170 | "price": 3.91, 171 | "volume": 103357 172 | }, {"time": "10:54", "price": 3.91, "volume": 103802}, { 173 | "time": "10:55", 174 | "price": 3.91, 175 | "volume": 103815 176 | }, {"time": "10:56", "price": 3.91, "volume": 103950}, { 177 | "time": "10:57", 178 | "price": 3.91, 179 | "volume": 103984 180 | }, {"time": "10:58", "price": 3.91, "volume": 103984}, { 181 | "time": "10:59", 182 | "price": 3.91, 183 | "volume": 104103 184 | }, {"time": "11:00", "price": 3.91, "volume": 104140}, { 185 | "time": "11:01", 186 | "price": 3.91, 187 | "volume": 104180 188 | }, {"time": "11:02", "price": 3.91, "volume": 104201}, { 189 | "time": "11:03", 190 | "price": 3.91, 191 | "volume": 104239 192 | }, {"time": "11:04", "price": 3.91, "volume": 104442}, { 193 | "time": "11:05", 194 | "price": 3.91, 195 | "volume": 104476 196 | }, {"time": "11:06", "price": 3.91, "volume": 104526}, { 197 | "time": "11:07", 198 | "price": 3.91, 199 | "volume": 104536 200 | }, {"time": "11:08", "price": 3.91, "volume": 104605}, { 201 | "time": "11:09", 202 | "price": 3.91, 203 | "volume": 104605 204 | }, {"time": "11:10", "price": 3.91, "volume": 104605}, { 205 | "time": "11:11", 206 | "price": 3.91, 207 | "volume": 104674 208 | }, {"time": "11:12", "price": 3.91, "volume": 104699}, { 209 | "time": "11:13", 210 | "price": 3.91, 211 | "volume": 104719 212 | }, {"time": "11:14", "price": 3.91, "volume": 104755}, { 213 | "time": "11:15", 214 | "price": 3.91, 215 | "volume": 104776 216 | }, {"time": "11:16", "price": 3.91, "volume": 104890}, { 217 | "time": "11:17", 218 | "price": 3.91, 219 | "volume": 104892 220 | }, {"time": "11:18", "price": 3.91, "volume": 104894}, { 221 | "time": "11:19", 222 | "price": 3.91, 223 | "volume": 104896 224 | }, {"time": "11:20", "price": 3.91, "volume": 104905}, { 225 | "time": "11:21", 226 | "price": 3.91, 227 | "volume": 104928 228 | }, {"time": "11:22", "price": 3.91, "volume": 105049}, { 229 | "time": "11:23", 230 | "price": 3.91, 231 | "volume": 105069 232 | }, {"time": "11:24", "price": 3.91, "volume": 105070}, { 233 | "time": "11:25", 234 | "price": 3.91, 235 | "volume": 105072 236 | }, {"time": "11:26", "price": 3.91, "volume": 105081}, { 237 | "time": "11:27", 238 | "price": 3.91, 239 | "volume": 105137 240 | }, {"time": "11:28", "price": 3.91, "volume": 105169}, { 241 | "time": "11:29", 242 | "price": 3.91, 243 | "volume": 105187 244 | }, {"time": "11:30", "price": 3.91, "volume": 105187}, { 245 | "time": "13:00", 246 | "price": 3.91, 247 | "volume": 106136 248 | }, {"time": "13:01", "price": 3.91, "volume": 106186}, { 249 | "time": "13:02", 250 | "price": 3.91, 251 | "volume": 106290 252 | }, {"time": "13:03", "price": 3.91, "volume": 106443}, { 253 | "time": "13:04", 254 | "price": 3.91, 255 | "volume": 106443 256 | }, {"time": "13:05", "price": 3.91, "volume": 106445}, { 257 | "time": "13:06", 258 | "price": 3.91, 259 | "volume": 106465 260 | }, {"time": "13:07", "price": 3.91, "volume": 106465}, { 261 | "time": "13:08", 262 | "price": 3.91, 263 | "volume": 106565 264 | }, {"time": "13:09", "price": 3.91, "volume": 106585}, { 265 | "time": "13:10", 266 | "price": 3.91, 267 | "volume": 106591 268 | }, {"time": "13:11", "price": 3.91, "volume": 106613}, { 269 | "time": "13:12", 270 | "price": 3.91, 271 | "volume": 106635 272 | }, {"time": "13:13", "price": 3.91, "volume": 106667}, { 273 | "time": "13:14", 274 | "price": 3.91, 275 | "volume": 106818 276 | }, {"time": "13:15", "price": 3.91, "volume": 106818}, { 277 | "time": "13:16", 278 | "price": 3.91, 279 | "volume": 106818 280 | }, {"time": "13:17", "price": 3.91, "volume": 106860}, { 281 | "time": "13:18", 282 | "price": 3.91, 283 | "volume": 106900 284 | }, {"time": "13:19", "price": 3.91, "volume": 106900}, { 285 | "time": "13:20", 286 | "price": 3.91, 287 | "volume": 106902 288 | }, {"time": "13:21", "price": 3.91, "volume": 106912}, { 289 | "time": "13:22", 290 | "price": 3.91, 291 | "volume": 106920 292 | }, {"time": "13:23", "price": 3.91, "volume": 106945}, { 293 | "time": "13:24", 294 | "price": 3.91, 295 | "volume": 106975 296 | }, {"time": "13:25", "price": 3.91, "volume": 106975}, { 297 | "time": "13:26", 298 | "price": 3.91, 299 | "volume": 106990 300 | }, {"time": "13:27", "price": 3.91, "volume": 107090}, { 301 | "time": "13:28", 302 | "price": 3.91, 303 | "volume": 107100 304 | }, {"time": "13:29", "price": 3.91, "volume": 107101}, { 305 | "time": "13:30", 306 | "price": 3.91, 307 | "volume": 107116 308 | }, {"time": "13:31", "price": 3.91, "volume": 107180}, { 309 | "time": "13:32", 310 | "price": 3.91, 311 | "volume": 107182 312 | }, {"time": "13:33", "price": 3.91, "volume": 107182}, { 313 | "time": "13:34", 314 | "price": 3.91, 315 | "volume": 107192 316 | }, {"time": "13:35", "price": 3.91, "volume": 107193}, { 317 | "time": "13:36", 318 | "price": 3.91, 319 | "volume": 107200 320 | }, {"time": "13:37", "price": 3.91, "volume": 107220}, { 321 | "time": "13:38", 322 | "price": 3.91, 323 | "volume": 107222 324 | }, {"time": "13:39", "price": 3.91, "volume": 107251}, { 325 | "time": "13:40", 326 | "price": 3.91, 327 | "volume": 107301 328 | }, {"time": "13:41", "price": 3.91, "volume": 107302}, { 329 | "time": "13:42", 330 | "price": 3.91, 331 | "volume": 107342 332 | }, {"time": "13:43", "price": 3.91, "volume": 107342}, { 333 | "time": "13:44", 334 | "price": 3.91, 335 | "volume": 107344 336 | }, {"time": "13:45", "price": 3.91, "volume": 107440}, { 337 | "time": "13:46", 338 | "price": 3.91, 339 | "volume": 107440 340 | }, {"time": "13:47", "price": 3.91, "volume": 107459}, { 341 | "time": "13:48", 342 | "price": 3.91, 343 | "volume": 107465 344 | }, {"time": "13:49", "price": 3.91, "volume": 107484}, { 345 | "time": "13:50", 346 | "price": 3.91, 347 | "volume": 107489 348 | }, {"time": "13:51", "price": 3.91, "volume": 107501}, { 349 | "time": "13:52", 350 | "price": 3.91, 351 | "volume": 107529 352 | }, {"time": "13:53", "price": 3.91, "volume": 107529}, { 353 | "time": "13:54", 354 | "price": 3.91, 355 | "volume": 107529 356 | }, {"time": "13:55", "price": 3.91, "volume": 107531}, { 357 | "time": "13:56", 358 | "price": 3.91, 359 | "volume": 107537 360 | }, {"time": "13:57", "price": 3.91, "volume": 107550}, { 361 | "time": "13:58", 362 | "price": 3.91, 363 | "volume": 107562 364 | }, {"time": "13:59", "price": 3.91, "volume": 107562}, { 365 | "time": "14:00", 366 | "price": 3.91, 367 | "volume": 107562 368 | }, {"time": "14:01", "price": 3.91, "volume": 107564}, { 369 | "time": "14:02", 370 | "price": 3.91, 371 | "volume": 107586 372 | }, {"time": "14:03", "price": 3.91, "volume": 107586}, { 373 | "time": "14:04", 374 | "price": 3.91, 375 | "volume": 107587 376 | }, {"time": "14:05", "price": 3.91, "volume": 107590}, { 377 | "time": "14:06", 378 | "price": 3.91, 379 | "volume": 107591 380 | }, {"time": "14:07", "price": 3.91, "volume": 107603}, { 381 | "time": "14:08", 382 | "price": 3.91, 383 | "volume": 107603 384 | }, {"time": "14:09", "price": 3.91, "volume": 107603}, { 385 | "time": "14:10", 386 | "price": 3.91, 387 | "volume": 107604 388 | }, {"time": "14:11", "price": 3.91, "volume": 107604}, { 389 | "time": "14:12", 390 | "price": 3.91, 391 | "volume": 107607 392 | }, {"time": "14:13", "price": 3.91, "volume": 107609}, { 393 | "time": "14:14", 394 | "price": 3.91, 395 | "volume": 107609 396 | }, {"time": "14:15", "price": 3.91, "volume": 107609}, { 397 | "time": "14:16", 398 | "price": 3.91, 399 | "volume": 107611 400 | }, {"time": "14:17", "price": 3.91, "volume": 107661}, { 401 | "time": "14:18", 402 | "price": 3.91, 403 | "volume": 107863 404 | }, {"time": "14:19", "price": 3.91, "volume": 107915}, { 405 | "time": "14:20", 406 | "price": 3.91, 407 | "volume": 107915 408 | }, {"time": "14:21", "price": 3.91, "volume": 107915}, { 409 | "time": "14:22", 410 | "price": 3.91, 411 | "volume": 107920 412 | }, {"time": "14:23", "price": 3.91, "volume": 107970}, { 413 | "time": "14:24", 414 | "price": 3.91, 415 | "volume": 107970 416 | }, {"time": "14:25", "price": 3.91, "volume": 107971}, { 417 | "time": "14:26", 418 | "price": 3.91, 419 | "volume": 107971 420 | }, {"time": "14:27", "price": 3.91, "volume": 107972}, { 421 | "time": "14:28", 422 | "price": 3.91, 423 | "volume": 107986 424 | }, {"time": "14:29", "price": 3.91, "volume": 107987}, { 425 | "time": "14:30", 426 | "price": 3.91, 427 | "volume": 107987 428 | }, {"time": "14:31", "price": 3.91, "volume": 107987}, { 429 | "time": "14:32", 430 | "price": 3.91, 431 | "volume": 108307 432 | }, {"time": "14:33", "price": 3.91, "volume": 108307}, { 433 | "time": "14:34", 434 | "price": 3.91, 435 | "volume": 108309 436 | }, {"time": "14:35", "price": 3.91, "volume": 108318}, { 437 | "time": "14:36", 438 | "price": 3.91, 439 | "volume": 108318 440 | }, {"time": "14:37", "price": 3.91, "volume": 108318}, { 441 | "time": "14:38", 442 | "price": 3.91, 443 | "volume": 108318 444 | }, {"time": "14:39", "price": 3.91, "volume": 108329}, { 445 | "time": "14:40", 446 | "price": 3.91, 447 | "volume": 108368 448 | }, {"time": "14:41", "price": 3.91, "volume": 108380}, { 449 | "time": "14:42", 450 | "price": 3.91, 451 | "volume": 108380 452 | }, {"time": "14:43", "price": 3.91, "volume": 108380}, { 453 | "time": "14:44", 454 | "price": 3.91, 455 | "volume": 108380 456 | }, {"time": "14:45", "price": 3.91, "volume": 108381}, { 457 | "time": "14:46", 458 | "price": 3.91, 459 | "volume": 108400 460 | }, {"time": "14:47", "price": 3.91, "volume": 108410}, { 461 | "time": "14:48", 462 | "price": 3.91, 463 | "volume": 108484 464 | }, {"time": "14:49", "price": 3.91, "volume": 108484}, { 465 | "time": "14:50", 466 | "price": 3.91, 467 | "volume": 108484 468 | }, {"time": "14:51", "price": 3.91, "volume": 108626}, { 469 | "time": "14:52", 470 | "price": 3.91, 471 | "volume": 108665 472 | }, {"time": "14:53", "price": 3.91, "volume": 108735}, { 473 | "time": "14:54", 474 | "price": 3.91, 475 | "volume": 108750 476 | }, {"time": "14:55", "price": 3.91, "volume": 108758}, { 477 | "time": "14:56", 478 | "price": 3.91, 479 | "volume": 109387 480 | }, {"time": "14:57", "price": 3.91, "volume": 109387}, { 481 | "time": "14:58", 482 | "price": 3.91, 483 | "volume": 109387 484 | }, {"time": "14:59", "price": 3.91, "volume": 109387}, {"time": "15:00", "price": 3.91, "volume": 109649}], 485 | xAxis: { 486 | tickCount: 3, 487 | }, 488 | yAxis: { 489 | max: 3.91, 490 | min: 3.19, 491 | ticks: [3.19, 3.91], 492 | }, 493 | tooltip: { 494 | showTitle: false, 495 | showCrosshairs: true, 496 | crosshairsType: 'xy', 497 | }, 498 | guide: { 499 | line: { 500 | start: ['min', 3.55], 501 | end: ['max', 3.55], 502 | style: { 503 | lineDash: [8], 504 | stroke: '#728B6E', 505 | }, 506 | }, 507 | text: { 508 | position: ['min', 3.55], 509 | content: 3.55, 510 | style: { 511 | fill: '#878F92', 512 | fontSize: 10, 513 | fontWeight: 'bold', 514 | textAlign: 'start', 515 | textBaseline: 'bottom' 516 | }, 517 | }, 518 | }, 519 | }, 520 | onReady() { 521 | setTimeout(() => { 522 | this.setData({ 523 | cn: 'timeshare size', 524 | xAxis: { 525 | tickCount: 3, 526 | }, 527 | }); 528 | }, 2000); 529 | }, 530 | }); 531 | -------------------------------------------------------------------------------- /examples/timeshare/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultTitle": "timeshare", 3 | "usingComponents": { 4 | "timeshare": "../../components/timeshare/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mini-chart", 3 | "version": "0.2.2", 4 | "description": "小程序图表库", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/ant-mini-program/mini-chart.git" 8 | }, 9 | "keywords": [ 10 | "mini-program", 11 | "charts" 12 | ], 13 | "files": [ 14 | "es" 15 | ], 16 | "bugs": { 17 | "url": "https://github.com/ant-mini-program/mini-chart/issues" 18 | }, 19 | "homepage": "https://github.com/ant-mini-program/mini-chart#readme", 20 | "dependencies": { 21 | "@antv/my-f2": "~1.1.5" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.0.0", 25 | "@babel/preset-env": "^7.0.0", 26 | "eslint": "^4.19.1", 27 | "eslint-config-ali": "^3.1.0", 28 | "eslint-plugin-import": "^2.11.0", 29 | "gulp": "^3.9.0", 30 | "gulp-rimraf": "^0.2.2", 31 | "through2": "^2.0.0", 32 | "webstorm-disable-index": "^1.2.0" 33 | }, 34 | "scripts": { 35 | "build": "node scripts/compiler.js", 36 | "pub": "npm run build && npm publish" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /scripts/compiler.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const gulp = require('gulp'); 3 | const rimraf = require('gulp-rimraf'); 4 | const through2 = require('through2'); 5 | const babel = require('@babel/core'); 6 | 7 | let dist = path.join(__dirname, '../es'); 8 | let src = path.join(__dirname, '../components'); 9 | let extTypes = ['acss', 'js', 'json', 'axml', 'sjs']; 10 | 11 | gulp.task('clean', function() { 12 | return gulp.src(dist) 13 | .pipe(rimraf()); 14 | }); 15 | 16 | function cb(file, enc, cb) { 17 | let content = file.contents.toString('utf-8'); 18 | content = babel.transformSync(content, { 19 | presets: ['@babel/preset-env'] 20 | }).code; 21 | file.contents = Buffer.from(content); 22 | cb(null, file); 23 | } 24 | 25 | gulp.task('js', () => { 26 | gulp.src(`${src}/**/*.js`) 27 | .pipe(through2.obj(cb)) 28 | .pipe(gulp.dest(dist)); 29 | }); 30 | 31 | gulp.task('acss', () => { 32 | gulp.src(`${src}/**/*.acss`) 33 | .pipe(gulp.dest(dist)); 34 | }); 35 | 36 | gulp.task('json', () => { 37 | gulp.src(`${src}/**/*.json`) 38 | .pipe(gulp.dest(dist)); 39 | }); 40 | 41 | gulp.task('axml', () => { 42 | gulp.src(`${src}/**/*.axml`) 43 | .pipe(gulp.dest(dist)); 44 | }); 45 | 46 | gulp.task('sjs', () => { 47 | gulp.src(`${src}/**/*.sjs`) 48 | .pipe(gulp.dest(dist)); 49 | }); 50 | 51 | gulp.task('build', extTypes); 52 | gulp.start('build'); 53 | --------------------------------------------------------------------------------