tvcharts 0.5.56 → 0.5.57

package/lib/component/axis/AxisBuilder.js

@@ -51,6 +51,7 @@ import { createSymbol, normalizeSymbolOffset } from '../../util/symbol.js';
 import * as matrixUtil from 'zrender/lib/core/matrix.js';
 import { applyTransform as v2ApplyTransform } from 'zrender/lib/core/vector.js';
 import { shouldShowAllLabels } from '../../coord/axisHelper.js';
+import * as globalListener from './globalListener.js';
 import { prepareLayoutList, hideOverlap } from '../../label/labelLayoutHelper.js';
 var PI = Math.PI;
 /**
@@ -154,6 +155,8 @@ var AxisBuilder = /** @class */function () {
   return AxisBuilder;
 }();
 ;
+var isMouseDown = false; // 鼠标是否按下
+var mouseY = 0; // 鼠标Y轴位置
 var builders = {
   axisLine: function (opt, axisModel, group, transformGroup) {
     var shown = axisModel.get(['axisLine', 'show']);
@@ -230,6 +233,125 @@ var builders = {
       });
     }
   },
+  axisBackground: function (opt, axisModel, group, transformGroup) {
+    var shown = axisModel.get(['axisBackground', 'show']);
+    if (!shown) {
+      return;
+    }
+    var extent = axisModel.axis.getExtent();
+    var matrix = transformGroup.transform;
+    var pt1 = [extent[0], 0];
+    // const pt2 = [extent[1], 0];
+    // const inverse = pt1[0] > pt2[0];
+    if (matrix) {
+      v2ApplyTransform(pt1, pt1, matrix);
+      // v2ApplyTransform(pt2, pt2, matrix);
+    }
+
+    var style = extend({
+      // lineCap: 'round'
+    }, axisModel.getModel(['axisBackground', 'backStyle']).getLineStyle());
+    var dataZoomModals = axisModel.ecModel.queryComponents({
+      mainType: 'dataZoom',
+      id: axisModel.mainType
+    });
+    var position = axisModel.axis.position;
+    var ecInstance = axisModel.ecModel.scheduler.ecInstance;
+    var api = axisModel.ecModel.scheduler.api;
+    var width = api.getWidth();
+    var rect = position === 'left' ? {
+      left: 0,
+      right: pt1[0],
+      top: 0,
+      bottom: pt1[1]
+    } : {
+      left: pt1[0],
+      right: width,
+      top: 0,
+      bottom: pt1[1]
+    };
+    var left = rect.left,
+      right = rect.right,
+      top = rect.top,
+      bottom = rect.bottom;
+    globalListener.register('axisBackground', axisModel.ecModel.scheduler.api, function (currTrigger, e) {
+      if (!e || !e.offsetX || !e.offsetY) {
+        return;
+      }
+      var offsetX = e.offsetX;
+      var offsetY = e.offsetY;
+      if (offsetX > right || offsetX < left || offsetY < top || offsetY > bottom) {
+        return;
+      }
+      switch (currTrigger) {
+        case 'mouseup':
+          isMouseDown = false;
+          mouseY = 0;
+          break;
+        case 'mousedown':
+          isMouseDown = true;
+          break;
+        case 'mousemove':
+          var zoomStep_1 = 0.2; // 设置缩放步长
+          if (isMouseDown && e.offsetY !== mouseY) {
+            dataZoomModals.forEach(function (item) {
+              var settledOption = item.settledOption,
+                componentIndex = item.componentIndex;
+              // 下滑
+              if (mouseY > e.offsetY) {
+                zoomStep_1 = -zoomStep_1;
+              }
+              ecInstance.dispatchAction({
+                type: 'dataZoom',
+                dataZoomIndex: componentIndex,
+                start: settledOption.start - zoomStep_1,
+                end: settledOption.end + zoomStep_1
+              });
+              mouseY = e.offsetY;
+            });
+          }
+          break;
+        case 'mousewheel':
+          {
+            var zoomStep_2 = e.wheelDelta * 0.8;
+            dataZoomModals.forEach(function (item) {
+              var settledOption = item.settledOption,
+                componentIndex = item.componentIndex;
+              ecInstance.dispatchAction({
+                type: 'dataZoom',
+                dataZoomIndex: componentIndex,
+                start: settledOption.start + zoomStep_2,
+                end: settledOption.end - zoomStep_2
+              });
+            });
+          }
+          break;
+      }
+      // console.log("y轴交互")
+      // if () {
+      // }
+    });
+    // todo 先不管x轴
+    var background = new graphic.Rect({
+      shape: position === 'left' ? {
+        x: 0,
+        y: 0,
+        width: pt1[0],
+        height: pt1[1]
+      } : {
+        x: pt1[0],
+        y: 0,
+        width: api.getWidth() - pt1[0],
+        height: pt1[1]
+      },
+      style: style,
+      cursor: 'ns-resize',
+      z2: 1
+    });
+    // graphic.subPixelOptimizeLine(line.shape, line.style.lineWidth);
+    background.anid = 'background';
+    group.add(background);
+  },
   axisTickLabel: function (opt, axisModel, group, transformGroup) {
     var ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
     var labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);

