You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/09/07 12:20:41 UTC
[echarts] 01/01: fix: Fix MarkLine/MarkPoint/MarkArea do not work
on time axis if input string time format. fix #15675
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/dataset-perf
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit ef1d850d886028cc4c7b259be04aa03fa0873fcf
Author: sushuang <su...@gmail.com>
AuthorDate: Tue Sep 7 20:19:55 2021 +0800
fix: Fix MarkLine/MarkPoint/MarkArea do not work on time axis if input string time format. fix #15675
---
src/component/marker/MarkAreaView.ts | 42 ++++++-------
src/component/marker/MarkLineView.ts | 9 +--
src/component/marker/MarkPointView.ts | 12 ++--
src/component/marker/markerHelper.ts | 35 +++++++----
test/marker-case.html | 111 ++++++++++++++++++++++++++++++++++
5 files changed, 165 insertions(+), 44 deletions(-)
diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts
index e23403c..f9b762c 100644
--- a/src/component/marker/MarkAreaView.ts
+++ b/src/component/marker/MarkAreaView.ts
@@ -27,7 +27,7 @@ import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states
import * as markerHelper from './markerHelper';
import MarkerView from './MarkerView';
import { retrieve, mergeAll, map, curry, filter, HashMap, extend } from 'zrender/src/core/util';
-import { ScaleDataValue, ParsedValue, ZRColor } from '../../util/types';
+import { ParsedValue, ScaleDataValue, ZRColor } from '../../util/types';
import { CoordinateSystem, isCoordinateSystemType } from '../../coord/CoordinateSystem';
import MarkAreaModel, { MarkArea2DDataItemOption } from './MarkAreaModel';
import SeriesModel from '../../model/Series';
@@ -41,6 +41,7 @@ import { getVisualFromData } from '../../visual/helper';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
import { getECData } from '../../util/innerStore';
import Axis2D from '../../coord/cartesian/Axis2D';
+import { parseDataValue } from '../../data/helper/dataValueHelper';
interface MarkAreaDrawGroup {
group: graphic.Group
@@ -362,11 +363,11 @@ function createList(
maModel: MarkAreaModel
) {
- let coordDimsInfos: SeriesDimensionDefine[];
let areaData: SeriesData<MarkAreaModel>;
+ let dataDims: SeriesDimensionDefine[];
const dims = ['x0', 'y0', 'x1', 'y1'];
if (coordSys) {
- coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
+ const coordDimsInfos: SeriesDimensionDefine[] = map(coordSys && coordSys.dimensions, function (coordDim) {
const data = seriesModel.getData();
const info = data.getDimensionInfo(
data.mapDimension(coordDim)
@@ -378,19 +379,18 @@ function createList(
ordinalMeta: null
});
});
- areaData = new SeriesData(map(dims, function (dim, idx) {
- return {
- name: dim,
- type: coordDimsInfos[idx % 2].type
- };
- }), maModel);
+ dataDims = map(dims, (dim, idx) => ({
+ name: dim,
+ type: coordDimsInfos[idx % 2].type
+ }));
+ areaData = new SeriesData(dataDims, maModel);
}
else {
- coordDimsInfos = [{
+ dataDims = [{
name: 'value',
type: 'float'
}];
- areaData = new SeriesData(coordDimsInfos, maModel);
+ areaData = new SeriesData(dataDims, maModel);
}
let optData = map(maModel.get('data'), curry(
@@ -402,17 +402,15 @@ function createList(
);
}
- const dimValueGetter = coordSys ? function (
- item: MarkAreaMergedItemOption,
- dimName: string,
- dataIndex: number,
- dimIndex: number
- ) {
- // TODO should convert to ParsedValue?
- return item.coord[Math.floor(dimIndex / 2)][dimIndex % 2] as ParsedValue;
- } : function (item: MarkAreaMergedItemOption) {
- return item.value;
- };
+ const dimValueGetter: markerHelper.MarkerDimValueGetter<MarkAreaMergedItemOption> = coordSys
+ ? function (item, dimName, dataIndex, dimIndex) {
+ // TODO should convert to ParsedValue?
+ const rawVal = item.coord[Math.floor(dimIndex / 2)][dimIndex % 2];
+ return parseDataValue(rawVal, dataDims[dimIndex]);
+ }
+ : function (item, dimName, dataIndex, dimIndex) {
+ return parseDataValue(item.value, dataDims[dimIndex]);
+ };
areaData.initData(optData, null, dimValueGetter);
areaData.hasItemOption = true;
return areaData;
diff --git a/src/component/marker/MarkLineView.ts b/src/component/marker/MarkLineView.ts
index 212ce68..7c651b6 100644
--- a/src/component/marker/MarkLineView.ts
+++ b/src/component/marker/MarkLineView.ts
@@ -50,6 +50,7 @@ import { makeInner } from '../../util/model';
import { LineDataVisual } from '../../visual/commonVisualTypes';
import { getVisualFromData } from '../../visual/helper';
import Axis2D from '../../coord/cartesian/Axis2D';
+import SeriesDimensionDefine from '../../data/SeriesDimensionDefine';
// Item option for configuring line and each end of symbol.
// Line option. be merged from configuration of two ends.
@@ -435,7 +436,7 @@ class MarkLineView extends MarkerView {
function createList(coordSys: CoordinateSystem, seriesModel: SeriesModel, mlModel: MarkLineModel) {
- let coordDimsInfos;
+ let coordDimsInfos: SeriesDimensionDefine[];
if (coordSys) {
coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
const info = seriesModel.getData().getDimensionInfo(
@@ -469,9 +470,9 @@ function createList(coordSys: CoordinateSystem, seriesModel: SeriesModel, mlMode
optData, curry(markLineFilter, coordSys)
);
}
- const dimValueGetter = coordSys ? markerHelper.dimValueGetter : function (item: MarkLineMergedItemOption) {
- return item.value;
- };
+
+ const dimValueGetter = markerHelper.createMarkerDimValueGetter(!!coordSys, coordDimsInfos);
+
fromData.initData(
map(optData, function (item) {
return item[0];
diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts
index f0693da..d5e4fc1 100644
--- a/src/component/marker/MarkPointView.ts
+++ b/src/component/marker/MarkPointView.ts
@@ -29,10 +29,11 @@ import MarkPointModel, {MarkPointDataItemOption} from './MarkPointModel';
import GlobalModel from '../../model/Global';
import MarkerModel from './MarkerModel';
import ExtensionAPI from '../../core/ExtensionAPI';
-import { HashMap, isFunction, map, defaults, filter, curry, extend } from 'zrender/src/core/util';
+import { HashMap, isFunction, map, filter, curry, extend } from 'zrender/src/core/util';
import { getECData } from '../../util/innerStore';
import { getVisualFromData } from '../../visual/helper';
import { ZRColor } from '../../util/types';
+import SeriesDimensionDefine from '../../data/SeriesDimensionDefine';
function updateMarkerLayout(
mpData: SeriesData<MarkPointModel>,
@@ -180,7 +181,7 @@ function createData(
seriesModel: SeriesModel,
mpModel: MarkPointModel
) {
- let coordDimsInfos;
+ let coordDimsInfos: SeriesDimensionDefine[];
if (coordSys) {
coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
const info = seriesModel.getData().getDimensionInfo(
@@ -211,11 +212,8 @@ function createData(
);
}
- mpData.initData(dataOpt, null,
- coordSys ? markerHelper.dimValueGetter : function (item: MarkPointDataItemOption) {
- return item.value;
- }
- );
+ const dimValueGetter = markerHelper.createMarkerDimValueGetter(!!coordSys, coordDimsInfos);
+ mpData.initData(dataOpt, null, dimValueGetter);
return mpData;
}
diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts
index 0987473..f0394b7 100644
--- a/src/component/marker/markerHelper.ts
+++ b/src/component/marker/markerHelper.ts
@@ -26,6 +26,8 @@ import { indexOf, curry, clone, isArray } from 'zrender/src/core/util';
import Axis from '../../coord/Axis';
import { CoordinateSystem } from '../../coord/CoordinateSystem';
import { ScaleDataValue, ParsedValue, DimensionLoose, DimensionName } from '../../util/types';
+import { parseDataValue } from '../../data/helper/dataValueHelper';
+import SeriesDimensionDefine from '../../data/SeriesDimensionDefine';
interface MarkerAxisInfo {
valueDataDim: DimensionName
@@ -34,6 +36,13 @@ interface MarkerAxisInfo {
baseDataDim: DimensionName
}
+export type MarkerDimValueGetter<TMarkerItemOption> = (
+ item: TMarkerItemOption,
+ dimName: string,
+ dataIndex: number,
+ dimIndex: number
+) => ParsedValue;
+
function hasXOrY(item: MarkerPositionOption) {
return !(isNaN(parseFloat(item.x as string)) && isNaN(parseFloat(item.y as string)));
}
@@ -187,17 +196,21 @@ export function dataFilter(
? coordSys.containData(item.coord) : true;
}
-export function dimValueGetter(
- item: MarkerPositionOption,
- dimName: string,
- dataIndex: number,
- dimIndex: number
-) {
- // x, y, radius, angle
- if (dimIndex < 2) {
- return item.coord && item.coord[dimIndex] as ParsedValue;
- }
- return item.value;
+export function createMarkerDimValueGetter(
+ inCoordSys: boolean,
+ dims: SeriesDimensionDefine[]
+): MarkerDimValueGetter<MarkerPositionOption> {
+ return inCoordSys
+ ? function (item, dimName, dataIndex, dimIndex) {
+ const rawVal = dimIndex < 2
+ // x, y, radius, angle
+ ? (item.coord && item.coord[dimIndex])
+ : item.value;
+ return parseDataValue(rawVal, dims[dimIndex]);
+ }
+ : function (item, dimName, dataIndex, dimIndex) {
+ return parseDataValue(item.value, dims[dimIndex]);
+ };
}
export function numCalculate(
diff --git a/test/marker-case.html b/test/marker-case.html
new file mode 100644
index 0000000..756fa49
--- /dev/null
+++ b/test/marker-case.html
@@ -0,0 +1,111 @@
+<!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/simpleRequire.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>
+
+
+
+
+
+ <script>
+ require([
+ 'echarts',
+ ], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {
+ type: 'time',
+ },
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [['2018-12-31', 22], ['2020-12-31', 44]],
+ markLine: {
+ symbol: ['none', 'none'],
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'grey',
+ width: 1
+ },
+ silent: true,
+ data: [
+ {xAxis: '2018-12-31'},
+ {xAxis: '2019-12-31'},
+ {xAxis: '2020-12-31'}
+ ]
+ },
+ markPoint: {
+ data: [
+ {xAxis: '2019-05-31', yAxis: 20, name: 'MarkPoint', value: 999}
+ ]
+ },
+ markArea: {
+ data: [
+ [{
+ name: 'x 3 - 5',
+ xAxis: '2020-05-31'
+ }, {
+ xAxis: '2019-09-31'
+ }]
+ ]
+ }
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ '3 MarkLine should be displayed in time axis',
+ '1 MarkPoint should be displayed in time axis',
+ '1 MarkArea should be displayed in time axis',
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org