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/06/19 16:30:32 UTC
[incubator-echarts] branch fix/fix-bar-large-click created (now
2fdf69b)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch fix/fix-bar-large-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 2fdf69b Support click and tooltip in bar large mode. Fix #10699
This branch includes the following new commits:
new 2fdf69b Support click and tooltip in bar large mode. Fix #10699
The 1 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/01: Support click and tooltip in bar large
mode. Fix #10699
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/fix-bar-large-click
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 2fdf69b09ca3911f29e93e55dab4c3c8f92c321c
Author: sushuang <su...@gmail.com>
AuthorDate: Thu Jun 20 00:29:39 2019 +0800
Support click and tooltip in bar large mode. Fix #10699
---
src/chart/bar/BarView.js | 63 ++++++++++++++--
src/layout/barGrid.js | 14 +++-
test/bar-large.html | 190 +++++++++++++++++++++++++++++++++++++++++++----
3 files changed, 245 insertions(+), 22 deletions(-)
diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index 1d8eaea..3d9db41 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -25,8 +25,10 @@ import {setLabel} from './helper';
import Model from '../../model/Model';
import barItemStyle from './barItemStyle';
import Path from 'zrender/src/graphic/Path';
+import {throttle} from '../../util/throttle';
var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'barBorderWidth'];
+var _eventPos = [0, 0];
// FIXME
// Just for compatible with ec2.
@@ -349,10 +351,10 @@ var LargePath = Path.extend({
// a whole line or drawing rects.
var points = shape.points;
var startPoint = this.__startPoint;
- var valueIdx = this.__valueIdx;
+ var baseDimIdx = this.__baseDimIdx;
for (var i = 0; i < points.length; i += 2) {
- startPoint[this.__valueIdx] = points[i + valueIdx];
+ startPoint[baseDimIdx] = points[i + baseDimIdx];
ctx.moveTo(startPoint[0], startPoint[1]);
ctx.lineTo(points[i], points[i + 1]);
}
@@ -363,17 +365,68 @@ function createLarge(seriesModel, group, incremental) {
// TODO support polar
var data = seriesModel.getData();
var startPoint = [];
- var valueIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
- startPoint[1 - valueIdx] = data.getLayout('valueAxisStart');
+ var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
+ startPoint[1 - baseDimIdx] = data.getLayout('valueAxisStart');
var el = new LargePath({
shape: {points: data.getLayout('largePoints')},
incremental: !!incremental,
__startPoint: startPoint,
- __valueIdx: valueIdx
+ __baseDimIdx: baseDimIdx,
+ __largeDataIndices: data.getLayout('largeDataIndices'),
+ __barWidth: data.getLayout('barWidth')
});
group.add(el);
setLargeStyle(el, seriesModel, data);
+
+ // Enable tooltip and user mouse/touch event handlers.
+ el.seriesIndex = seriesModel.seriesIndex;
+
+ if (!seriesModel.get('silent')) {
+ el.on('mousedown', largePathUpdateDataIndex);
+ el.on('mousemove', largePathUpdateDataIndex);
+ }
+}
+
+// Use throttle to avoid frequently traverse to find dataIndex.
+var largePathUpdateDataIndex = throttle(function (event) {
+ var largePath = this;
+ var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
+ largePath.dataIndex = dataIndex >= 0 ? dataIndex : null;
+}, 30, false);
+
+function largePathFindDataIndex(largePath, x, y) {
+ var baseDimIdx = largePath.__baseDimIdx;
+ var valueDimIdx = 1 - baseDimIdx;
+ var points = largePath.shape.points;
+ var largeDataIndices = largePath.__largeDataIndices;
+ var barWidthHalf = Math.abs(largePath.__barWidth / 2);
+ var startValueVal = largePath.__startPoint[valueDimIdx];
+
+ _eventPos[0] = x;
+ _eventPos[1] = y;
+ var pointerBaseVal = _eventPos[baseDimIdx];
+ var pointerValueVal = _eventPos[1 - baseDimIdx];
+ var baseLowerBound = pointerBaseVal - barWidthHalf;
+ var baseUpperBound = pointerBaseVal + barWidthHalf;
+
+ for (var i = 0, len = points.length / 2; i < len; i++) {
+ var ii = i * 2;
+ var barBaseVal = points[ii + baseDimIdx];
+ var barValueVal = points[ii + valueDimIdx];
+ if (
+ barBaseVal >= baseLowerBound && barBaseVal <= baseUpperBound
+ && (
+ startValueVal <= barValueVal
+ ? (pointerValueVal >= startValueVal && pointerValueVal <= barValueVal)
+ : (pointerValueVal >= barValueVal && pointerValueVal <= startValueVal)
+ )
+ ) {
+ return largeDataIndices[i];
+ }
+ }
+
+ return -1;
}
function setLargeStyle(el, seriesModel, data) {
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index a2d7976..94d8333 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -390,23 +390,29 @@ export var largeLayout = {
return {progress: progress};
function progress(params, data) {
- var largePoints = new LargeArr(params.count * 2);
+ var count = params.count;
+ var largePoints = new LargeArr(count * 2);
+ var largeDataIndices = new LargeArr(count);
var dataIndex;
var coord = [];
var valuePair = [];
- var offset = 0;
+ var pointsOffset = 0;
+ var idxOffset = 0;
while ((dataIndex = params.next()) != null) {
valuePair[valueDimIdx] = data.get(valueDim, dataIndex);
valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
coord = cartesian.dataToPoint(valuePair, null, coord);
- largePoints[offset++] = coord[0];
- largePoints[offset++] = coord[1];
+ // Data index might not be in order, depends on `progressiveChunkMode`.
+ largePoints[pointsOffset++] = coord[0];
+ largePoints[pointsOffset++] = coord[1];
+ largeDataIndices[idxOffset++] = dataIndex;
}
data.setLayout({
largePoints: largePoints,
+ largeDataIndices: largeDataIndices,
barWidth: barWidth,
valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
valueAxisHorizontal: valueAxisHorizontal
diff --git a/test/bar-large.html b/test/bar-large.html
index eeebb8e..c8c292d 100644
--- a/test/bar-large.html
+++ b/test/bar-large.html
@@ -21,9 +21,13 @@ under the License.
<html>
<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
@@ -36,22 +40,17 @@ under the License.
background: #fff;
}
</style>
- <div id="main"></div>
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+
<script>
require([
'echarts'
- // 'echarts/chart/bar',
- // 'echarts/chart/line',
- // 'echarts/component/legend',
- // 'echarts/component/grid',
- // 'echarts/component/tooltip',
- // 'echarts/component/title',
- // 'echarts/component/toolbox'
], function (echarts) {
- var chart = echarts.init(document.getElementById('main'));
-
var xAxisData = [];
var data1 = [];
var data2 = [];
@@ -68,7 +67,7 @@ under the License.
var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69"," [...]
- chart.setOption({
+ var option = {
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
align: 'left'
@@ -142,14 +141,179 @@ under the License.
animationDelayUpdate: function (idx) {
return idx * 5;
}
+ }
+
+ var chart = testHelper.create(echarts, 'main0', {
+ option: option,
});
chart.on('click', function (params) {
console.log(params);
});
+ });
+ </script>
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
- window.onresize = chart.resize;
+ var option = {
+ xAxis: [{
+ type: 'category'
+ }, {
+ gridIndex: 1
+ }],
+ yAxis: [{
+ }, {
+ type: 'category',
+ gridIndex: 1
+ }],
+ grid: [{
+ containLabel: true,
+ left: 10,
+ right: '55%'
+ }, {
+ containLabel: true,
+ left: '55%',
+ right: 10
+ }],
+ tooltip: {},
+ series: [{
+ type: 'bar',
+ large: true,
+ largeThreshold: 2,
+ data: [
+ ['mm', 33],
+ ['yy', -44],
+ ['tt', 55],
+ ['rr', 66]
+ ]
+ }, {
+ type: 'bar',
+ large: true,
+ largeThreshold: 2,
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ encode: {
+ x: 1,
+ y: 0
+ },
+ data: [
+ ['mm', 33],
+ ['yy', -44],
+ ['tt', 55],
+ ['rr', 66]
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ option: option,
+ title: [
+ 'bar in large mode',
+ 'click bar should alert',
+ 'tooltip should be ok'
+ ]
+ });
+
+ chart.on('click', function (param) {
+ alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
+ console.log(param);
+ });
});
+
</script>
+
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var option = {
+ xAxis: [{
+ type: 'category'
+ }, {
+ gridIndex: 1
+ }],
+ yAxis: [{
+ }, {
+ type: 'category',
+ gridIndex: 1
+ }],
+ grid: [{
+ containLabel: true,
+ left: 10,
+ right: '55%'
+ }, {
+ containLabel: true,
+ left: '55%',
+ right: 10
+ }],
+ tooltip: {},
+ series: [{
+ type: 'bar',
+ large: true,
+ largeThreshold: 2,
+ progressive: 1,
+ progressiveThreshold: 2,
+ data: [
+ ['mm', 33],
+ ['yy', -44],
+ ['tt', 55],
+ ['rr', 66]
+ ]
+ }, {
+ type: 'bar',
+ large: true,
+ largeThreshold: 2,
+ progressive: 1,
+ progressiveThreshold: 2,
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ encode: {
+ x: 1,
+ y: 0
+ },
+ data: [
+ ['mm', 33],
+ ['yy', -44],
+ ['tt', 55],
+ ['rr', 66]
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ option: option,
+ title: [
+ 'progressive bar in large mode',
+ 'click bar should alert',
+ 'tooltip should be ok'
+ ]
+ });
+
+ chart.on('click', function (param) {
+ alert('seriesIndex: ' + param.seriesIndex + ' dataIndex: ' + param.dataIndex);
+ console.log(param);
+ });
+ });
+
+ </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