timeline onClick事件点击无打印输出

wuhan2020 · Jan 2, 2025 · f0f9cf7 · f0f9cf7
1 parent 1d01856
commit f0f9cf7
Showing 1 changed file with 99 additions and 25 deletions.
diff --git a/source/page/Map/component/EChartsMap.tsx b/source/page/Map/component/EChartsMap.tsx
@@ -1,14 +1,16 @@
 import 'echarts-jsx/dist/renderers/SVG';
 import 'echarts-jsx/dist/components/geo';
+import 'echarts-jsx/dist/components/timeline';
 
 import { DataObject } from 'dom-renderer';
 import { EChartsOption, EChartsType, init, registerMap } from 'echarts';
-import { observable } from 'mobx';
+import { observable , runInAction} from 'mobx';
 import { attribute, component, observer,WebCell } from 'web-cell';
 import { formatDate } from 'web-utility';
 
 import { getHistory, Province } from '../../../service/Epidemic';
 import { long2short } from '../adapter';
+import { json } from 'stream/consumers';
 
 export interface EChartsMapProps {
     /**
@@ -53,10 +55,15 @@ export class EChartsMap
     @attribute
     @observable
     accessor mapName = 'map';
+
+    @attribute
+    @observable
+    accessor hovered = '';
 
     @observable
     accessor chartOptions: EChartsOption = {};
 
+
     chart: EChartsType;
 
     mountedCallback() {
@@ -67,11 +74,11 @@ export class EChartsMap
         this.listen();
         this.loadData();
 
-        self.addEventListener('resize', () => {
-            this.chart.resize();
+        // self.addEventListener('resize', () => {
+        //     this.chart.resize();
 
-            this.adjustLabel();
-        });
+        //     this.adjustLabel();
+        // });
     }
 
     adjustLabel() {
@@ -84,56 +91,121 @@ export class EChartsMap
         // implement hover-then-click on mobile devices
         let hovered = '';
 
+
+
         chart
             .on('mouseover', 'series', ({ name }) => {
+                console.log('mouseover-event');
                 // prevent click event to trigger immediately
                 setTimeout(() => (hovered = name));
             })
             .on('mouseout', 'series', () => {
+                console.log('mouseout-event');
+
                 hovered = '';
             })
             .on('click', 'series', params => {
+                console.log('click-seriesevent');
                 if (hovered) {
                     this.emit('seriesclick', params);
                     hovered = '';
                 }
             })
-            .on('click', 'timeline', ({ dataIndex }) => {
-                const formattedDate = formatDate(dataIndex, 'YYYY-MM-DD');
-                chart.dispatchAction({
-                    type: 'timelineChange',
-                    // index of time point
-                    currentIndex: data.findIndex(d => d === dataIndex)
-                });
-                getHistory(formattedDate).then(this.updateChartData);
-            });
+            // .on('click', 'timeline', ({ dataIndex }) => {
+            //     console.log('click-timelineevent');
+            //     const formattedDate = formatDate(dataIndex, 'YYYY-MM-DD');
+            //     chart.dispatchAction({
+            //         type: 'timelineChange',
+            //         // index of time point
+            //         currentIndex: data.findIndex(d => d === dataIndex)
+            //     });
+            //     getHistory(formattedDate).then(this.updateChartData);
+            // });
     }
+
+    // handleSeriesClick = (event: any) => {
+    //     console.log('Series Click Event:', event);
+    //     // 使用原生 ECharts 事件对象
+    //     const params = event.detail || event;
+    //     console.log('Click params:', params);
+
+    //     if (this.hovered) {
+    //         this.props.onSeriesClick?.(new CustomEvent('seriesclick', { 
+    //             detail: params 
+    //         }));
+    //         this.hovered = '';
+    //     }
+    // };
+
+    // handleMouseOver = (event: any) => {
+    //     console.log('handleMouseOver Event:', event);
+    //     const eventDetail = event.detail;
+    //     if (eventDetail?.componentType === 'series') {
+    //         const name = eventDetail.name;
+    //         if (name) {
+    //             setTimeout(() => {
+    //                 this.hovered = name;
+    //             });
+    //         }
+    //     }
+    // };
+
+
+
+    handleTimelineClick = (event: any) => {
+        console.log('Timeline Click Event:', event);
+
+        // const eventDetail = event.detail;
+        // if (eventDetail?.componentType === 'timeline') {
+        //     const dataIndex = eventDetail.dataIndex;
+        //     const { data } = this.chartOptions.baseOption.timeline;
+
+        //     const formattedDate = formatDate(dataIndex, 'YYYY-MM-DD');
+        //     getHistory(formattedDate).then(this.updateChartData);
+        // }
+    };
+
+
 
     async loadData() {
-        const { chart, mapUrl, mapName } = this;
+        const { chart, mapUrl, mapName,chartOptions } = this;
 
         chart.showLoading();
 
         const data = await (await fetch(mapUrl)).json();
-
+        console.log('data',data)
+        console.log('chartOptions',chartOptions)
         for (const { properties } of data.features)
             properties.name = long2short(properties.name);
-
+        
         registerMap(mapName, data);
-
         this.adjustLabel();
         chart.hideLoading();
+        this.emit('chartlabeladjust');
+
     }
     render() {
         const options = this.chartOptions;
-
+        console.log('xuanran',options)
+        const timelineData = options.baseOption?.timeline?.data || [];
+        console.log('timelineData',timelineData)
         return (
-            <ec-svg-renderer>
-                <ec-geo
-                    map={this.mapName}
-                    data={options.options[0].series[0]?.data}
-                />
-            </ec-svg-renderer>
+            <>
+                <ec-svg-renderer>
+                    <ec-geo
+                        map={this.mapName}
+                        data={options.options[0].series[0]?.data}
+                    //     onClick={this.handleSeriesClick}
+                    // onMouseover={this.handleMouseOver}
+                    // onMouseout={() => this.hovered = ''}
+                    />
+
+                <ec-timeline data={timelineData}
+                onClick={this.handleTimelineClick}
+                />    
+
+                </ec-svg-renderer>
+            </>
         );
     }
     updateChartData = (newData: Province[]) =>
@@ -147,4 +219,6 @@ export class EChartsMap
                 }
             ]
         });
+
+
 }