feat: 历史曲线组件的图片导出变更为外部导出

packages/extend-components/EC_HistoryView/src/SingleChart.js

@@ -28,7 +28,8 @@ const SingleChart = memo((props) => {
         special,
         predicateData,
         emptyOrError,
-        theme = "Normal"
+        theme = "Normal",
+        exportCanvas
     } = props;
     const chartRef = useRef();
     const timerRef = useRef();
@@ -60,7 +61,7 @@ const SingleChart = memo((props) => {
             config.special.allValDesc = allValDesc;
             return specialTypeChartOptionGenerator({dataSource, config});
         }
-        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData,theme);
+        let _option = optionGenerator(dataSource, null, contrast, contrastOption, smooth, config, lineDataType, predicateData, theme);
         if (emptyOrError.empty || emptyOrError.error) {
             if (isArray(_option.yAxis)) {
                 _option.yAxis.forEach(item => {
@@ -76,6 +77,16 @@ const SingleChart = memo((props) => {
         if (theme === 'BI') _option = patchBIOption(_option, BI);
         return _option;
     }, [dataSource, smooth, curveCenter, chartType, predicateData]);
+    useEffect(() => {
+        if (exportCanvas) {
+            const chart = chartRef.current?.getEchartsInstance?.();
+            let a = document.createElement('a');
+            a.href = chart.getDataURL('image/png');
+            a.download = '曲线图片.png'
+            a.click();
+            a.remove()
+        }
+    }, [exportCanvas]);
     useEffect(() => {
         chartRef.current?.resize?.();
         const chart = chartRef.current?.getEchartsInstance?.();

packages/extend-components/EC_HistoryView/src/index.js

@@ -449,7 +449,8 @@ const HistoryView = (props) => {
         const chartGrid = checkboxData.find((item) => item.key === 'chartGrid')?.checked;
         return [curveCenter, chartGrid];
     }, [checkboxData]);
-
+    // 导出图表canvas
+    const [exportFlag, setExportFlag] = useState(null);
     // 自定义模式: 快速选择
     const onCustomerTimeChange = (key) => {
         setCustomerChecked(key);
@@ -949,6 +950,9 @@ const HistoryView = (props) => {
             ],
         });
     };
+    const exportCanvas = () => {
+        setExportFlag(Math.random());
+    };
     const handleTableData = useCallback(
         (data) => {
             // eslint-disable-next-line no-param-reassign
@@ -1391,6 +1395,7 @@ const HistoryView = (props) => {
                             />
                         ) : (
                             <SingleChart
+                                exportCanvas={exportFlag}
                                 emptyOrError={emptyOrError.current}
                                 dateRange={dateRange}
                                 showBoxOption={showBoxOption}
@@ -1597,6 +1602,14 @@ const HistoryView = (props) => {
                                             </Button>
                                         </>
                                     )}
+                                    {activeTabKey === 'curve' && (
+                                        <>
+                                            <Button type="link" onClick={exportCanvas}>
+                                                <DownloadOutlined/>
+                                                下载
+                                            </Button>
+                                        </>
+                                    )}
                                 </div>
                             ),
                         }}

packages/extend-components/EC_HistoryView/src/utils.js

@@ -1206,17 +1206,7 @@ const optionGenerator = (
         series,
         tooltip,
         visualMap,
-        ...restOption,
-        toolbox: {
-            top:-5,
-            left: 80,
-            feature: {
-                dataZoom: {
-                    yAxisIndex: 'none'
-                },
-                saveAsImage: {}
-            }
-        }
+        ...restOption
     };
     return _options;
 };