-
Notifications
You must be signed in to change notification settings - Fork 605
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #263 from antvis/gauge-demos
拯救仪表盘大作战
- Loading branch information
Showing
9 changed files
with
257 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,44 @@ | ||
| import { Gauge } from '@antv/g2plot'; | ||
| import insertCss from 'insert-css'; | ||
|
|
||
| insertCss(` | ||
| .g2plot-gauge-label { | ||
| width: 100px; | ||
| height: 100px; | ||
| vertical-align: middle; | ||
| text-align: center; | ||
| line-height: 0.2; | ||
| } | ||
| .g2plot-gauge-label .value { | ||
| font-size: 20px; | ||
| color: #8c8c8c; | ||
| font-weight: 300; | ||
| } | ||
| .g2plot-gauge-label .title { | ||
| font-size: 30px; | ||
| color: #30bf78; | ||
| font-weight: bold; | ||
| } | ||
| `); | ||
|
|
||
| const gaugePlot = new Gauge(document.getElementById('container'), { | ||
| title: { | ||
| visible: true, | ||
| text: '仪表盘', | ||
| }, | ||
| width: 400, | ||
| height: 400, | ||
| value: 64, | ||
| min: 0, | ||
| max: 100, | ||
| range: [20, 40, 60, 80], | ||
| gaugeStyle: { | ||
| colors: ['#f4664a', '#faad14', '#a0d911', '#30bf78'], | ||
| tickLabelSize: 20, | ||
| }, | ||
| label: () => { | ||
| return '<div class="g2plot-gauge-label"><p class="title">优</p><p class="value">系统表现</p></div>'; | ||
| }, | ||
| }); | ||
| gaugePlot.render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Gauge } from '@antv/g2plot'; | ||
| import insertCss from 'insert-css'; | ||
|
|
||
| insertCss(` | ||
| .g2plot-gauge-label { | ||
| width: 100px; | ||
| height: 100px; | ||
| vertical-align: middle; | ||
| text-align: center; | ||
| line-height: 0.2; | ||
| } | ||
| .g2plot-gauge-label .value { | ||
| font-size: 16px; | ||
| color: #8c8c8c; | ||
| font-weight: 300; | ||
| } | ||
| .g2plot-gauge-label .title { | ||
| font-size: 30px; | ||
| color: #000000; | ||
| font-weight: bold; | ||
| } | ||
| `); | ||
|
|
||
| const gaugePlot = new Gauge(document.getElementById('container'), { | ||
| title: { | ||
| visible: true, | ||
| text: '半圆仪表盘', | ||
| }, | ||
| width: 400, | ||
| height: 400, | ||
| value: 64, | ||
| min: 0, | ||
| max: 100, | ||
| range: [0, 70], | ||
| startAngle: -1, | ||
| endAngle: 0, | ||
| format: (v) => { | ||
| if (v === 0 || v === 100) { | ||
| return v + '%'; | ||
| } | ||
| return ''; | ||
| }, | ||
| label: () => { | ||
| return '<div class="g2plot-gauge-label"><p class="title">70%</p><p class="value">加载进度</p></div>'; | ||
| }, | ||
| gaugeStyle: { | ||
| colors: ['l(0) 0:#b0d0ff 1:#5f92f9'], | ||
| tickLabelSize: 16, | ||
| stripWidth: 20, | ||
| pointerColor: 'rgba(0,0,0,0)', | ||
| labelPos: ['50%', '80%'], | ||
| tickLabelPos: 'outer', | ||
| }, | ||
| }); | ||
| gaugePlot.render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,63 @@ | ||
| import { registerShape } from '@antv/g2'; | ||
|
|
||
| const POINTER_RADIUS = 10; | ||
| const POINTER_LINE_WIDTH = 4; | ||
|
|
||
| registerShape('point', 'pointer', { | ||
| draw(cfg, group) { | ||
| // 获取第一个标记点 | ||
| let point = cfg.points[0]; | ||
| point = this.parsePoint({ ...point, y: 2 / 3 }); | ||
| // 获取极坐标系下画布中心点 | ||
| const point = cfg.points[0]; | ||
| const center = this.parsePoint({ | ||
| x: 0, | ||
| y: 0, | ||
| }); | ||
| const points = [ | ||
| [point.x, point.y], | ||
| [center.x + (point.y - center.y) / 16, center.y - (point.x - center.x) / 16], | ||
| [(13 * center.x - point.x) / 12, (13 * center.y - point.y) / 12], | ||
| [center.x - (point.y - center.y) / 16, center.y + (point.x - center.x) / 16], | ||
| const target = this.parsePoint({ | ||
| x: point.x, | ||
| y: 0.5, | ||
| }); | ||
| const dir_vec = { | ||
| x: center.x - target.x, | ||
| y: center.y - target.y, | ||
| }; | ||
| //normalize | ||
| const length = Math.sqrt(dir_vec.x * dir_vec.x + dir_vec.y * dir_vec.y); | ||
| dir_vec.x *= 1 / length; | ||
| dir_vec.y *= 1 / length; | ||
| //rotate dir_vector by -90 and scale | ||
| const angle1 = -Math.PI / 2; | ||
| const x_1 = Math.cos(angle1) * dir_vec.x - Math.sin(angle1) * dir_vec.y; | ||
| const y_1 = Math.sin(angle1) * dir_vec.x + Math.cos(angle1) * dir_vec.y; | ||
| //rotate dir_vector by 90 and scale | ||
| const angle2 = Math.PI / 2; | ||
| const x_2 = Math.cos(angle2) * dir_vec.x - Math.sin(angle2) * dir_vec.y; | ||
| const y_2 = Math.sin(angle2) * dir_vec.x + Math.cos(angle2) * dir_vec.y; | ||
| // startx | ||
| const angle = Math.atan2(dir_vec.y, dir_vec.x); | ||
| const offset = POINTER_LINE_WIDTH / 2 - POINTER_RADIUS; | ||
| const startX = center.x + Math.cos(angle) * offset; | ||
| const startY = center.y + Math.sin(angle) * offset; | ||
| //polygon vertex | ||
| const path = [ | ||
| ['M', target.x + x_1 * 1, target.y + y_1 * 1], | ||
| ['L', startX + x_1 * 3, startY + y_1 * 3], | ||
| ['L', startX + x_2 * 3, startY + y_2 * 3], | ||
| ['L', target.x + x_2 * 1, target.y + y_2 * 1], | ||
| ['Z'], | ||
| ]; | ||
| // 绘制指针 | ||
| return group.addShape('polygon', { | ||
| group.addShape('circle', { | ||
| attrs: { | ||
| x: center.x, | ||
| y: center.y, | ||
| r: POINTER_RADIUS, | ||
| lineWidth: POINTER_LINE_WIDTH, | ||
| stroke: cfg.color, | ||
| }, | ||
| }); | ||
| const tick = group.addShape('path', { | ||
| attrs: { | ||
| points, | ||
| path: path, | ||
| fill: cfg.color, | ||
| }, | ||
| }); | ||
| return tick; | ||
| }, | ||
| }); |
Oops, something went wrong.