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:06 UTC
[incubator-echarts] branch fix-11781 created (now d0910a7)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-11781
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at d0910a7 feat(svg): support exporting svg with connected charts
This branch includes the following new commits:
new 154b36f fix(svg): download svg image with toolbox
new d0910a7 feat(svg): support exporting svg with connected charts
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/02: fix(svg): download svg image with toolbox
Posted by ov...@apache.org.
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 154b36f70933ef2ff82e52288756698658fc9369
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Feb 12 15:52:31 2020 +0800
fix(svg): download svg image with toolbox
---
src/component/toolbox/feature/SaveAsImage.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/component/toolbox/feature/SaveAsImage.js b/src/component/toolbox/feature/SaveAsImage.js
index d81a06d..cde8a0a 100644
--- a/src/component/toolbox/feature/SaveAsImage.js
+++ b/src/component/toolbox/feature/SaveAsImage.js
@@ -50,7 +50,8 @@ var proto = SaveAsImage.prototype;
proto.onclick = function (ecModel, api) {
var model = this.model;
var title = model.get('name') || ecModel.get('title.0.text') || 'echarts';
- var type = model.get('type', true) || 'png';
+ var isSvg = api.getZr().painter.getType() === 'svg';
+ var type = isSvg ? 'svg' : model.get('type', true) || 'png';
var url = api.getConnectedDataURL({
type: type,
backgroundColor: model.get('backgroundColor', true)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/02: feat(svg): support exporting svg with
connected charts
Posted by ov...@apache.org.
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