echarts GaugeView 源码
echarts GaugeView 代码
文件路径：/src/chart/gauge/GaugeView.ts
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import PointerPath from './PointerPath';
import * as graphic from '../../util/graphic';
import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states';
import {createTextStyle, setLabelValueAnimation, animateLabelValue} from '../../label/labelStyle';
import ChartView from '../../view/Chart';
import {parsePercent, round, linearMap} from '../../util/number';
import GaugeSeriesModel, { GaugeDataItemOption } from './GaugeSeries';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import { ColorString, ECElement } from '../../util/types';
import SeriesData from '../../data/SeriesData';
import Sausage from '../../util/shape/sausage';
import {createSymbol} from '../../util/symbol';
import ZRImage from 'zrender/src/graphic/Image';
import { extend, isFunction, isString, isNumber, each } from 'zrender/src/core/util';
import {setCommonECData} from '../../util/innerStore';
import { normalizeArcAngles } from 'zrender/src/core/PathProxy';
type ECSymbol = ReturnType<typeof createSymbol>;
interface PosInfo {
cx: number
cy: number
r: number
}
function parsePosition(seriesModel: GaugeSeriesModel, api: ExtensionAPI): PosInfo {
const center = seriesModel.get('center');
const width = api.getWidth();
const height = api.getHeight();
const size = Math.min(width, height);
const cx = parsePercent(center[0], api.getWidth());
const cy = parsePercent(center[1], api.getHeight());
const r = parsePercent(seriesModel.get('radius'), size / 2);
return {
cx: cx,
cy: cy,
r: r
};
}
function formatLabel(value: number, labelFormatter: string | ((value: number) => string)): string {
let label = value == null ? '' : (value + '');
if (labelFormatter) {
if (isString(labelFormatter)) {
label = labelFormatter.replace('{value}', label);
}
else if (isFunction(labelFormatter)) {
label = labelFormatter(value);
}
}
return label;
}
class GaugeView extends ChartView {
static type = 'gauge' as const;
type = GaugeView.type;
private _data: SeriesData;
private _progressEls: graphic.Path[];
private _titleEls: graphic.Text[];
private _detailEls: graphic.Text[];
render(seriesModel: GaugeSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
this.group.removeAll();
const colorList = seriesModel.get(['axisLine', 'lineStyle', 'color']);
const posInfo = parsePosition(seriesModel, api);
this._renderMain(
seriesModel, ecModel, api, colorList, posInfo
);
this._data = seriesModel.getData();
}
dispose() {}
_renderMain(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
colorList: [number, ColorString][],
posInfo: PosInfo
) {
const group = this.group;
const clockwise = seriesModel.get('clockwise');
let startAngle = -seriesModel.get('startAngle') / 180 * Math.PI;
let endAngle = -seriesModel.get('endAngle') / 180 * Math.PI;
const axisLineModel = seriesModel.getModel('axisLine');
const roundCap = axisLineModel.get('roundCap');
const MainPath = roundCap ? Sausage : graphic.Sector;
const showAxis = axisLineModel.get('show');
const lineStyleModel = axisLineModel.getModel('lineStyle');
const axisLineWidth = lineStyleModel.get('width');
const angles = [startAngle, endAngle];
normalizeArcAngles(angles, !clockwise);
startAngle = angles[0];
endAngle = angles[1];
const angleRangeSpan = endAngle - startAngle;
let prevEndAngle = startAngle;
const sectors: (Sausage | graphic.Sector)[] = [];
for (let i = 0; showAxis && i < colorList.length; i++) {
// Clamp
const percent = Math.min(Math.max(colorList[i][0], 0), 1);
endAngle = startAngle + angleRangeSpan * percent;
const sector = new MainPath({
shape: {
startAngle: prevEndAngle,
endAngle: endAngle,
cx: posInfo.cx,
cy: posInfo.cy,
clockwise: clockwise,
r0: posInfo.r - axisLineWidth,
r: posInfo.r
},
silent: true
});
sector.setStyle({
fill: colorList[i][1]
});
sector.setStyle(lineStyleModel.getLineStyle(
// Because we use sector to simulate arc
// so the properties for stroking are useless
['color', 'width']
));
sectors.push(sector);
prevEndAngle = endAngle;
}
sectors.reverse();
each(sectors, sector => group.add(sector));
const getColor = function (percent: number) {
// Less than 0
if (percent <= 0) {
return colorList[0][1];
}
let i;
for (i = 0; i < colorList.length; i++) {
if (colorList[i][0] >= percent
&& (i === 0 ? 0 : colorList[i - 1][0]) < percent
) {
return colorList[i][1];
}
}
// More than 1
return colorList[i - 1][1];
};
this._renderTicks(
seriesModel, ecModel, api, getColor, posInfo,
startAngle, endAngle, clockwise, axisLineWidth
);
this._renderTitleAndDetail(
seriesModel, ecModel, api, getColor, posInfo
);
this._renderAnchor(seriesModel, posInfo);
this._renderPointer(
seriesModel, ecModel, api, getColor, posInfo,
startAngle, endAngle, clockwise, axisLineWidth
);
}
_renderTicks(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
getColor: (percent: number) => ColorString,
posInfo: PosInfo,
startAngle: number,
endAngle: number,
clockwise: boolean,
axisLineWidth: number
) {
const group = this.group;
const cx = posInfo.cx;
const cy = posInfo.cy;
const r = posInfo.r;
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const splitLineModel = seriesModel.getModel('splitLine');
const tickModel = seriesModel.getModel('axisTick');
const labelModel = seriesModel.getModel('axisLabel');
const splitNumber = seriesModel.get('splitNumber');
const subSplitNumber = tickModel.get('splitNumber');
const splitLineLen = parsePercent(
splitLineModel.get('length'), r
);
const tickLen = parsePercent(
tickModel.get('length'), r
);
let angle = startAngle;
const step = (endAngle - startAngle) / splitNumber;
const subStep = step / subSplitNumber;
const splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
const tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
const splitLineDistance = splitLineModel.get('distance');
let unitX;
let unitY;
for (let i = 0; i <= splitNumber; i++) {
unitX = Math.cos(angle);
unitY = Math.sin(angle);
// Split line
if (splitLineModel.get('show')) {
const distance = splitLineDistance ? splitLineDistance + axisLineWidth : axisLineWidth;
const splitLine = new graphic.Line({
shape: {
x1: unitX * (r - distance) + cx,
y1: unitY * (r - distance) + cy,
x2: unitX * (r - splitLineLen - distance) + cx,
y2: unitY * (r - splitLineLen - distance) + cy
},
style: splitLineStyle,
silent: true
});
if (splitLineStyle.stroke === 'auto') {
splitLine.setStyle({
stroke: getColor(i / splitNumber)
});
}
group.add(splitLine);
}
// Label
if (labelModel.get('show')) {
const distance = labelModel.get('distance') + splitLineDistance;
const label = formatLabel(
round(i / splitNumber * (maxVal - minVal) + minVal),
labelModel.get('formatter')
);
const autoColor = getColor(i / splitNumber);
const textStyleX = unitX * (r - splitLineLen - distance) + cx;
const textStyleY = unitY * (r - splitLineLen - distance) + cy;
const rotateType = labelModel.get('rotate');
let rotate = 0;
if (rotateType === 'radial') {
rotate = -angle + 2 * Math.PI;
if (rotate > Math.PI / 2) {
rotate += Math.PI;
}
}
else if (rotateType === 'tangential') {
rotate = -angle - Math.PI / 2;
}
else if (isNumber(rotateType)) {
rotate = rotateType * Math.PI / 180;
}
if (rotate === 0) {
group.add(new graphic.Text({
style: createTextStyle(labelModel, {
text: label,
x: textStyleX,
y: textStyleY,
verticalAlign: unitY < -0.8 ? 'top' : (unitY > 0.8 ? 'bottom' : 'middle'),
align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
}, {
inheritColor: autoColor
}),
silent: true
}));
}
else {
group.add(new graphic.Text({
style: createTextStyle(labelModel, {
text: label,
x: textStyleX,
y: textStyleY,
verticalAlign: 'middle',
align: 'center'
}, {
inheritColor: autoColor
}),
silent: true,
originX: textStyleX,
originY: textStyleY,
rotation: rotate
}));
}
}
// Axis tick
if (tickModel.get('show') && i !== splitNumber) {
let distance = tickModel.get('distance');
distance = distance ? distance + axisLineWidth : axisLineWidth;
for (let j = 0; j <= subSplitNumber; j++) {
unitX = Math.cos(angle);
unitY = Math.sin(angle);
const tickLine = new graphic.Line({
shape: {
x1: unitX * (r - distance) + cx,
y1: unitY * (r - distance) + cy,
x2: unitX * (r - tickLen - distance) + cx,
y2: unitY * (r - tickLen - distance) + cy
},
silent: true,
style: tickLineStyle
});
if (tickLineStyle.stroke === 'auto') {
tickLine.setStyle({
stroke: getColor((i + j / subSplitNumber) / splitNumber)
});
}
group.add(tickLine);
angle += subStep;
}
angle -= subStep;
}
else {
angle += step;
}
}
}
_renderPointer(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
getColor: (percent: number) => ColorString,
posInfo: PosInfo,
startAngle: number,
endAngle: number,
clockwise: boolean,
axisLineWidth: number
) {
const group = this.group;
const oldData = this._data;
const oldProgressData = this._progressEls;
const progressList = [] as graphic.Path[];
const showPointer = seriesModel.get(['pointer', 'show']);
const progressModel = seriesModel.getModel('progress');
const showProgress = progressModel.get('show');
const data = seriesModel.getData();
const valueDim = data.mapDimension('value');
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const valueExtent = [minVal, maxVal];
const angleExtent = [startAngle, endAngle];
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);
const pointerLength = parsePercent(pointerModel.get('length'), posInfo.r);
const pointerStr = seriesModel.get(['pointer', 'icon']);
const pointerOffset = pointerModel.get('offsetCenter');
const pointerOffsetX = parsePercent(pointerOffset[0], posInfo.r);
const pointerOffsetY = parsePercent(pointerOffset[1], posInfo.r);
const pointerKeepAspect = pointerModel.get('keepAspect');
let pointer;
// not exist icon type will be set 'rect'
if (pointerStr) {
pointer = createSymbol(
pointerStr,
pointerOffsetX - pointerWidth / 2,
pointerOffsetY - pointerLength,
pointerWidth,
pointerLength,
null,
pointerKeepAspect
) as graphic.Path;
}
else {
pointer = new PointerPath({
shape: {
angle: -Math.PI / 2,
width: pointerWidth,
r: pointerLength,
x: pointerOffsetX,
y: pointerOffsetY
}
});
}
pointer.rotation = -(angle + Math.PI / 2);
pointer.x = posInfo.cx;
pointer.y = posInfo.cy;
return pointer;
}
function createProgress(idx: number, endAngle: number) {
const roundCap = progressModel.get('roundCap');
const ProgressPath = roundCap ? Sausage : graphic.Sector;
const isOverlap = progressModel.get('overlap');
const progressWidth = isOverlap ? progressModel.get('width') : axisLineWidth / data.count();
const r0 = isOverlap ? posInfo.r - progressWidth : posInfo.r - (idx + 1) * progressWidth;
const r = isOverlap ? posInfo.r : posInfo.r - idx * progressWidth;
const progress = new ProgressPath({
shape: {
startAngle: startAngle,
endAngle: endAngle,
cx: posInfo.cx,
cy: posInfo.cy,
clockwise: clockwise,
r0: r0,
r: r
}
});
isOverlap && (progress.z2 = maxVal - (data.get(valueDim, idx) as number) % maxVal);
return progress;
}
if (showProgress || showPointer) {
data.diff(oldData)
.add(function (idx) {
const val = data.get(valueDim, idx) as number;
if (showPointer) {
const pointer = createPointer(idx, startAngle);
// TODO hide pointer on NaN value?
graphic.initProps(pointer, {
rotation: -(
(isNaN(+val) ? angleExtent[0] : linearMap(val, valueExtent, angleExtent, true))
+ Math.PI / 2
)
}, seriesModel);
group.add(pointer);
data.setItemGraphicEl(idx, pointer);
}
if (showProgress) {
const progress = createProgress(idx, startAngle) as graphic.Sector;
const isClip = progressModel.get('clip');
graphic.initProps(progress, {
shape: {
endAngle: linearMap(val, valueExtent, angleExtent, isClip)
}
}, seriesModel);
group.add(progress);
// Add data index and series index for indexing the data by element
// Useful in tooltip
setCommonECData(seriesModel.seriesIndex, data.dataType, idx, progress);
progressList[idx] = progress;
}
})
.update(function (newIdx, oldIdx) {
const val = data.get(valueDim, newIdx) as number;
if (showPointer) {
const previousPointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
const previousRotate = previousPointer ? previousPointer.rotation : startAngle;
const pointer = createPointer(newIdx, previousRotate);
pointer.rotation = previousRotate;
graphic.updateProps(pointer, {
rotation: -(
(isNaN(+val) ? angleExtent[0] : linearMap(val, valueExtent, angleExtent, true))
+ Math.PI / 2
)
}, seriesModel);
group.add(pointer);
data.setItemGraphicEl(newIdx, pointer);
}
if (showProgress) {
const previousProgress = oldProgressData[oldIdx];
const previousEndAngle = previousProgress ? previousProgress.shape.endAngle : startAngle;
const progress = createProgress(newIdx, previousEndAngle) as graphic.Sector;
const isClip = progressModel.get('clip');
graphic.updateProps(progress, {
shape: {
endAngle: linearMap(val, valueExtent, angleExtent, isClip)
}
}, seriesModel);
group.add(progress);
// Add data index and series index for indexing the data by element
// Useful in tooltip
setCommonECData(seriesModel.seriesIndex, data.dataType, newIdx, progress);
progressList[newIdx] = progress;
}
})
.execute();
data.each(function (idx) {
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const emphasisModel = itemModel.getModel('emphasis');
const focus = emphasisModel.get('focus');
const blurScope = emphasisModel.get('blurScope');
const emphasisDisabled = emphasisModel.get('disabled');
if (showPointer) {
const pointer = data.getItemGraphicEl(idx) as ECSymbol;
const symbolStyle = data.getItemVisual(idx, 'style');
const visualColor = symbolStyle.fill;
if (pointer instanceof ZRImage) {
const pathStyle = pointer.style;
pointer.useStyle(extend({
image: pathStyle.image,
x: pathStyle.x, y: pathStyle.y,
width: pathStyle.width, height: pathStyle.height
}, symbolStyle));
}
else {
pointer.useStyle(symbolStyle);
pointer.type !== 'pointer' && pointer.setColor(visualColor);
}
pointer.setStyle(itemModel.getModel(['pointer', 'itemStyle']).getItemStyle());
if (pointer.style.fill === 'auto') {
pointer.setStyle('fill', getColor(
linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true)
));
}
(pointer as ECElement).z2EmphasisLift = 0;
setStatesStylesFromModel(pointer, itemModel);
toggleHoverEmphasis(pointer, focus, blurScope, emphasisDisabled);
}
if (showProgress) {
const progress = progressList[idx];
progress.useStyle(data.getItemVisual(idx, 'style'));
progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle());
(progress as ECElement).z2EmphasisLift = 0;
setStatesStylesFromModel(progress, itemModel);
toggleHoverEmphasis(progress, focus, blurScope, emphasisDisabled);
}
});
this._progressEls = progressList;
}
}
_renderAnchor(
seriesModel: GaugeSeriesModel,
posInfo: PosInfo
) {
const anchorModel = seriesModel.getModel('anchor');
const showAnchor = anchorModel.get('show');
if (showAnchor) {
const anchorSize = anchorModel.get('size');
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,
anchorKeepAspect
) as graphic.Path;
anchor.z2 = anchorModel.get('showAbove') ? 1 : 0;
anchor.setStyle(anchorModel.getModel('itemStyle').getItemStyle());
this.group.add(anchor);
}
}
_renderTitleAndDetail(
seriesModel: GaugeSeriesModel,
ecModel: GlobalModel,
api: ExtensionAPI,
getColor: (percent: number) => ColorString,
posInfo: PosInfo
) {
const data = seriesModel.getData();
const valueDim = data.mapDimension('value');
const minVal = +seriesModel.get('min');
const maxVal = +seriesModel.get('max');
const contentGroup = new graphic.Group();
const newTitleEls: graphic.Text[] = [];
const newDetailEls: graphic.Text[] = [];
const hasAnimation = seriesModel.isAnimationEnabled();
const showPointerAbove = seriesModel.get(['pointer', 'showAbove']);
data.diff(this._data)
.add((idx) => {
newTitleEls[idx] = new graphic.Text({
silent: true
});
newDetailEls[idx] = new graphic.Text({
silent: true
});
})
.update((idx, oldIdx) => {
newTitleEls[idx] = this._titleEls[oldIdx];
newDetailEls[idx] = this._detailEls[oldIdx];
})
.execute();
data.each(function (idx) {
const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
const value = data.get(valueDim, idx) as number;
const itemGroup = new graphic.Group();
const autoColor = getColor(
linearMap(value, [minVal, maxVal], [0, 1], true)
);
const itemTitleModel = itemModel.getModel('title');
if (itemTitleModel.get('show')) {
const titleOffsetCenter = itemTitleModel.get('offsetCenter');
const titleX = posInfo.cx + parsePercent(titleOffsetCenter[0], posInfo.r);
const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r);
const labelEl = newTitleEls[idx];
labelEl.attr({
z2: showPointerAbove ? 0 : 2,
style: createTextStyle(itemTitleModel, {
x: titleX,
y: titleY,
text: data.getName(idx),
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: autoColor})
});
itemGroup.add(labelEl);
}
const itemDetailModel = itemModel.getModel('detail');
if (itemDetailModel.get('show')) {
const detailOffsetCenter = itemDetailModel.get('offsetCenter');
const detailX = posInfo.cx + parsePercent(detailOffsetCenter[0], posInfo.r);
const detailY = posInfo.cy + parsePercent(detailOffsetCenter[1], posInfo.r);
const width = parsePercent(itemDetailModel.get('width'), posInfo.r);
const height = parsePercent(itemDetailModel.get('height'), posInfo.r);
const detailColor = (
seriesModel.get(['progress', 'show']) ? data.getItemVisual(idx, 'style').fill : autoColor
) as string;
const labelEl = newDetailEls[idx];
const formatter = itemDetailModel.get('formatter');
labelEl.attr({
z2: showPointerAbove ? 0 : 2,
style: createTextStyle(itemDetailModel, {
x: detailX,
y: detailY,
text: formatLabel(value, formatter),
width: isNaN(width) ? null : width,
height: isNaN(height) ? null : height,
align: 'center',
verticalAlign: 'middle'
}, {inheritColor: detailColor})
});
setLabelValueAnimation(
labelEl,
{normal: itemDetailModel},
value,
(value: number) => formatLabel(value, formatter)
);
hasAnimation && animateLabelValue(labelEl, idx, data, seriesModel, {
getFormattedLabel(
labelDataIndex, status, dataType, labelDimIndex, fmt, extendParams
) {
return formatLabel(
extendParams
? extendParams.interpolatedValue as typeof value
: value,
formatter
);
}
});
itemGroup.add(labelEl);
}
contentGroup.add(itemGroup);
});
this.group.add(contentGroup);
this._titleEls = newTitleEls;
this._detailEls = newDetailEls;
}
}
export default GaugeView;
相关信息
相关文章
0
赞
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