添加官方解决echart多图联动axisPoiner显示问题方法

JCCDex · Mar 28, 2019 · a7aa0e0 · a7aa0e0
1 parent abfa267
commit a7aa0e0
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/src/js/linkageCharts.js b/src/js/linkageCharts.js
@@ -7,9 +7,41 @@ import 'echarts/lib/component/dataZoom';
 export const linkageVolume = (candle, volume) => {
     if (candle && volume) {
         echarts.connect([candle, volume]);
+        // bindAction([candle, volume]);
     }
 };
 
 export const linkageMacd = (candle, macd) => {
     echarts.connect([candle, macd]);
+};
+export const bindAction = (chartList) => { //echart多图联动后，axisPoiner显示label的问题(会出现跳线的现象)
+    echarts.util.each(chartList, function (fromChart) {
+        echarts.util.each(chartList, function (toChart) {
+            if (fromChart === toChart) {
+                return;
+            }
+            // fromChart.on('updateAxisPointer', function (params) {
+            //     var payload = toChart.makeActionFromEvent(params);
+
+            //     // Remove y info from payload.axesInfo.
+            //     var axesInfo = payload.axesInfo || [];
+            //     for (var i = axesInfo.length - 1; i >= 0; i--) {
+            //         if (axesInfo[i].axisDim === 'y') {
+            //             axesInfo.splice(i, 1);
+            //         }
+            //     }
+
+            //     toChart.dispatchAction(payload, true);
+            // });
+
+            // fromChart.on('dataZoom', function (params) {
+            //     toChart.dispatchAction({
+            //         type: 'dataZoom',
+            //         dataZoomIndex: params.batch[0].dataZoomIndex,
+            //         start: params.batch[0].start,
+            //         end: params.batch[0].end
+            //     }, true);
+            // });
+        });
+    });
 };
diff --git a/test/unit/specs/Chart.spec.js b/test/unit/specs/Chart.spec.js
@@ -362,6 +362,15 @@ describe('test Chart', () => {
     expect(macd.setMACDChart.macd.getOption()).not.toBeNull()
   })
 
+  it('test getMacdTipData', () => {
+    let macd = new ChartController(macdConfig)
+    const element = document.createElement('div');
+    macd.initMACDECharts(element);
+    macd.setMACDOption(macdData);
+    let tipsData = macd.getMacdTipData()
+    expect(tipsData).not.toBeNull()
+  })
+
   it('test getMacdchart', () => {
     let macd = new ChartController(macdConfig)
     const element = document.createElement('div');

diff --git a/test/unit/specs/linkageCharts.spec.js b/test/unit/specs/linkageCharts.spec.js
@@ -1,6 +1,6 @@
 import ChartController from 'js/Charts.js'
 import klineController from 'js/KLine.js'
-import { linkageVolume, linkageMacd } from 'js/linkageCharts'
+import { linkageVolume, linkageMacd, bindAction } from 'js/linkageCharts'
 import testData from '../../testData/testData.json'
 
 let data = testData.candleData
@@ -49,14 +49,13 @@ describe('test linkageCharts', () => {
         kline.initChart(element)
         kline.setOption(data, 'hour')
         let klineChart = kline.getEchart()
-
         let volume = new ChartController(volumeConfig)
         volume.initVolumeChart(element)
         volume.setVolumeOption(data)
         let volumeChart = volume.getVolumeEchart()
-
         linkageVolume(klineChart, volumeChart)
-    })
+        expect(klineChart).not.toBeNull()
+      })
 
     it('test getVolumeEchart if volumeChart is null', () => {
       let kline = new klineController('pc', klineConfig)
@@ -66,8 +65,24 @@ describe('test linkageCharts', () => {
       let klineChart = kline.getEchart()
       let volumeChart = null
       linkageVolume(klineChart, volumeChart)
+      expect(klineChart).not.toBeNull()
+
   })
 
+  it('test bindAction', () => {
+    let kline = new klineController('pc', klineConfig)
+    const element = document.createElement('div');
+    kline.initChart(element)
+    kline.setOption(data, 'hour')
+    let klineChart = kline.getEchart()
+    let volume = new ChartController(volumeConfig)
+    volume.initVolumeChart(element)
+    volume.setVolumeOption(data)
+    let volumeChart = volume.getVolumeEchart()
+    bindAction(klineChart, volumeChart)
+    expect(klineChart).not.toBeNull()
+})
+
 
   it('test linkageMacd', () => {
     let kline = new klineController('pc', klineConfig)