You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by yu...@apache.org on 2020/09/30 14:24:05 UTC
[incubator-echarts] branch next updated: 1. add splitLine.distance
& axisTick.distance 2. add anchor 3. support svg of pointer 4. add progress
This is an automated email from the ASF dual-hosted git repository.
yufeng04 pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new 01ae328 1. add splitLine.distance & axisTick.distance 2. add anchor 3. support svg of pointer 4. add progress
01ae328 is described below
commit 01ae3280fbdddb684ab5477bb42bd01daa30f901
Author: yufeng04 <74...@qq.com>
AuthorDate: Wed Sep 30 22:22:59 2020 +0800
1. add splitLine.distance & axisTick.distance 2. add anchor 3. support svg of pointer 4. add progress
---
src/chart/gauge/GaugeSeries.ts | 91 +++++--
src/chart/gauge/GaugeView.ts | 300 ++++++++++++++++------
src/theme/dark.ts | 13 +-
src/util/types.ts | 1 +
test/gauge-distance.html | 569 +++++++++++++++++++++++++++++++++++++++++
test/gauge-pointer.html | 313 +++++++++++++++++++++++
test/gauge-progress.html | 320 +++++++++++++++++++++++
test/gauge.html | 97 ++++++-
8 files changed, 1597 insertions(+), 107 deletions(-)
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index 5910081..f3521e8 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -40,14 +40,33 @@ interface LabelFormatter {
}
interface PointerOption {
+ icon?: string
show?: boolean
+ keepAspect?: boolean
+ itemStyle?: ItemStyleOption
/**
* Can be percent
*/
+ offsetCenter?: (number | string)[]
length?: number | string
width?: number
}
+interface AnchorOption {
+ show?: boolean
+ anchorSize?: number
+ itemStyle?: ItemStyleOption
+}
+
+interface ProgressOption {
+ show?: boolean
+ overlap?: boolean
+ width?: number
+ roundCap?: boolean
+ silent?: boolean
+ itemStyle?: ItemStyleOption
+}
+
export interface GaugeStateOption {
itemStyle?: ItemStyleOption
}
@@ -56,6 +75,7 @@ export interface GaugeDataItemOption extends GaugeStateOption, StatesOptionMixin
name?: string
value?: OptionDataValueNumeric
pointer?: PointerOption
+ progress?: ProgressOption
}
export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, GaugeStateOption,
CircleLayoutOptionMixin {
@@ -73,19 +93,25 @@ export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, Gauge
splitNumber?: number
+ itemStyle?: ItemStyleOption
+
axisLine?: {
show?: boolean
+ roundCap?: boolean
lineStyle: Omit<LineStyleOption, 'color'> & {
color: GaugeColorStop[]
}
},
+ progress?: ProgressOption
+
splitLine?: {
show?: boolean
/**
* Can be percent
*/
length?: number
+ distance?: number
lineStyle?: LineStyleOption
}
@@ -96,6 +122,7 @@ export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, Gauge
* Can be percent
*/
length?: number | string
+ distance?: number
lineStyle?: LineStyleOption
}
@@ -104,6 +131,7 @@ export interface GaugeSeriesOption extends SeriesOption<GaugeStateOption>, Gauge
}
pointer?: PointerOption
+ anchor?: AnchorOption
title?: LabelOption & {
/**
@@ -128,6 +156,9 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
static type = 'series.gauge' as const;
type = GaugeSeriesModel.type;
+ visualStyleAccessPath = 'itemStyle';
+ useColorPaletteOnData = true;
+
getInitialData(option: GaugeSeriesOption, ecModel: GlobalModel): List {
return createListSimply(this, ['value']);
}
@@ -152,21 +183,32 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
axisLine: {
// 默认显示，属性show控制显示与否
show: true,
+ roundCap: false,
lineStyle: { // 属性lineStyle控制线条样式
- color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
- width: 30
+ color: [[1, '#E6EBF8']],
+ width: 10
}
},
+ // 坐标轴线
+ progress: {
+ // 默认显示，属性show控制显示与否
+ show: false,
+ overlap: true,
+ width: 10,
+ roundCap: false,
+ silent: false
+ },
// 分隔线
splitLine: {
// 默认显示，属性show控制显示与否
show: true,
// 属性length控制线长
- length: 30,
+ length: 10,
+ distance: 10,
// 属性lineStyle（详见lineStyle）控制线条样式
lineStyle: {
- color: '#eee',
- width: 2,
+ color: '#63677A',
+ width: 3,
type: 'solid'
}
},
@@ -177,35 +219,46 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
// 每份split细分多少段
splitNumber: 5,
// 属性length控制线长
- length: 8,
+ length: 6,
+ distance: 10,
// 属性lineStyle控制线条样式
lineStyle: {
- color: '#eee',
+ color: '#63677A',
width: 1,
type: 'solid'
}
},
axisLabel: {
show: true,
- distance: 5,
+ distance: 15,
// formatter: null,
- color: 'auto'
+ color: '#464646',
+ fontSize: 12
},
pointer: {
+ icon: 'default',
+ offsetCenter: [0, 0],
show: true,
- length: '80%',
- width: 8
+ length: '60%',
+ width: 6,
+ keepAspect: false
},
- itemStyle: {
- color: 'auto'
+ anchor: {
+ show: false,
+ anchorSize: 6,
+ itemStyle: {
+ color: '#fff',
+ borderWidth: 0,
+ borderColor: '#5470c6'
+ }
},
title: {
show: true,
// x, y，单位px
- offsetCenter: [0, '-40%'],
+ offsetCenter: [0, '20%'],
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
- color: '#333',
- fontSize: 15
+ color: '#464646',
+ fontSize: 16
},
detail: {
show: true,
@@ -219,8 +272,10 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
offsetCenter: [0, '40%'],
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
- color: 'auto',
- fontSize: 30
+ color: '#464646',
+ fontSize: 30,
+ fontWeight: 'bold',
+ lineHeight: 30
}
};
}
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index acd83fa..c3be885 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -28,6 +28,8 @@ import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../ExtensionAPI';
import { ColorString } from '../../util/types';
import List from '../../data/List';
+import Sausage from '../../util/shape/sausage';
+import {createSymbol} from '../../util/symbol';
interface PosInfo {
cx: number
@@ -72,6 +74,7 @@ class GaugeView extends ChartView {
type = GaugeView.type;
private _data: List;
+ private _progressData: graphic.Path[];
render(seriesModel: GaugeSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
@@ -95,25 +98,26 @@ class GaugeView extends ChartView {
posInfo: PosInfo
) {
const group = this.group;
-
- const axisLineModel = seriesModel.getModel('axisLine');
- const lineStyleModel = axisLineModel.getModel('lineStyle');
-
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 angleRangeSpan = (endAngle - startAngle) % PI2;
let prevEndAngle = startAngle;
- const axisLineWidth = lineStyleModel.get('width');
- const showAxis = axisLineModel.get('show');
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 graphic.Sector({
+ const sector = new MainPath({
shape: {
startAngle: prevEndAngle,
endAngle: endAngle,
@@ -166,14 +170,16 @@ class GaugeView extends ChartView {
this._renderTicks(
seriesModel, ecModel, api, getColor, posInfo,
- startAngle, endAngle, clockwise
+ startAngle, endAngle, clockwise, axisLineWidth
);
this._renderPointer(
seriesModel, ecModel, api, getColor, posInfo,
- startAngle, endAngle, clockwise
+ startAngle, endAngle, clockwise, axisLineWidth
);
+ this._renderAnchor(seriesModel, posInfo);
+
this._renderTitle(
seriesModel, ecModel, api, getColor, posInfo
);
@@ -190,7 +196,8 @@ class GaugeView extends ChartView {
posInfo: PosInfo,
startAngle: number,
endAngle: number,
- clockwise: boolean
+ clockwise: boolean,
+ axisLineWidth: number
) {
const group = this.group;
const cx = posInfo.cx;
@@ -221,6 +228,8 @@ class GaugeView extends ChartView {
const splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
const tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
+ const splitLineDistance = splitLineModel.get('distance');
+
let unitX;
let unitY;
@@ -229,12 +238,13 @@ class GaugeView extends ChartView {
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 + cx,
- y1: unitY * r + cy,
- x2: unitX * (r - splitLineLen) + cx,
- y2: unitY * (r - splitLineLen) + cy
+ 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
@@ -250,11 +260,12 @@ class GaugeView extends ChartView {
// Label
if (labelModel.get('show')) {
+ const distance = labelModel.get('distance') + splitLineDistance;
+
const label = formatLabel(
round(i / splitNumber * (maxVal - minVal) + minVal),
labelModel.get('formatter')
);
- const distance = labelModel.get('distance');
const autoColor = getColor(i / splitNumber);
group.add(new graphic.Text({
@@ -273,15 +284,18 @@ class GaugeView extends ChartView {
// 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 + cx,
- y1: unitY * r + cy,
- x2: unitX * (r - tickLen) + cx,
- y2: unitY * (r - tickLen) + cy
+ 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
@@ -312,89 +326,207 @@ class GaugeView extends ChartView {
posInfo: PosInfo,
startAngle: number,
endAngle: number,
- clockwise: boolean
+ clockwise: boolean,
+ axisLineWidth: number
) {
const group = this.group;
const oldData = this._data;
+ const oldProgressData = this._progressData;
+ const progressList = [] as graphic.Path[];
- if (!seriesModel.get(['pointer', 'show'])) {
- // Remove old element
- oldData && oldData.eachItemGraphicEl(function (el) {
- group.remove(el);
- });
- return;
- }
-
- const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
- const angleExtent = [startAngle, endAngle];
+ 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');
+ if (showProgress || showPointer) {
+ const valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
+ const angleExtent = [startAngle, endAngle];
- data.diff(oldData)
- .add(function (idx) {
- const pointer = new PointerPath({
- shape: {
- angle: startAngle
+ const data = seriesModel.getData();
+ const valueDim = data.mapDimension('value');
+
+ data.diff(oldData)
+ .add(function (idx) {
+ if (showPointer) {
+ 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 pointerKeepAspect = pointerModel.get('keepAspect');
+ let pointer;
+ if (pointerStr.indexOf('path://') === 0) {
+ pointer = createSymbol(
+ pointerStr,
+ parsePercent(pointerOffset[0], posInfo.r) - pointerWidth / 2,
+ parsePercent(pointerOffset[1], posInfo.r) - pointerLength,
+ pointerWidth,
+ pointerLength,
+ null,
+ pointerKeepAspect
+ ) as graphic.Path;
+ }
+ else {
+ pointer = new PointerPath({
+ shape: {
+ angle: -Math.PI / 2
+ }
+ })
+ }
+ pointer.rotation = -(startAngle + Math.PI / 2);
+ pointer.x = posInfo.cx;
+ pointer.y = posInfo.cy;
+ graphic.initProps(pointer, {
+ rotation: -(linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
+ }, seriesModel);
+ group.add(pointer);
+ data.setItemGraphicEl(idx, pointer);
}
- });
- graphic.initProps(pointer, {
- shape: {
- angle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true)
+ if (showProgress) {
+ 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 progressSilent = progressModel.get('silent');
+ const progress = new ProgressPath({
+ shape: {
+ startAngle: startAngle,
+ endAngle: linearMap(data.get(valueDim, idx) as number, valueExtent, angleExtent, true),
+ cx: posInfo.cx,
+ cy: posInfo.cy,
+ clockwise: clockwise,
+ r0: r0,
+ r: r
+ },
+ // 是否相应鼠标事件
+ silent: progressSilent
+ });
+ group.add(progress);
+ progressList[idx] = progress;
+ }
+ })
+ .update(function (newIdx, oldIdx) {
+ if (showPointer) {
+ const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
+
+ graphic.updateProps(pointer, {
+ rotation: -(linearMap(data.get(valueDim, oldIdx) as number, valueExtent, angleExtent, true) + Math.PI / 2)
+ }, seriesModel);
+ group.add(pointer);
+ data.setItemGraphicEl(newIdx, pointer);
}
- }, seriesModel);
- group.add(pointer);
- data.setItemGraphicEl(idx, pointer);
- })
- .update(function (newIdx, oldIdx) {
- const pointer = oldData.getItemGraphicEl(oldIdx) as PointerPath;
+ if (showProgress) {
+ const progress = oldProgressData[oldIdx];
+ graphic.updateProps(progress, {
+ shape: {
+ endAngle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true)
+ }
+ }, seriesModel);
+ group.add(progress);
+ progressList[newIdx] = progress;
+ }
+ })
+ .remove(function (idx) {
+ if (showPointer) {
+ const pointer = oldData.getItemGraphicEl(idx);
+ group.remove(pointer);
+ }
- graphic.updateProps(pointer, {
- shape: {
- angle: linearMap(data.get(valueDim, newIdx) as number, valueExtent, angleExtent, true)
+ if (showProgress) {
+ const progress = oldProgressData[idx];
+ group.remove(progress);
}
- }, seriesModel);
-
- group.add(pointer);
- data.setItemGraphicEl(newIdx, pointer);
- })
- .remove(function (idx) {
- const pointer = oldData.getItemGraphicEl(idx);
- group.remove(pointer);
- })
- .execute();
-
- data.eachItemGraphicEl(function (pointer: PointerPath, idx) {
- const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
- const pointerModel = itemModel.getModel('pointer');
- const emphasisModel = itemModel.getModel('emphasis');
-
- pointer.setShape({
- x: posInfo.cx,
- y: posInfo.cy,
- width: parsePercent(
- pointerModel.get('width'), posInfo.r
- ),
- r: parsePercent(pointerModel.get('length'), posInfo.r)
- });
+ })
+ .execute();
+
+ data.each(function (idx) {
+ const itemModel = data.getItemModel<GaugeDataItemOption>(idx);
+ const emphasisModel = itemModel.getModel('emphasis');
+
+ if (showPointer) {
+ const pointer = data.getItemGraphicEl(idx) as PointerPath;
+ const pointerModel = itemModel.getModel('pointer');
+ pointer.setShape({
+ width: parsePercent(pointerModel.get('width'), posInfo.r),
+ r: parsePercent(pointerModel.get('length'), posInfo.r)
+ });
+ pointer.x = posInfo.cx;
+ pointer.y = posInfo.cy;
+
+ pointer.useStyle(data.getItemVisual(idx, 'style'));
+ 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)
+ ));
+ }
+
+ setStatesStylesFromModel(pointer, itemModel);
+ enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+ }
- pointer.useStyle(itemModel.getModel('itemStyle').getItemStyle());
+ if (showProgress) {
+ const progress = progressList[idx];
+ progress.useStyle(data.getItemVisual(idx, 'style'));
+ progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle());
+ progress.setShape({
+ cx: posInfo.cx,
+ cy: posInfo.cy
+ });
+ progress.z2 = +seriesModel.get('max') - (data.get(valueDim, idx) as number);
+ setStatesStylesFromModel(progress, itemModel);
+ enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
+ }
+ });
- if (pointer.style.fill === 'auto') {
- pointer.setStyle('fill', getColor(
- linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true)
- ));
+ this._data = data;
+ this._progressData = progressList;
+ }
+ else {
+ if (!showPointer) {
+ // Remove old element
+ oldData && oldData.eachItemGraphicEl(function (el) {
+ group.remove(el);
+ });
}
+ if (!showProgress) {
+ // Remove old element
+ oldProgressData && oldProgressData.forEach(function (el) {
+ group.remove(el);
+ });
+ }
+ }
+ }
- setStatesStylesFromModel(pointer, itemModel);
- enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
- });
-
- this._data = data;
+ _renderAnchor(
+ seriesModel: GaugeSeriesModel,
+ posInfo: PosInfo
+ ) {
+ const anchorModel = seriesModel.getModel('anchor');
+ const showAnchor = anchorModel.get('show');
+ if (showAnchor) {
+ const anchorSize = anchorModel.get('anchorSize');
+ const symbol = createSymbol(
+ 'circle',
+ posInfo.cx - anchorSize / 2,
+ posInfo.cy - anchorSize / 2,
+ anchorSize,
+ anchorSize,
+ null,
+ true
+ ) as graphic.Path;
+ symbol.setStyle(anchorModel.getModel('itemStyle').getItemStyle());
+ this.group.add(symbol);
+ }
}
_renderTitle(
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 073e70d..b2f146a 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -186,9 +186,18 @@ const theme = {
},
gauge: {
title: {
- textStyle: {
- color: contrastColor
+ color: contrastColor
+ },
+ axisLine: {
+ lineStyle: {
+ color: [[1, 'rgba(207,212,219,0.2)']]
}
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ detail: {
+ color: '#EEF1FA'
}
},
candlestick: {
diff --git a/src/util/types.ts b/src/util/types.ts
index 0c3617f..f6eee3d 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -795,6 +795,7 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
join?: CanvasLineJoin
dashOffset?: number
miterLimit?: number
+ roundCap?: boolean
}
/**
diff --git a/test/gauge-distance.html b/test/gauge-distance.html
new file mode 100644
index 0000000..6c4342f
--- /dev/null
+++ b/test/gauge-distance.html
@@ -0,0 +1,569 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'The default value of distance and length',
+ 'splitLine.distance: 10, splitLine.length: 10',
+ 'axisTick.distance: 10, axisTick.length: 6',
+ 'axisLabel.distance: 15'
+ ],
+ option: option
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option1 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ progress: {
+ show: true,
+ width: 18
+ },
+ axisLine: {
+ lineStyle: {
+ width: 18
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ length: 15,
+ lineStyle: {
+ width: 2,
+ color: '#999'
+ }
+ },
+ axisLabel: {
+ distance: 25,
+ color: '#999',
+ fontSize: 20
+ },
+ anchor: {
+ show: true,
+ anchorSize: 25,
+ itemStyle: {
+ borderWidth: 10
+ }
+ },
+ title: {
+ show: false
+ },
+ detail: {
+ fontSize: 50,
+ offsetCenter: [0, '75%'],
+ },
+ data: [{value: 70, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart1 = testHelper.create(echarts, 'main1', {
+ title: [
+ 'splitLine.distance: 10, splitLine.length: 15',
+ 'axisLabel.distance: 25'
+ ],
+ option: option1,
+ height: 890,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option2 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ axisLine: {
+ lineStyle: {
+ width: 30,
+ color: [
+ [0.3, '#67e0e3'],
+ [0.7, '#37a2da'],
+ [1, '#fd666d']
+ ]
+ }
+ },
+ pointer: {
+ itemStyle: {
+ color: 'auto'
+ }
+ },
+ axisTick: {
+ distance: -30,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ length: 30,
+ distance: -30,
+ lineStyle: {
+ color: '#fff',
+ width: 2
+ }
+ },
+ axisLabel: {
+ color: 'auto',
+ distance: 35,
+ fontSize: 20
+ },
+ detail: {
+ formatter: '{value}%',
+ color: 'auto'
+ },
+ data: [{value: 70, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart2 = testHelper.create(echarts, 'main2', {
+ title: [
+ 'splitLine.distance: -30, splitLine.length: 30',
+ 'axisTick.distance: -30, axisTick.length: 6',
+ 'axisLabel.distance: 35'
+ ],
+ option: option2,
+ height: 890,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ chart2.setOption(option2, true);
+ }, 2000);
+
+
+
+ var option3 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '学生成绩',
+ type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 1,
+ splitNumber: 8,
+ axisLine: {
+ lineStyle: {
+ width: 5,
+ color: [
+ [0.25, '#FF6E76'],
+ [0.5, '#FDDD60'],
+ [0.75, '#58D9F9'],
+ [1, '#7CFFB2'],
+ ]
+ }
+ },
+ pointer: {
+ length: '80%',
+ itemStyle: {
+ color: 'auto'
+ }
+ },
+ axisTick: {
+ length: 15,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ splitLine: {
+ length: 20,
+ lineStyle: {
+ color: 'auto',
+ width: 5
+ }
+ },
+ axisLabel: {
+ color: '#464646',
+ fontSize: 20,
+ distance: -60,
+ formatter: function(value) {
+ if (value === 0.875) {
+ return '优'
+ }
+ else if (value === 0.625) {
+ return '中'
+ }
+ else if (value === 0.375) {
+ return '良'
+ }
+ else if (value === 0.125) {
+ return '差'
+ }
+ }
+ },
+ title: {
+ offsetCenter: [0, '-50%'],
+ fontSize: 40
+ },
+ detail: {
+ fontSize: 50,
+ offsetCenter: [0, '-30%'],
+ formatter: function(value) {
+ return value * 100 + '%';
+ },
+ color: 'auto'
+ },
+ data: [{value: 0.75, name: '成绩评定'}]
+ }
+ ]
+ };
+
+ var chart3 = testHelper.create(echarts, 'main3', {
+ title: [
+ 'splitLine.distance: -30, splitLine.length: 30',
+ 'axisTick.distance: -30, axisTick.length: 6',
+ 'axisLabel.distance: 35'
+ ],
+ option: option3,
+ height: 890,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+
+ var option4 = {
+ backgroundColor: '#fff',
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '速度仪表盘',
+ type: 'gauge',
+ startAngle: 180,
+ endAngle: 0,
+ min: 0,
+ max: 240,
+ splitNumber: 12,
+ itemStyle: {
+ color: '#58D9F9',
+ shadowColor: 'rgba(0,138,255,0.45)',
+ shadowBlur: 10,
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ },
+ progress: {
+ show: true,
+ roundCap: true,
+ width: 18
+ },
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ length: '70%',
+ width: 14,
+ offsetCenter: [0, '5%']
+ },
+ axisLine: {
+ roundCap: true,
+ lineStyle: {
+ width: 18
+ }
+ },
+ axisTick: {
+ splitNumber: 2
+ },
+ splitLine: {
+ length: 15,
+ lineStyle: {
+ width: 2,
+ color: '#999'
+ }
+ },
+ axisLabel: {
+ distance: 25,
+ color: '#999',
+ fontSize: 20
+ },
+ title: {
+ show: false
+ },
+ detail: {
+ backgroundColor: '#fff',
+ borderColor: '#999',
+ borderWidth: 2,
+ width: '60%',
+ lineHeight: 50,
+ height: '15%',
+ borderRadius: 10,
+ offsetCenter: [0, '35%'],
+ formatter: function(value) {
+ return '{value|' + value.toFixed(0) + '}{unit|km/h}';
+ },
+ rich: {
+ value: {
+ fontSize: 50,
+ fontWeight: 'bolder',
+ color: '#777'
+ },
+ unit: {
+ fontSize: 20,
+ color: '#999',
+ padding: [0, 0, 15, 6]
+ },
+ }
+ },
+ data: [{value: 100, name: 'km/h'}]
+ }
+ ]
+ };
+
+ var chart4 = testHelper.create(echarts, 'main4', {
+ title: [
+ 'splitLine.distance: 10, splitLine.length: 15',
+ 'axisLabel.distance: 25'
+ ],
+ option: option4,
+ height: 890,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+
+ var option5 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ min: 0,
+ max: 100,
+ splitNumber: 10,
+ radius: '80%',
+ axisLine: {
+ lineStyle: {
+ color: [[1, '#f00']],
+ width: 2
+ }
+ },
+ splitLine: {
+ distance: -17,
+ length: 15,
+ lineStyle: {
+ color: '#f00'
+ }
+ },
+ axisTick: {
+ distance: -12,
+ length: 10,
+ lineStyle: {
+ color: '#f00'
+ }
+ },
+ axisLabel: {
+ distance: -50,
+ color: '#f00',
+ fontSize: 25
+ },
+ anchor: {
+ show: true,
+ anchorSize: 20,
+ itemStyle: {
+ borderColor: '#000',
+ borderWidth: 2
+ }
+ },
+ pointer: {
+ offsetCenter: [0, '10%'],
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ length: '115%',
+ itemStyle: {
+ color: '#000'
+ }
+ },
+ title: {
+ offsetCenter: [0, '-50%']
+ },
+ data: [{value: 58.46, name: 'PLP低压计'}]
+ },
+ {
+ name: '业务指标',
+ type: 'gauge',
+ min: 0,
+ max: 60,
+ splitNumber: 6,
+ axisLine: {
+ lineStyle: {
+ color: [[1, '#000']],
+ width: 2
+ }
+ },
+ splitLine: {
+ distance: 0,
+ length: 15
+ },
+ axisTick: {
+ distance: 0,
+ length: 10
+ },
+ axisLabel: {
+ distance: 10,
+ fontSize: 25,
+ color: '#000'
+ },
+ pointer: {
+ show: false
+ },
+ title: {
+ show: false
+ },
+ anchor: {
+ show: true,
+ anchorSize: 14,
+ itemStyle: {
+ color: '#000'
+ // borderColor: '#000',
+ // borderWidth: 2
+ }
+ },
+ detail: {
+ show: false
+ // formatter: '{value}%'
+ },
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart5 = testHelper.create(echarts, 'main5', {
+ title: [
+ 'Multimeter'
+ ],
+ option: option5,
+ height: 890,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ setInterval(function () {
+ option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ chart5.setOption(option5, true);
+ }, 2000);
+
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/gauge-pointer.html b/test/gauge-pointer.html
new file mode 100644
index 0000000..51762a4
--- /dev/null
+++ b/test/gauge-pointer.html
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
+ <div id="main6"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ anchor: {
+ show: true
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'pointer.icon: "default"',
+ 'anchor.show: true'
+ ],
+ option: option
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+
+ var option1 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z'
+ },
+ anchor: {
+ // show: true
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart1 = testHelper.create(echarts, 'main1', {
+ title: [
+ 'pointer.icon: svg',
+ 'anchor.show: false'
+ ],
+ option: option1
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option2 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ width: 3,
+ length: '50%'
+ },
+ anchor: {
+ show: true,
+ anchorSize: 8,
+ itemStyle: {
+ color: '#5470c6'
+ }
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart2 = testHelper.create(echarts, 'main2', {
+ title: [
+ 'pointer.icon: svg',
+ 'anchor.show: true'
+ ],
+ option: option2
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option3 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+ width: 3,
+ length: '50%',
+ offsetCenter: [0, '8%']
+ },
+ anchor: {
+ show: true,
+ anchorSize: 8,
+ itemStyle: {
+ color: '#5470c6'
+ }
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart3 = testHelper.create(echarts, 'main3', {
+ title: [
+ 'pointer.icon: svg',
+ 'anchor.show: true',
+ 'pointer.offsetCenter: [0, "8%"]'
+ ],
+ option: option3
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option4 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ // width: 3,
+ length: '50%',
+ offsetCenter: [0, '8%']
+ },
+ anchor: {
+ show: true,
+ anchorSize: 8,
+ itemStyle: {
+ // borderColor: '#5470c6'
+ borderWidth: 1
+ }
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart4 = testHelper.create(echarts, 'main4', {
+ title: [
+ 'pointer.icon: svg',
+ 'anchor.show: true',
+ 'pointer.offsetCenter: [0, "8%"]'
+ ],
+ option: option4
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+
+ var option5 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
+ length: '15%',
+ width: 12,
+ offsetCenter: [0, '-40%']
+ },
+ anchor: {
+ // show: true
+ },
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+
+ var chart5 = testHelper.create(echarts, 'main5', {
+ title: [
+ 'pointer.icon: svg',
+ 'anchor.show: false'
+ ],
+ option: option5
+ // height: 1200,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option5.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ chart5.setOption(option5, true);
+ }, 2000);
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/gauge-progress.html b/test/gauge-progress.html
new file mode 100644
index 0000000..b2e2075
--- /dev/null
+++ b/test/gauge-progress.html
@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ var option0 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ },
+ progress: {
+ show: true, // 坐标轴线
+ },
+ data: [
+ {value: 20, name: '完成率'}
+ ],
+ detail: {
+ formatter: '{value}%'
+ },
+ }
+ ]
+ };
+ var chart0 = testHelper.create(echarts, 'main0', {
+ title: [
+ 'axisLine.roundCap: false, progress.roundCap: false, data.length: 1'
+ ],
+ option: option0
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option0.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ chart0.setOption(option0, true);
+ }, 2000);
+
+ var option1 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ },
+ progress: {
+ show: true, // 坐标轴线
+ roundCap: true
+ },
+ axisLine: {
+ roundCap: true
+ },
+ data: [
+ {value: 20, name: '完成率'}
+ ],
+ detail: {
+ formatter: '{value}%'
+ },
+ }
+ ]
+ };
+ var chart1 = testHelper.create(echarts, 'main1', {
+ title: [
+ 'axisLine.roundCap: true, progress.roundCap: true, data.length: 1'
+ ],
+ option: option1
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ chart1.setOption(option1, true);
+ }, 2000);
+
+
+ var option2 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ },
+ progress: {
+ show: true, // 坐标轴线
+ overlap: true,
+ roundCap: true
+ },
+ axisLine: {
+ roundCap: true
+ },
+ data: [
+ {value: 20, name: '完成率'},
+ {value: 40, name: '达标率'},
+ {value: 60, name: '优秀率'}
+ ],
+ title: {
+ show: false
+ },
+ detail: {
+ show: false,
+ formatter: '{value}%'
+ },
+ }
+ ]
+ };
+ var chart2 = testHelper.create(echarts, 'main2', {
+ title: [
+ 'axisLine.roundCap: true, progress.roundCap: true, overlap: true, data.length: 3, detail.show: false'
+ ],
+ option: option2
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option2.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ option2.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
+ option2.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
+ chart2.setOption(option2, true);
+ }, 2000);
+
+
+ var option3 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ progress: {
+ show: true, // 坐标轴线
+ overlap: false,
+ roundCap: true
+ },
+ data: [
+ {value: 20, name: '完成率'},
+ {value: 40, name: '达标率'},
+ {value: 60, name: '优秀率'}
+ ],
+ title: {
+ show: false
+ },
+ detail: {
+ show: false,
+ formatter: '{value}%'
+ },
+ }
+ ]
+ };
+ var chart3 = testHelper.create(echarts, 'main3', {
+ title: [
+ 'axisLine.roundCap: false, progress.roundCap: true, overlap: false, data.length: 3, detail.show: false'
+ ],
+ option: option3
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ option3.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
+ option3.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
+ chart3.setOption(option3, true);
+ }, 2000);
+
+
+ var option4 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32 [...]
+ },
+ progress: {
+ show: true, // 坐标轴线
+ overlap: false,
+ roundCap: true
+ },
+ axisLine: {
+ roundCap: true
+ },
+ data: [
+ {value: 20, name: '完成率'},
+ {value: 40, name: '达标率'},
+ {value: 60, name: '优秀率'}
+ ],
+ title: {
+ show: false
+ },
+ detail: {
+ show: false,
+ formatter: '{value}%'
+ },
+ }
+ ]
+ };
+ var chart4 = testHelper.create(echarts, 'main4', {
+ title: [
+ 'axisLine.roundCap: true, progress.roundCap: true, overlap: false, data.length: 3, detail.show: false, title.show: false'
+ ],
+ option: option4
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ setInterval(function () {
+ option4.series[0].pointer.show = false;
+ option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
+ option4.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
+ option4.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
+ chart4.setOption(option4, true);
+ }, 2000);
+
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/gauge.html b/test/gauge.html
index 8a9aa59..76dd474 100644
--- a/test/gauge.html
+++ b/test/gauge.html
@@ -30,10 +30,95 @@ under the License.
<style>
html, body, #main {
width: 100%;
- height: 100%;
+ height: 600;
}
</style>
- <div id="main"></div>
+ <div style="position: relative; height: 600px;" id="main"></div>
+ <div style="position: relative; height: 500px;" id="main1"></div>
+ <div style="position: relative; height: 500px;" id="main2"></div>
+ <script>
+ require([
+ 'echarts'
+ // 'echarts/chart/gauge',
+ // 'echarts/component/legend',
+ // 'echarts/component/tooltip'
+ ], function (echarts) {
+ var chart1 = echarts.init(document.getElementById('main1'), 'dark', {});
+ var option1 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ progress: {
+ show: true
+ },
+ anchor:{
+ show: true
+ },
+ roundCap: true,
+ detail: {formatter: '{value}%'},
+ data: [{value: 58.46, name: '完成率'}]
+ }
+ ]
+ };
+ chart1.setOption(option1);
+ })
+ </script>
+ <script>
+ require([
+ 'echarts'
+ // 'echarts/chart/gauge',
+ // 'echarts/component/legend',
+ // 'echarts/component/tooltip'
+ ], function (echarts) {
+ var chart2 = echarts.init(document.getElementById('main2'), 'dark', {});
+ var option2 = {
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ toolbox: {
+ feature: {
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ pointer: {
+ icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C208 [...]
+ },
+ roundCap: true,
+ progress: {
+ show: true, // 坐标轴线
+ overlap: false,
+ color: ['#f00', '#0f0']
+ },
+ anchor: {
+ show: true
+ },
+ detail: {formatter: '{value}%'},
+ data: [
+ {value: 30, name: '完成率'},
+ {value: 50, name: '成率'},
+ {value: 60, name: '达标率'}
+ ]
+ }
+ ]
+ };
+ chart2.setOption(option2);
+ })
+ </script>
<script>
require([
@@ -43,7 +128,7 @@ under the License.
// 'echarts/component/tooltip'
], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), null, {
+ var chart = echarts.init(document.getElementById('main'), {
});
@@ -77,12 +162,14 @@ under the License.
},
axisTick: { // 坐标轴小标记
length :15, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
@@ -208,12 +295,14 @@ under the License.
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
@@ -252,6 +341,7 @@ under the License.
axisTick: { // 坐标轴小标记
splitNumber:5,
length :10, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
@@ -267,6 +357,7 @@ under the License.
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
+ distance: 10,
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org