You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/05/13 04:55:10 UTC
[incubator-echarts] 02/02: tweak examples and comments
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 502aee669c2ac8c9c2e5db0a01dfcd5c9fbb686d
Author: sushuang <su...@gmail.com>
AuthorDate: Sun May 12 13:39:59 2019 +0800
tweak examples and comments
---
src/component/tooltip/TooltipContent.js | 8 +
test/css-transform.html | 394 +++++++++++++++++---------------
test/lib/facePrint.js | 2 +
3 files changed, 223 insertions(+), 181 deletions(-)
diff --git a/src/component/tooltip/TooltipContent.js b/src/component/tooltip/TooltipContent.js
index 1890a45..40277e3 100644
--- a/src/component/tooltip/TooltipContent.js
+++ b/src/component/tooltip/TooltipContent.js
@@ -149,6 +149,10 @@ function TooltipContent(container, api) {
*/
this._hideTimeout;
+ // FIXME
+ // Is it needed to trigger zr event manually if
+ // the browser do not support `pointer-events: none`.
+
var self = this;
el.onmouseenter = function () {
// clear the timeout in hideLater and keep showing tooltip
@@ -161,6 +165,10 @@ function TooltipContent(container, api) {
el.onmousemove = function (e) {
e = e || window.event;
if (!self._enterable) {
+ // `pointer-events: none` is set to tooltip content div
+ // if `enterable` is set as `false`, and `el.onmousemove`
+ // can not be triggered. But in browser that do not
+ // support `pointer-events`, we need to do this:
// Try trigger zrender event to avoid mouse
// in and out shape too frequently
var handler = zr.handler;
diff --git a/test/css-transform.html b/test/css-transform.html
index afc226d..51eade2 100644
--- a/test/css-transform.html
+++ b/test/css-transform.html
@@ -27,13 +27,21 @@ under the License.
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="lib/reset.css">
+ <!-- <link rel="stylesheet" href="lib/reset.css"> -->
</head>
<body>
<style>
+ * {
+ /* Test tooltip trigger */
+ pointer-events: auto !important;
+ }
+ html {
+ position: static;
+
+ }
body {
- position: relative;
- min-height: 1500px;
+ position: static;
+ background: #ffe;
}
.chart {
position: relative;
@@ -42,108 +50,184 @@ under the License.
border: 10px solid rgba(0,0,0,0.5);
margin: 30px auto 30px auto;
}
+ .try-box {
+ position: relative;
+ background: green;
+ padding: 0;
+ border-width: 0;
+ line-height: 1;
+ text-align: center;
+ font-size: 12px;
+ color: yellow;
+ /* box-sizing: content-box; */
+ }
+ .try-box-check {
+ position: absolute;
+ background: grey;
+ padding: 0;
+ border-width: 0;
+ line-height: 1;
+ text-align: center;
+ font-size: 12px;
+ }
+ .try-coord-marker {
+ position: absolute;
+ background: red;
+ width: 0; height: 0;
+ /* width: 5px; height: 5px; */
+ }
+ .pointer-marker {
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ margin: -3px 0 0 -3px;
+ padding: 0;
+ background: orange;
+ }
</style>
- <h3>Check whether tooltip behave correctly (in mouse position calculation).</h3>
- <h3>Supported browser when using transfrom:</h3>
- <ul>
- <li>PC: Chrome, FireFox, IE6+, Edge, Safari, Opera</li>
- <li>Mobild: Andriod (?)</li>
- </ul>
- <h3>Unsupported browser when using transfrom:</h3>
- <ul>
- <li>Mobild: IOS</li>
- </ul>
-
- <div class="chart" id="main0"
+ <div
style="
- -webkit-transform: scale(0.5, 0.5) rotate(15deg);
- transform: scale(0.5, 0.5) rotate(15deg);
- ">
+ position: fixed; left: 10px; bottom: 10px; color: red; padding: 2px;
+ font-size: 20px; border: 1px solid red; background: #fff; z-index: 999">
+ Also need test pinch
</div>
- <div style="perspective: 171px;">
- <div class="chart" id="main1"
+
+
+
+ <div id="allCharts" style="margin: 30px;">
+
+ <div data-ec-title="css transform 2d" class="chart" id="main0"
style="
- -webkit-transform: rotateY(18deg) rotateX(8deg);
- transform: rotateY(18deg) rotateX(8deg);
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
+ transform: scale(0.5, 0.5) rotate(15deg);
">
</div>
- </div>
+ <div data-ec-title="css transform 3d" style="perspective: 171px;">
+ <div class="chart" id="main1"
+ style="
+ transform: translate(100px) rotateY(18deg) rotateX(12deg);
+ transform-style: preserve-3d;
+ ">
+ </div>
+ </div>
+ <div style="height: 300px;width: 10px;"></div>
+ <div style="
+ transform: scale(0.7, 0.7) rotate(75deg);
+ ">
+ <div style="perspective: 271px;">
+ <div data-ec-title="nested transform" class="chart" id="main2"
+ style="
+ transform: scale3d(1, -1.5, 1) rotateY(-28deg) rotateZ(-32deg);
+ transform-style: preserve-3d;
+ ">
+ </div>
+ </div>
+ </div>
+ <div style="height: 400px;width: 10px;"></div>
+
+ <div style="
+ perspective: 231px;
+ ">
+ <canvas data-ec-title="Not support iOS (pre-create a canvas)" class="chart" id="main3"
+ style="
+ transform: translateX(140px) rotateX(28deg) rotateZ(12deg);
+ transform-style: preserve-3d;
+ ">
+ </canvas>
+ </div>
+
+ </idv>
- <script>
- require([
- 'echarts'
- // 'echarts/chart/line',
- // 'echarts/component/legend',
- // 'echarts/component/grid',
- // 'echarts/component/tooltip',
- // 'echarts/component/dataZoomInside'
- ], function (echarts) {
-
- var el = document.getElementById('main0');
- if (!el) {
- return;
- }
- var chart = echarts.init(el);
+
+
+
+
+ <script>
+ function $createOption(title) {
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
+ var bigTooltipBound = 10;
- for (var i = 0; i < 100; i++) {
+ for (var i = 0; i < 50; i++) {
xAxisData.push('类目' + i);
- if (i < 5 && i > 1) {
- data1.push(0);
- }
- else {
- data1.push(+(Math.random() + 0.5).toFixed(3));
- }
+ data1.push(+(Math.random() + 0.5).toFixed(3));
data2.push(+(Math.random() + 0.5).toFixed(3));
data3.push(+(Math.random() + 0.5).toFixed(3));
}
+ function getSymbolSize(value, param) {
+ if (param.dataIndex <= bigTooltipBound) {
+ return 30;
+ }
+ return 10;
+ }
+
var itemStyle = {
normal: {
borderColor: 'white',
borderWidth: 3,
- // shadowBlur: 10,
- // shadowOffsetX: 0,
- // shadowOffsetY: 5,
- // shadowColor: 'rgba(0, 0, 0, 0.4)',
lineStyle: {
width: 1
- // shadowBlur: 10,
- // shadowOffsetX: 0,
- // shadowOffsetY: 5,
- // shadowColor: 'rgba(0, 0, 0, 0.4)'
}
}
};
- chart.setOption({
+ return {
+ backgroundColor: '#eee',
+ title: {
+ text: title || ''
+ },
legend: {
- data: ['line', 'line2', 'line3']
+ data: ['line', 'line2', 'line3'],
+ itemWidth: 50,
+ itemHeight: 40,
+ right: 50,
+ bottom: 0
},
visualMap: null, // 用于测试 option 中含有null的情况。
tooltip: {
trigger: 'axis',
+ // set enterable as false to check coord of event triggered by tooltip.
+ enterable: false,
axisPointer: {
- type: 'line'
+ type: 'cross'
+ },
+ formatter: function () {
+ return [
+ '<div>',
+ 'Move inside the tooltip<br>',
+ 'The original interactions of<br>',
+ 'the chart under the tooltip <br>',
+ 'should be normally triggered.<br>',
+ 'That means the coord of <br>',
+ 'the event <br>',
+ 'triggered by tooltip<br>',
+ 'is correct<br>',
+ '----<br>',
+ '----<br>',
+ '</div>'
+ ].join('');
+ },
+ position: function (point, params, dom, rect, size) {
+ var viewSize = size.viewSize;
+ var contentSize = size.contentSize;
+ return [
+ viewSize[0] - contentSize[0],
+ viewSize[1] - contentSize[1],
+ ];
}
},
xAxis: {
- // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
boundaryGap: false,
- // inverse: true,
splitArea: {
show: false
},
@@ -153,7 +237,8 @@ under the License.
},
grid: {
left: '10%',
- right: '10%'
+ right: 2,
+ bottom: 80
},
yAxis: {
splitArea: {
@@ -165,14 +250,12 @@ under the License.
start: 10,
end: 30
},
- // animation: false,
- series: [null, // 用于测试 option 中含有null的情况。
- {
+ series: [{
name: 'line',
type: 'line',
stack: 'all',
symbol: 'circle',
- symbolSize: 10,
+ symbolSize: getSymbolSize,
data: data1,
itemStyle: itemStyle,
step: 'end'
@@ -181,7 +264,7 @@ under the License.
type: 'line',
stack: 'all',
symbol: 'circle',
- symbolSize: 10,
+ symbolSize: getSymbolSize,
data: data2,
itemStyle: itemStyle,
step: 'end'
@@ -190,140 +273,89 @@ under the License.
type: 'line',
stack: 'all',
symbol: 'triangle',
- symbolSize: 10,
+ symbolSize: getSymbolSize,
data: data3,
itemStyle: itemStyle,
step: 'end'
}]
- });
- });
+ };
+ }
</script>
+ <script>
+ initCharts();
- <script>
- require([
- 'echarts'
- // 'echarts/chart/line',
- // 'echarts/component/legend',
- // 'echarts/component/grid',
- // 'echarts/component/tooltip',
- // 'echarts/component/dataZoomInside'
- ], function (echarts) {
-
- var el = document.getElementById('main1');
- if (!el) {
- return;
- }
- var chart = echarts.init(el);
+ function initCharts() {
+ var allCharts = document.getElementById('allCharts');
+ allCharts.style.display = 'block';
- var xAxisData = [];
- var data1 = [];
- var data2 = [];
- var data3 = [];
+ function addEventListener(chart) {
+ chart.getZr().on('click', function (e) {
+ console.log('zr e.offsetX e.offsetY', e.offsetX, e.offsetY);
+ facePrint({'zr-e-offsetX': e.offsetX, 'zr-e-offsetY': e.offsetY});
+ });
+ }
- for (var i = 0; i < 100; i++) {
- xAxisData.push('类目' + i);
- if (i < 5 && i > 1) {
- data1.push(0);
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var el = document.getElementById('main0');
+ if (!el) {
+ return;
}
- else {
- data1.push(+(Math.random() + 0.5).toFixed(3));
+ var chart = echarts.init(el);
+ addEventListener(chart);
+ chart.setOption($createOption(el.getAttribute('data-ec-title')));
+ });
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var el = document.getElementById('main1');
+ if (!el) {
+ return;
}
- data2.push(+(Math.random() + 0.5).toFixed(3));
- data3.push(+(Math.random() + 0.5).toFixed(3));
- }
+ var chart = echarts.init(el, null, {
+ });
+ addEventListener(chart);
+ chart.setOption($createOption(el.getAttribute('data-ec-title')));
+ });
- var itemStyle = {
- normal: {
- borderColor: 'white',
- borderWidth: 3,
- // shadowBlur: 10,
- // shadowOffsetX: 0,
- // shadowOffsetY: 5,
- // shadowColor: 'rgba(0, 0, 0, 0.4)',
- lineStyle: {
- width: 1
- // shadowBlur: 10,
- // shadowOffsetX: 0,
- // shadowOffsetY: 5,
- // shadowColor: 'rgba(0, 0, 0, 0.4)'
- }
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var el = document.getElementById('main2');
+ if (!el) {
+ return;
}
- };
+ var chart = echarts.init(el, null, {
+ });
+ addEventListener(chart);
+ chart.setOption($createOption(el.getAttribute('data-ec-title')));
+ });
- chart.setOption({
- legend: {
- data: ['line', 'line2', 'line3']
- },
- visualMap: null, // 用于测试 option 中含有null的情况。
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'line'
- }
- },
- xAxis: {
- // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
- data: xAxisData,
- boundaryGap: false,
- // inverse: true,
- splitArea: {
- show: false
- },
- splitLine: {
- show: false
- }
- },
- grid: {
- left: '10%',
- right: '10%'
- },
- yAxis: {
- splitArea: {
- show: true
- }
- },
- dataZoom: {
- type: 'inside',
- start: 10,
- end: 30
- },
- // animation: false,
- series: [null, // 用于测试 option 中含有null的情况。
- {
- name: 'line',
- type: 'line',
- stack: 'all',
- symbol: 'circle',
- symbolSize: 10,
- data: data1,
- itemStyle: itemStyle,
- step: 'end'
- }, {
- name: 'line2',
- type: 'line',
- stack: 'all',
- symbol: 'circle',
- symbolSize: 10,
- data: data2,
- itemStyle: itemStyle,
- step: 'end'
- }, {
- name: 'line3',
- type: 'line',
- stack: 'all',
- symbol: 'triangle',
- symbolSize: 10,
- data: data3,
- itemStyle: itemStyle,
- step: 'end'
- }]
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var canvasEl = document.getElementById('main3');
+ if (!canvasEl) {
+ return;
+ }
+ var chart = echarts.init(canvasEl, null, {
+ devicePixelRatio: 2,
+ // FIXME: weird
+ width: canvasEl.offsetWidth,
+ height: canvasEl.offsetHeight
+ });
+ addEventListener(chart);
+ chart.setOption($createOption(canvasEl.getAttribute('data-ec-title')));
});
- });
+ }
+
</script>
diff --git a/test/lib/facePrint.js b/test/lib/facePrint.js
index 7ba05f6..e75ad9c 100644
--- a/test/lib/facePrint.js
+++ b/test/lib/facePrint.js
@@ -58,9 +58,11 @@
window.facePrint.objToStr = function (obj) {
var msgArr = [];
+ /* eslint-disable */
for (var key in obj) {
msgArr.push(key + '=' + obj[key]);
}
+ /* eslint-enable */
return msgArr.join(', ');
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org