You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/02/13 02:45:08 UTC
[incubator-echarts] 02/02: feat(svg): support exporting svg with
connected charts
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 <zw...@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-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org