Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 99e8019b 编写于 作者: P pissang
浏览文件
操作

fix(event): support label trigger mouse event.

上级 1694130f
隐藏空白更改
内联 并排
Showing with 162 addition and 168 deletion
src/chart/custom.ts
浏览文件 @ 99e8019b
......@@ -531,7 +531,7 @@ class CustomSeriesView extends ChartView {
// Enable to give a name on a group made by `renderItem`, and listen
// events that triggerd by its descendents.
while ((targetEl = targetEl.parent) && targetEl !== this.group) {
while ((targetEl = (targetEl.__hostTarget || targetEl.parent)) && targetEl !== this.group) {
if (targetEl.name === elementName) {
return true;
}
......
src/echarts.ts
浏览文件 @ 99e8019b
......@@ -903,20 +903,26 @@ class ECharts extends Eventful {
const el = e.target;
let params: ECEvent;
const isGlobalOut = eveName === 'globalout';
const ecData = el && getECData(el);
// no e.target when 'globalout'.
if (isGlobalOut) {
params = {} as ECEvent;
}
else if (ecData && ecData.dataIndex != null) {
const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
params = (
dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}
) as ECEvent;
}
// If element has custom eventData of components
else if (el && ecData.eventData) {
params = zrUtil.extend({}, ecData.eventData) as ECEvent;
else {
el && findEventDispatcher(el, (parent) => {
const ecData = getECData(parent);
if (ecData && ecData.dataIndex != null) {
const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
params = (
dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}
) as ECEvent;
return true;
}
// If element has custom eventData of components
else if (ecData.eventData) {
params = zrUtil.extend({}, ecData.eventData) as ECEvent;
return true;
}
}, true);
}
// Contract: if params prepared in mouse event,
......@@ -1829,7 +1835,7 @@ class ECharts extends Eventful {
}).on('click', function (e) {
const el = e.target;
const dispatcher = findEventDispatcher(
el, (target) => getECData(target).dataIndex != null
el, (target) => getECData(target).dataIndex != null, true
);
if (dispatcher) {
const actionType = (dispatcher as ECElement).selected ? 'unselect' : 'select';
......
src/util/event.ts
浏览文件 @ 99e8019b
......@@ -19,19 +19,21 @@
import Element from 'zrender/src/Element';
// Find a dispatcher that's on the most top.
export function findEventDispatcher(target: Element, det: (target: Element) => boolean) {
export function findEventDispatcher(
target: Element,
det: (target: Element) => boolean,
returnFirstMatch?: boolean
) {
let found;
while (target) {
if (det(target)) {
found = target;
if (returnFirstMatch) {
break;
}
}
if (target.__hostTarget) {
target = target.__hostTarget;
}
else {
target = target.parent;
}
target = target.__hostTarget || target.parent;
}
return found;
}
\ No newline at end of file
test/line-animation.html
浏览文件 @ 99e8019b
......@@ -49,6 +49,9 @@ under the License.
}
</style>
<button onclick="change()">CHANGE</button>
<div class="chart" id="main2"></div>
<h2>Default Label Animation</h2>
<div class="chart" id="main0"></div>
......@@ -57,22 +60,143 @@ under the License.
<div class="chart" id="main1"></div>
<h2>dataZoom Animation</h2>
<button onclick="change()">CHANGE</button>
<div class="chart" id="main2"></div>
<script>
var echarts;
var chart;
require([
'echarts'
], function (echarts) {
var groupCategories = [];
var groupColors = [];
var chart = echarts.init(document.getElementById('main2'));
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [];
for (var i = 0; i < 10; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
// data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
data.push(i * i - 15);
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
legend: {
data: ['large area']
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisTick: {
interval: 0
},
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
// start: 0,
// end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'large area',
type:'line',
symbol: 'none',
// type:'scatter',
// smooth:true,
// symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
lineStyle: {
normal: {
shadowBlur: 6,
shadowColor: '#999',
shadowOffsetX: 10,
shadowOffsetY: 10
}
},
areaStyle: {
// origin: 'end',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: data
}
],
animationDurationUpdate: 2000
};
chart.setOption(option);
window.change = function () {
chart.dispatchAction({
type: 'dataZoom',
end: 20
});
}
});
</script>
<script>
require([
'echarts'
], function (ec) {
echarts = ec;
chart = myChart = echarts.init(document.getElementById('main0'));
], function (echarts) {
var chart = echarts.init(document.getElementById('main0'));
var xData = [];
var data = [];
......@@ -220,15 +344,10 @@ under the License.
<script>
var echarts;
var chart;
require([
'echarts'
], function (ec) {
echarts = ec;
chart = myChart = echarts.init(document.getElementById('main1'));
], function (echarts) {
var chart = echarts.init(document.getElementById('main1'));
var xData = [];
var data = [];
......@@ -282,138 +401,5 @@ under the License.
<script>
var echarts;
var chart;
var myChart;
var groupCategories = [];
var groupColors = [];
require([
'echarts'
], function (ec) {
echarts = ec;
chart = myChart = echarts.init(document.getElementById('main2'));
var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [];
for (var i = 0; i < 10; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
// data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
data.push(i * i - 15);
}
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
legend: {
data: ['large area']
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisTick: {
interval: 0
},
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
// start: 0,
// end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'large area',
type:'line',
symbol: 'none',
// type:'scatter',
// smooth:true,
// symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
lineStyle: {
normal: {
shadowBlur: 6,
shadowColor: '#999',
shadowOffsetX: 10,
shadowOffsetY: 10
}
},
areaStyle: {
// origin: 'end',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: data
}
],
animationDurationUpdate: 2000
};
chart.setOption(option);
});
function change() {
chart.dispatchAction({
type: 'dataZoom',
end: 20
});
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或