From b6ab21159617b45c8077d998d468977cdd87d146 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Wed, 3 Apr 2019 15:10:06 +0800 Subject: [PATCH] feat: support backgroundColor for connected charts in toolbox toolbox.feature.saveAsImage.connectedBackgroundColor can be used to set the background color. Fix #10099 --- src/component/toolbox/feature/SaveAsImage.js | 2 + src/echarts.js | 15 ++ test/toolbox-saveImage-background.html | 168 +++++++++++++++++++ 3 files changed, 185 insertions(+) create mode 100644 test/toolbox-saveImage-background.html diff --git a/src/component/toolbox/feature/SaveAsImage.js b/src/component/toolbox/feature/SaveAsImage.js index 0b18aab6f..d81a06df6 100644 --- a/src/component/toolbox/feature/SaveAsImage.js +++ b/src/component/toolbox/feature/SaveAsImage.js @@ -36,6 +36,7 @@ SaveAsImage.defaultOption = { type: 'png', // Default use option.backgroundColor // backgroundColor: '#fff', + connectedBackgroundColor: '#fff', name: '', excludeComponents: ['toolbox'], pixelRatio: 1, @@ -54,6 +55,7 @@ proto.onclick = function (ecModel, api) { type: type, backgroundColor: model.get('backgroundColor', true) || ecModel.get('backgroundColor') || '#fff', + connectedBackgroundColor: model.get('connectedBackgroundColor'), excludeComponents: model.get('excludeComponents'), pixelRatio: model.get('pixelRatio') }); diff --git a/src/echarts.js b/src/echarts.js index 0ba60fc84..035b454a5 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -567,6 +567,21 @@ echartsProto.getConnectedDataURL = function (opts) { targetCanvas.height = height; var zr = zrender.init(targetCanvas); + // Background between the charts + if (opts.connectedBackgroundColor) { + zr.add(new graphic.Rect({ + shape: { + x: 0, + y: 0, + width: width, + height: height + }, + style: { + fill: opts.connectedBackgroundColor + } + })); + } + each(canvasList, function (item) { var img = new graphic.Image({ style: { diff --git a/test/toolbox-saveImage-background.html b/test/toolbox-saveImage-background.html new file mode 100644 index 000000000..a8701d70d --- /dev/null +++ b/test/toolbox-saveImage-background.html @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + +

The background of the exported png using toolbox should be yellow.

+ +
+
+ + + + \ No newline at end of file -- GitLab