This is an automated email from the ASF dual-hosted git repository. yufeng04 pushed a commit to branch design-13216 in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 485bcf7d1c102ae2f4de23dada2d9e0472335e5e Author: yufeng04 <740135...@qq.com> AuthorDate: Wed Sep 30 22:04:42 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 d57e6b3..5be3259 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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org