package/lib/component/axis/CartesianAxisView.js

@@ -49,7 +49,8 @@ import AxisView from './AxisView.js';
 import * as cartesianAxisHelper from '../../coord/cartesian/cartesianAxisHelper.js';
 import { rectCoordAxisBuildSplitArea, rectCoordAxisHandleRemove } from './axisSplitHelper.js';
 import { isIntervalOrLogScale } from '../../scale/helper.js';
-var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
+import * as globalListener from './globalListener.js';
+var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName', 'axisBackground'];
 var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
 var CartesianAxisView = /** @class */function (_super) {
   __extends(CartesianAxisView, _super);
@@ -101,9 +102,14 @@ var CartesianAxisView = /** @class */function (_super) {
     }
     _super.prototype.render.call(this, axisModel, ecModel, api, payload);
   };
-  CartesianAxisView.prototype.remove = function () {
+  CartesianAxisView.prototype.remove = function (ecModel, api) {
+    globalListener.unregister('axisPointer', api);
     rectCoordAxisHandleRemove(this);
   };
+  CartesianAxisView.prototype.dispose = function (ecModel, api) {
+    _super.prototype.dispose.call(this, ecModel, api);
+    globalListener.unregister('axisPointer', api);
+  };
   CartesianAxisView.type = 'cartesianAxis';
   return CartesianAxisView;
 }(AxisView);

package/lib/component/axis/globalListener.js

@@ -0,0 +1,81 @@
+
+/*
+* 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.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+import * as zrUtil from 'zrender/lib/core/util.js';
+import env from 'zrender/lib/core/env.js';
+import { makeInner } from '../../util/model.js';
+var inner = makeInner();
+var each = zrUtil.each;
+/**
+ * @param {string} key
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Function} handler
+ *      param: {string} currTrigger
+ *      param: {Array.<number>} point
+ */
+export function register(key, api, handler) {
+  if (env.node) {
+    return;
+  }
+  var zr = api.getZr();
+  inner(zr).records || (inner(zr).records = {});
+  initGlobalListeners(zr, api);
+  var record = inner(zr).records[key] || (inner(zr).records[key] = {});
+  record.handler = handler;
+}
+function initGlobalListeners(zr, api) {
+  if (inner(zr).initialized) {
+    return;
+  }
+  inner(zr).initialized = true;
+  useHandler('mouseup', zrUtil.curry(doEnter, 'mouseup'));
+  useHandler('mousemove', zrUtil.curry(doEnter, 'mousemove'));
+  useHandler('mousewheel', zrUtil.curry(doEnter, 'mousewheel'));
+  useHandler('mousedown', zrUtil.curry(doEnter, 'mousedown'));
+  useHandler('globalout', onLeave);
+  function useHandler(eventType, cb) {
+    zr.on(eventType, function (e) {
+      each(inner(zr).records, function (record) {
+        record && cb(record, e, api.dispatchAction);
+      });
+    });
+  }
+}
+function onLeave(record, e, dispatchAction) {
+  record.handler('leave', null, dispatchAction);
+}
+function doEnter(currTrigger, record, e, dispatchAction) {
+  record.handler(currTrigger, e, dispatchAction);
+}
+export function unregister(key, api) {
+  if (env.node) {
+    return;
+  }
+  var zr = api.getZr();
+  var record = (inner(zr).records || {})[key];
+  if (record) {
+    inner(zr).records[key] = null;
+  }
+}

