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/20 04:25:32 UTC
[incubator-echarts] branch release updated: Support click and
tooltip in bar large mode. Fix #10699
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/release by this push:
new 3567c14 Support click and tooltip in bar large mode. Fix #10699
3567c14 is described below
commit 3567c1481d0e825b60bb808cf193fa95d32202e3
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