Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
* 'master' of https://github.com/apache/incubator-echarts:
  fix: last axis label duplicated, fix #10304
  feat: support backgroundColor for connected charts in toolbox toolbox.feature.saveAsImage.connectedBackgroundColor can be used to set the background color. Fix #10099
  fix: set default position to be bottom
  test: add test case for b3a2548 #10202
  feat: support tooltip for toolbox #10202
  test: update test example
  feat: add toolbox text style support
  • Loading branch information
100pah committed Apr 21, 2019
2 parents 466ccf3 + 46a8951 commit 76ce0ed
Show file tree
Hide file tree
Showing 8 changed files with 498 additions and 6 deletions.
6 changes: 5 additions & 1 deletion src/component/toolbox/ToolboxModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,14 @@ var ToolboxModel = echarts.extendComponentModel({
iconStyle: {
borderColor: '#3E98C5'
}
}
},
// textStyle: {},

// feature

tooltip: {
show: false
}
}
});

Expand Down
30 changes: 26 additions & 4 deletions src/component/toolbox/ToolboxView.js
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,24 @@ export default echarts.extendComponentView({
path.setStyle(iconStyleModel.getItemStyle());
path.hoverStyle = iconStyleEmphasisModel.getItemStyle();

var tooltipModel = toolboxModel.getModel('tooltip');
if (tooltipModel && tooltipModel.get('show')) {
path.attr('tooltip', zrUtil.extend({
content: titles[iconName],
formatter: tooltipModel.get('formatter', true)
|| function () {
return titles[iconName];
},
formatterParams: {
componentType: 'toolbox',
name: iconName,
title: titles[iconName],
$vars: ['name', 'title']
},
position: tooltipModel.get('position', true) || 'bottom'
}, tooltipModel.option));
}

graphic.setHoverStyle(path);

if (toolboxModel.get('showTitle')) {
Expand All @@ -166,14 +184,18 @@ export default echarts.extendComponentView({
var hoverStyle = iconStyleEmphasisModel.getItemStyle();
path.setStyle({
text: titles[iconName],
textPosition: hoverStyle.textPosition || 'bottom',
textFill: hoverStyle.fill || hoverStyle.stroke || '#000',
textAlign: hoverStyle.textAlign || 'center'
textPosition: iconStyleEmphasisModel.get('textPosition') || 'bottom',
textFill: iconStyleEmphasisModel.get('textFill') || hoverStyle.fill || hoverStyle.stroke || '#000',
textAlign: iconStyleEmphasisModel.get('textAlign') || 'center',
textBackgroundColor: iconStyleEmphasisModel.get('textBackgroundColor'),
textBorderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
textPadding: iconStyleEmphasisModel.get('textPadding')
});
})
.on('mouseout', function () {
path.setStyle({
textFill: null
textFill: null,
textBackgroundColor: null
});
});
}
Expand Down
2 changes: 2 additions & 0 deletions src/component/toolbox/feature/SaveAsImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ SaveAsImage.defaultOption = {
type: 'png',
// Default use option.backgroundColor
// backgroundColor: '#fff',
connectedBackgroundColor: '#fff',
name: '',
excludeComponents: ['toolbox'],
pixelRatio: 1,
Expand All @@ -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')
});
Expand Down
2 changes: 1 addition & 1 deletion src/coord/axisTickLabelBuilder.js
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
addItem(tickValue);
}

if (includeMaxLabel && tickValue !== ordinalExtent[1]) {
if (includeMaxLabel && tickValue - step !== ordinalExtent[1]) {
addItem(ordinalExtent[1]);
}

Expand Down
15 changes: 15 additions & 0 deletions src/echarts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
168 changes: 168 additions & 0 deletions test/toolbox-saveImage-background.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!--
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;
}

#chart1, #chart2 {
background: #fff;
margin-bottom: 20px;
width: 80%;
height: 100%;
}
</style>

<p>The background of the exported png using toolbox should be yellow.</p>

<div id="chart1"></div>
<div id="chart2"></div>
<script>

require([
'echarts'
// 'echarts/chart/bar',
// 'echarts/component/polar',
// 'zrender/vml/vml'
], function (echarts) {
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

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>
Loading

0 comments on commit 76ce0ed

Please sign in to comment.