Skip to content

Commit

Permalink
Support click and tooltip in bar large mode. Fix #10699
Browse files Browse the repository at this point in the history
  • Loading branch information
@100pah
100pah committed Jun 20, 2019
1 parent c5201e3 commit 3567c14
Show file tree
Hide file tree
Showing 3 changed files with 245 additions and 22 deletions.
63 changes: 58 additions & 5 deletions src/chart/bar/BarView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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]);
}
Expand All @@ -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) {
Expand Down
14 changes: 10 additions & 4 deletions src/layout/barGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
190 changes: 177 additions & 13 deletions test/bar-large.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,13 @@
<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>
Expand All @@ -36,22 +40,17 @@
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 = [];
Expand All @@ -68,7 +67,7 @@

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","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]];

chart.setOption({
var option = {
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
align: 'left'
Expand Down Expand Up @@ -142,14 +141,179 @@
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>

0 comments on commit 3567c14

Please sign in to comment.