package/lib/component/axisPointer/AxisPointerView.js

@@ -54,7 +54,7 @@ var AxisPointerView = /** @class */function (_super) {
     return _this;
   }
   AxisPointerView.prototype.render = function (globalAxisPointerModel, ecModel, api) {
-    var _a;
+    var _a, _b;
     var xAxisModel = ecModel.getComponent('xAxis');
     var yAxisModel = ecModel.getComponent('yAxis');
     var globalTooltipModel = ecModel.getComponent('tooltip');
@@ -98,7 +98,7 @@ var AxisPointerView = /** @class */function (_super) {
     // todo 当进行dataZoom的时候也需要更新axisPointer
     if (isDataZoom) {
       var dispatch = makeDispatchAction(api);
-      var event_1 = (_a = payload.batch[0]) === null || _a === void 0 ? void 0 : _a.event;
+      var event_1 = (_b = (_a = payload.batch) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.event;
       if ((event_1 === null || event_1 === void 0 ? void 0 : event_1.originX) || (event_1 === null || event_1 === void 0 ? void 0 : event_1.originY)) {
         handleAxisPointer('mousemove', {
           offsetX: event_1.originX,

package/lib/coord/axisDefault.js

@@ -120,6 +120,12 @@ var defaultOption = {
     areaStyle: {
       color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
     }
+  },
+  axisBackground: {
+    show: false,
+    backStyle: {
+      opacity: 0
+    }
   }
 };
 var categoryAxis = zrUtil.merge({
@@ -144,6 +150,7 @@ var categoryAxis = zrUtil.merge({
 }, defaultOption);
 var valueAxis = zrUtil.merge({
   boundaryGap: [0, 0],
+  axisBackground: {},
   axisLine: {
     // Not shown when other axis is categoryAxis in cartesian
     show: 'auto'

package/lib/coord/cartesian/cartesianAxisHelper.js

@@ -74,6 +74,7 @@ export function layout(gridModel, axisModel, opt) {
   // Axis position
   layout.position = [axisDim === 'y' ? posBound[idx[axisPosition]] : rectBound[0], axisDim === 'x' ? posBound[idx[axisPosition]] : rectBound[3]];
   // Axis rotation
+  // layout.rotation = 0;
   layout.rotation = Math.PI / 2 * (axisDim === 'x' ? 0 : 1);
   // Tick and label direction, x y is axisDim
   var dirMap = {

package/lib/core/echarts.js

@@ -384,6 +384,7 @@ var ECharts = /** @class */function (_super) {
     this._model.setOption(option, {
       replaceMerge: replaceMerge
     }, optionPreprocessorFuncs);
+    console.log("actions", actions);
     var updateParams = {
       seriesTransition: transitionOpt,
       optionChanged: true
@@ -1055,6 +1056,7 @@ var ECharts = /** @class */function (_super) {
           mainType: model.mainType,
           index: model.componentIndex
         };
+        console.log('%c [ view ]-1527', 'font-size:13px; background:pink; color:#bf2c9f;', view);
         !isComponent && scheduler.prepareView(view, model, ecModel, api);
       }
       for (var i = 0; i < viewList.length;) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tvcharts",
-  "version": "0.5.56",
+  "version": "0.5.57",
   "description": "基于echarts5.4.3二次开发",
   "license": "Apache-2.0",
   "keywords": [

package/types/dist/echarts.d.ts

@@ -2400,6 +2400,7 @@ interface AxisBaseOptionCommon extends ComponentOption, AnimationOptionMixin {
     splitLine?: SplitLineOption;
     minorSplitLine?: MinorSplitLineOption;
     splitArea?: SplitAreaOption;
+    axisBackground?: AxisBackgroundOption;
     /**
      * Min value of the axis. can be:
      * + ScaleDataValue
@@ -2555,6 +2556,10 @@ interface MinorSplitLineOption {
     show?: boolean;
     lineStyle?: LineStyleOption;
 }
+interface AxisBackgroundOption {
+    show?: boolean;
+    backStyle?: AreaStyleOption<ZRColor>;
+}
 interface SplitAreaOption {
     show?: boolean;
     interval?: 'auto' | number | ((index: number, value: string) => boolean);

package/types/dist/shared.d.ts

@@ -2400,6 +2400,7 @@ interface AxisBaseOptionCommon extends ComponentOption, AnimationOptionMixin {
     splitLine?: SplitLineOption;
     minorSplitLine?: MinorSplitLineOption;
     splitArea?: SplitAreaOption;
+    axisBackground?: AxisBackgroundOption;
     /**
      * Min value of the axis. can be:
      * + ScaleDataValue
@@ -2555,6 +2556,10 @@ interface MinorSplitLineOption {
     show?: boolean;
     lineStyle?: LineStyleOption;
 }
+interface AxisBackgroundOption {
+    show?: boolean;
+    backStyle?: AreaStyleOption<ZRColor>;
+}
 interface SplitAreaOption {
     show?: boolean;
     interval?: 'auto' | number | ((index: number, value: string) => boolean);

package/types/src/component/axis/AxisBuilder.d.ts

@@ -86,5 +86,5 @@ declare class AxisBuilder {
 interface AxisElementsBuilder {
     (opt: AxisBuilderCfg, axisModel: AxisBaseModel, group: graphic.Group, transformGroup: graphic.Group): void;
 }
-declare const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBuilder>;
+declare const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName' | 'axisBackground', AxisElementsBuilder>;
 export default AxisBuilder;

package/types/src/component/axis/CartesianAxisView.d.ts

@@ -12,7 +12,8 @@ declare class CartesianAxisView extends AxisView {
      * @override
      */
     render(axisModel: CartesianAxisModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload): void;
-    remove(): void;
+    remove(ecModel: GlobalModel, api: ExtensionAPI): void;
+    dispose(ecModel: GlobalModel, api: ExtensionAPI): void;
 }
 export declare class CartesianXAxisView extends CartesianAxisView {
     static type: string;

package/types/src/component/axis/globalListener.d.ts

@@ -0,0 +1,14 @@
+import ExtensionAPI from '../../core/ExtensionAPI.js';
+import { ZRElementEvent } from '../../util/types.js';
+declare type DispatchActionMethod = ExtensionAPI['dispatchAction'];
+export declare type Handler = (currTrigger: 'mouseup' | 'mousemove' | 'leave' | 'mousewheel' | 'mousedown', event: ZRElementEvent, dispatchAction: DispatchActionMethod) => void;
+/**
+ * @param {string} key
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Function} handler
+ *      param: {string} currTrigger
+ *      param: {Array.<number>} point
+ */
+export declare function register(key: string, api: ExtensionAPI, handler?: Handler): void;
+export declare function unregister(key: string, api: ExtensionAPI): void;
+export {};

package/types/src/coord/axisCommonTypes.d.ts

@@ -34,6 +34,7 @@ export interface AxisBaseOptionCommon extends ComponentOption, AnimationOptionMi
     splitLine?: SplitLineOption;
     minorSplitLine?: MinorSplitLineOption;
     splitArea?: SplitAreaOption;
+    axisBackground?: AxisBackgroundOption;
     /**
      * Min value of the axis. can be:
      * + ScaleDataValue
@@ -189,6 +190,10 @@ interface MinorSplitLineOption {
     show?: boolean;
     lineStyle?: LineStyleOption;
 }
+interface AxisBackgroundOption {
+    show?: boolean;
+    backStyle?: AreaStyleOption<ZRColor>;
+}
 interface SplitAreaOption {
     show?: boolean;
     interval?: 'auto' | number | ((index: number, value: string) => boolean);