Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 622c033a 编写于 作者: Y yufeng04
浏览文件
操作

1. create path when data updating 2. add showAbove/icon/offsetCenter to anchor... 

1. create path when data updating 2. add showAbove/icon/offsetCenter to anchor 3. adjust the verticalAlign of label
上级 87c1365d
隐藏空白更改
内联 并排
Showing with 135 addition and 62 deletion
src/chart/gauge/GaugeSeries.ts
浏览文件 @ 622c033a
......@@ -54,7 +54,11 @@ interface PointerOption {
interface AnchorOption {
show?: boolean
showAbove?: boolean
anchorSize?: number
icon?: string
offsetCenter?: (number | string)[]
keepAspect?: boolean
itemStyle?: ItemStyleOption
}
......@@ -253,7 +257,11 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
},
anchor: {
show: false,
showAbove: false,
anchorSize: 6,
icon: 'circle',
offsetCenter: [0, 0],
keepAspect: false,
itemStyle: {
color: '#fff',
borderWidth: 0,
......
src/chart/gauge/GaugeView.ts
浏览文件 @ 622c033a
......@@ -26,11 +26,10 @@ import {parsePercent, round, linearMap} from '../../util/number';
import GaugeSeriesModel, { GaugeDataItemOption } from './GaugeSeries';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../ExtensionAPI';
import { ColorString } from '../../util/types';
import { ColorString, ECElement } from '../../util/types';
import List from '../../data/List';
import Sausage from '../../util/shape/sausage';
import {createSymbol} from '../../util/symbol';
import * as layoutUtil from '../../util/layout';
interface PosInfo {
cx: number
......@@ -179,12 +178,12 @@ class GaugeView extends ChartView {
seriesModel, ecModel, api, getColor, posInfo
)
this._renderAnchor(seriesModel, posInfo);
this._renderPointer(
seriesModel, ecModel, api, getColor, posInfo,
startAngle, endAngle, clockwise, axisLineWidth
);
this._renderAnchor(seriesModel, posInfo);
}
_renderTicks(
......@@ -272,7 +271,7 @@ class GaugeView extends ChartView {
text: label,
x: unitX * (r - splitLineLen - distance) + cx,
y: unitY * (r - splitLineLen - distance) + cy,
verticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
verticalAlign: unitY < -0.8 ? 'top' : (unitY > 0.8 ? 'bottom' : 'middle'),
align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
}, {
inheritColor: autoColor
......@@ -340,10 +339,12 @@ class GaugeView extends ChartView {
const data = seriesModel.getData();
const valueDim = data.mapDimension('value');
const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const valueExtent = [minVal, maxVal];
const angleExtent = [startAngle, endAngle];
function createPointer(idx: number) {
function createPointer(idx: number, angle: number) {
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const pointerModel = itemModel.getModel('pointer');
const pointerWidth = parsePercent(pointerModel.get('width'), posInfo.r);
......@@ -373,7 +374,7 @@ class GaugeView extends ChartView {
}
})
}
pointer.rotation = -(startAngle + Math.PI / 2);
pointer.rotation = -(angle + Math.PI / 2);
pointer.x = posInfo.cx;
pointer.y = posInfo.cy;
return pointer;
......@@ -401,6 +402,7 @@ class GaugeView extends ChartView {
// 是否相应鼠标事件
silent: progressSilent
});
isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal);
return progress;
}
......@@ -408,7 +410,7 @@ class GaugeView extends ChartView {
data.diff(oldData)
.add(function (idx) {
if (showPointer) {
const pointer = createPointer(idx);
const pointer = createPointer(idx, startAngle);
graphic.initProps(pointer, {
rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
}, seriesModel);
......@@ -417,7 +419,7 @@ class GaugeView extends ChartView {
}
if (showProgress) {
const progress = createProgress(idx, endAngle) as graphic.Sector;
const progress = createProgress(idx, startAngle) as graphic.Sector;
const isClip = progressModel.get('clip');
graphic.initProps(progress, {
shape: {
......@@ -430,13 +432,29 @@ class GaugeView extends ChartView {
})
.update(function (newIdx, oldIdx) {
if (showPointer) {
const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
const previousRotate = previousPointer.rotation;
group.remove(previousPointer);
const pointer = createPointer(newIdx, previousRotate);
pointer.rotation = previousRotate;
graphic.updateProps(pointer, {
rotation: -(linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
}, seriesModel);
group.add(pointer);
data.setItemGraphicEl(newIdx, pointer);
}
if (showProgress) {
const progress = oldProgressData[oldIdx];
const previousProgress = oldProgressData[oldIdx];
const previousEndAngle = previousProgress.shape.endAngle;
group.remove(previousProgress);
const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector;
const isClip = progressModel.get('clip');
graphic.updateProps(progress, {
shape: {
endAngle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, isClip)
}
}, seriesModel);
group.add(progress);
progressList[newIdx] = progress;
}
......@@ -458,16 +476,7 @@ class GaugeView extends ChartView {
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const emphasisModel = itemModel.getModel('emphasis');
if (showPointer) {
let previousRotate = data.getItemGraphicEl(idx).rotation;
group.remove(data.getItemGraphicEl(idx) as PointerPath);
const pointer = createPointer(idx);
pointer.rotation = previousRotate;
graphic.updateProps(pointer, {
rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
}, seriesModel);
group.add(pointer);
data.setItemGraphicEl(idx, pointer);
const pointer = data.getItemGraphicEl(idx) as PointerPath;
pointer.useStyle(data.getItemVisual(idx, 'style'));
pointer.setStyle(itemModel.getModel(['pointer', 'itemStyle']).getItemStyle());
if (pointer.style.fill === 'auto') {
......@@ -476,26 +485,15 @@ class GaugeView extends ChartView {
));
}
(pointer as ECElement).z2EmphasisLift = 0
setStatesStylesFromModel(pointer, itemModel);
enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
}
if (showProgress) {
let previousEndAngle = progressList[idx].shape.endAngle;
group.remove(progressList[idx]);
const progress = createProgress(idx, previousEndAngle) as graphic.Sector;
const progress = progressList[idx];
progress.useStyle(data.getItemVisual(idx, 'style'));
progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle());
const isClip = progressModel.get('clip');
graphic.updateProps(progress, {
shape: {
endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, isClip)
}
}, seriesModel);
progress.z2 = (data.get(valueDim, idx) as number) % seriesModel.get('max');
group.add(progress);
progressList[idx] = progress;
setStatesStylesFromModel(progress, itemModel);
enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
}
......@@ -529,17 +527,21 @@ class GaugeView extends ChartView {
const showAnchor = anchorModel.get('show');
if (showAnchor) {
const anchorSize = anchorModel.get('anchorSize');
const symbol = createSymbol(
'circle',
posInfo.cx - anchorSize / 2,
posInfo.cy - anchorSize / 2,
const anchorType = anchorModel.get('icon');
const offsetCenter = anchorModel.get('offsetCenter');
const anchorKeepAspect = anchorModel.get('keepAspect');
const anchor = createSymbol(
anchorType,
posInfo.cx - anchorSize / 2 + parsePercent(offsetCenter[0], posInfo.r),
posInfo.cy - anchorSize / 2 + parsePercent(offsetCenter[1], posInfo.r),
anchorSize,
anchorSize,
null,
true
anchorKeepAspect
) as graphic.Path;
symbol.setStyle(anchorModel.getModel('itemStyle').getItemStyle());
this.group.add(symbol);
anchor.z2 = anchorModel.get('showAbove') ? 1 : 0;
anchor.setStyle(anchorModel.getModel('itemStyle').getItemStyle());
this.group.add(anchor);
}
}
......
test/gauge-distance.html
浏览文件 @ 622c033a
......@@ -127,6 +127,7 @@ under the License.
},
anchor: {
show: true,
showAbove: true,
anchorSize: 25,
itemStyle: {
borderWidth: 10
......
test/gauge-pointer.html
浏览文件 @ 622c033a
......@@ -71,7 +71,8 @@ under the License.
name: '业务指标',
type: 'gauge',
anchor: {
show: true
show: true,
showAbove: true
},
detail: {formatter: '{value}%'},
data: [{value: 58.46, name: '完成率'}]
......@@ -239,6 +240,7 @@ under the License.
anchor: {
show: true,
anchorSize: 8,
showAbove: true,
itemStyle: {
// borderColor: '#5470c6'
borderWidth: 1
......@@ -325,9 +327,17 @@ under the License.
shadowBlur: 15
}
},
splitLine: {
lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
axisLabel: {
fontSize: 50,
distance: 20,
distance: 25,
formatter: function(value) {
if (value === 0) {
return '';
......@@ -337,14 +347,13 @@ under the License.
},
anchor: {
show: true,
anchorSize: 20,
icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
showAbove: false,
offsetCenter: [0, '-35%'],
anchorSize: 120,
keepAspect: true,
itemStyle: {
borderWidth: 15,
borderColor: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
color: '#707177'
}
},
pointer: {
......@@ -369,14 +378,13 @@ under the License.
data: [
{
value: 0,
name: 'Powered by ECharts'
name: ''
}
]
},
{
name: 'minute',
type: 'gauge',
z2: 3,
startAngle: 90,
endAngle: -270,
min: 0,
......@@ -407,7 +415,17 @@ under the License.
}
},
anchor: {
show: false
show: true,
anchorSize: 20,
showAbove: false,
itemStyle: {
borderWidth: 15,
borderColor: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
......@@ -425,7 +443,6 @@ under the License.
{
name: 'second',
type: 'gauge',
z2: 4,
startAngle: 90,
endAngle: -270,
min: 0,
......@@ -459,6 +476,7 @@ under the License.
anchor: {
show: true,
anchorSize: 15,
showAbove: true,
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
......
test/gauge.html
浏览文件 @ 622c033a
......@@ -62,6 +62,7 @@ under the License.
show: true
},
anchor:{
showAbove: true,
show: true
},
roundCap: true,
......@@ -105,16 +106,59 @@ under the License.
color: ['#f00', '#0f0']
},
anchor: {
show: true
show: true,
showAbove: true
},
detail: {
formatter: '{value}%'
},
detail: {formatter: '{value}%'},
data: [
{value: 30, name: '完成率'},
{value: 50, name: '成率'},
{value: 60, name: '达标率'}
]
{
value: 20,
name: '完成率',
title: {
offsetCenter: ['-40%', '20%']
},
detail: {
offsetCenter: ['-40%', '35%']
}
},
{
value: 40,
name: '达标率',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
offsetCenter: ['0%', '35%']
}
},
{
value: 60,
name: '优秀率',
title: {
offsetCenter: ['40%', '20%']
},
detail: {
offsetCenter: ['40%', '35%']
}
}
],
title: {
fontSize: 14
},
detail: {
width: 30,
height: 12,
fontSize: 12,
color: 'auto',
borderColor: 'auto',
borderWidth: 1,
borderRadius: 3,
formatter: '{value}%',
}
}
]
],
};
chart2.setOption(option2);
})
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或