This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-11781 in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit d0910a7c0b2c76f3fbccf5361f337d3b5f115eb8 Author: Ovilia <zwl.s...@gmail.com> AuthorDate: Thu Feb 13 10:42:04 2020 +0800 feat(svg): support exporting svg with connected charts --- src/echarts.js | 86 +++++++----- test/toolbox-saveImage-background-svg.html | 208 +++++++++++++++++++++++++++++ 2 files changed, 263 insertions(+), 31 deletions(-) diff --git a/src/echarts.js b/src/echarts.js index 36a29cf..c53d8e2 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -550,6 +550,7 @@ echartsProto.getConnectedDataURL = function (opts) { if (!env.canvasSupported) { return; } + var isSvg = opts.type === 'svg'; var groupId = this.group; var mathMin = Math.min; var mathMax = Math.max; @@ -564,9 +565,9 @@ echartsProto.getConnectedDataURL = function (opts) { zrUtil.each(instances, function (chart, id) { if (chart.group === groupId) { - var canvas = chart.getRenderedCanvas( - zrUtil.clone(opts) - ); + var canvas = isSvg + ? chart.getZr().painter.getSvgDom().innerHTML + : chart.getRenderedCanvas(zrUtil.clone(opts)); var boundingRect = chart.getDom().getBoundingClientRect(); left = mathMin(boundingRect.left, left); top = mathMin(boundingRect.top, top); @@ -587,38 +588,61 @@ echartsProto.getConnectedDataURL = function (opts) { var width = right - left; var height = bottom - top; var targetCanvas = zrUtil.createCanvas(); - targetCanvas.width = width; - 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 - } - })); + var zr = zrender.init(targetCanvas, { + renderer: isSvg ? 'svg' : 'canvas' + }); + zr.resize({ + width: width, + height: height + }); + + if (isSvg) { + var content = ''; + each(canvasList, function (item) { + var x = item.left - left; + var y = item.top - top; + content += '<g transform="translate(' + x + "," + + y + ')">' + item.dom + '</g>'; + }); + zr.painter.getSvgRoot().innerHTML = content; + + if (opts.connectedBackgroundColor) { + zr.painter.setBackgroundColor(opts.connectedBackgroundColor); + } + + zr.refreshImmediately(); + return zr.painter.pathToDataUrl(); } + else { + // 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: { - x: item.left * dpr - left, - y: item.top * dpr - top, - image: item.dom - } + each(canvasList, function (item) { + var img = new graphic.Image({ + style: { + x: item.left * dpr - left, + y: item.top * dpr - top, + image: item.dom + } + }); + zr.add(img); }); - zr.add(img); - }); - zr.refreshImmediately(); - return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png')); + zr.refreshImmediately(); + return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png')); + } } else { return this.getDataURL(opts); diff --git a/test/toolbox-saveImage-background-svg.html b/test/toolbox-saveImage-background-svg.html new file mode 100644 index 0000000..beeddf2 --- /dev/null +++ b/test/toolbox-saveImage-background-svg.html @@ -0,0 +1,208 @@ +<!-- +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. +--> + +<html> + +<head> + <meta charset="utf-8"> + <script src="lib/esl.js"></script> + <script src="lib/config.js"></script> + <meta name="viewport" content="width=device-width", initial-scale="1" /> +</head> + +<body> + <style> + html, + body { + width: 80%; + height: 100%; + margin: 0; + } + + .chart { + background: #fff; + margin-bottom: 20px; + width: 80%; + height: 200px; + } + </style> + + <p>SVG charts should export svg images without extra setting.</p> + + <div id="chart0" class="chart"></div> + + <p>The background of the exported png using toolbox should be yellow.</p> + + <div id="chart1" class="chart"></div> + <div id="chart2" class="chart"></div> + + <script> + require([ + 'echarts' + ], function (echarts) { + var chart0 = echarts.init(document.getElementById('chart0'), null, { + renderer: 'svg' + }); + option = { + backgroundColor: '#aff', + toolbox: { + feature: { + saveAsImage: { + show: true, + title: 'Save as image' + } + }, + show: true, + itemGap: 1, + top: 20, + right: 35 + }, + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + }, + yAxis: { + type: 'value' + }, + series: [{ + data: [820, 932, 901, 934, 1290, 1330, 1320], + type: 'line' + }] + }; + chart0.setOption(option); + }); + + require([ + 'echarts' + ], function (echarts) { + var chart1 = echarts.init(document.getElementById('chart1'), null, { + renderer: 'svg' + }); + var chart2 = echarts.init(document.getElementById('chart2'), null, { + renderer: 'svg' + }); + + var data1 = []; + + var symbolCount = 6; + + for (var i = 0; i < 100; i++) { + data1.push([ + Math.random() * 5, + Math.random() * 4, + Math.random() * 20, + Math.round(Math.random() * (symbolCount - 1)) + ]); + } + + chart1.setOption({ + backgroundColor: 'red', + toolbox: { + feature: { + saveAsImage: { + show: true, + title: 'Save as image', + type: 'png', + connectedBackgroundColor: 'yellow' + }, + dataZoom: { + yAxisIndex: 'none', + show: true, + title: { + zoom: 'Zoom in', + back: 'Zoom out' + }, + } + }, + show: true, + itemGap: 1, + top: 20, + right: 35 + }, + legend: { + top: 50, + data: ['scatter'] + }, + tooltip: { + formatter: '{c}' + }, + grid: { + top: '26%', + bottom: '26%' + }, + xAxis: { + type: 'value', + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + splitLine: { + show: false + } + }, + series: [{ + name: 'scatter', + type: 'scatter', + symbolSize: 30, + data: data1 + }] + }); + + chart2.setOption({ + backgroundColor: 'green', + legend: { + top: 50, + data: ['scatter'] + }, + tooltip: { + formatter: '{c}' + }, + grid: { + top: '26%', + bottom: '26%' + }, + xAxis: { + type: 'value', + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + splitLine: { + show: false + } + }, + series: [{ + name: 'scatter', + type: 'scatter', + symbolSize: 30, + data: data1 + }] + }); + + echarts.connect([chart1, chart2]); + + }); + </script> +</body> + +</html> \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org