Skip to content

Commit a683f82

Browse files
akira-cnakira-cn
committed
🐛fixed event trigger bug
1 parent b126e9a commit a683f82

File tree

3 files changed

+74
-13
lines changed

3 files changed

+74
-13
lines changed

‎examples/test2.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>SandBox</title>
6+
<script src="/js/spritejs.js"></script>
7+
<script crossorigin="anonymous" src="/js/echarts.js"></script>
8+
<script src="/js/sprite-extend-echarts.js"></script>
9+
<style>
10+
html,body{
11+
margin: 0;
12+
padding: 0;
13+
height: 100%;
14+
width: 100%;
15+
}
16+
#paper{
17+
width: 100%;
18+
height: 100%;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="paper"></div>
24+
</body>
25+
</html>
26+
27+
<script>
28+
const {Scene, EChart} = spritejs;
29+
30+
const scene = new Scene('#paper', {
31+
viewport: [1200, 1200],
32+
resolution: [1200, 1200],
33+
});
34+
35+
const layer = scene.layer('fglayer');
36+
document.querySelector('#paper canvas').style.backgroundColor = '#fff';
37+
38+
const chart = new EChart({
39+
size: [700, 700],
40+
anchor: [0.5, 0.5],
41+
pos: [600, 600],
42+
// bgcolor: 'red',
43+
});
44+
45+
chart.setOption({
46+
title: {
47+
text: 'ECharts 示例',
48+
},
49+
tooltip: {},
50+
legend: {
51+
data: ['销量'],
52+
},
53+
xAxis: {
54+
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
55+
},
56+
yAxis: {},
57+
series: [{
58+
name: '销量',
59+
type: 'bar',
60+
data: [5, 20, 36, 10, 10, 20],
61+
}],
62+
});
63+
64+
layer.append(chart);
65+
</script>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sprite-extend-echarts",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "The standard project template.",
55
"main": "index.js",
66
"scripts": {

‎src/echarts.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,8 @@ export default function install({use, utils, registerNodeType, BaseSprite}) {
44
const container = document.createElement('canvas');
55
const layer = this.layer;
66

7-
const pixelRatioX = layer.resolution[0] / layer.viewport[0];
8-
const pixelRatioY = layer.resolution[1] / layer.viewport[1];
9-
container.width = w / pixelRatioX;
10-
container.height = h / pixelRatioY;
11-
12-
this.pixelRatio = [pixelRatioX, pixelRatioY];
7+
container.width = w / 2;
8+
container.height = h / 2;
139

1410
const chart = echarts.init(container);
1511

@@ -28,8 +24,8 @@ export default function install({use, utils, registerNodeType, BaseSprite}) {
2824
const originalEvent = e.originalEvent;
2925
const anchor = this.attr('anchor');
3026
const cz = this.clientSize;
31-
const offsetX = (e.offsetX + anchor[0] * cz[0]) / pixelRatioX;
32-
const offsetY = (e.offsetY + anchor[1] * cz[1]) / pixelRatioY;
27+
const offsetX = (e.offsetX + anchor[0] * cz[0]) / 2;
28+
const offsetY = (e.offsetY + anchor[1] * cz[1]) / 2;
3329
let type = originalEvent.type;
3430
if(type === 'mouseleave') type = 'mouseout';
3531
const newEvent = new MouseEvent(originalEvent.type, {
@@ -49,10 +45,9 @@ export default function install({use, utils, registerNodeType, BaseSprite}) {
4945
srcElement: originalEvent.srcElement,
5046
target: originalEvent.target,
5147
toElement: originalEvent.toElement,
52-
view: originalEvent.view,
48+
// view: originalEvent.view,
5349
which: originalEvent.witch,
5450
});
55-
5651
this.chart.getDom().dispatchEvent(newEvent);
5752
};
5853

@@ -77,9 +72,10 @@ export default function install({use, utils, registerNodeType, BaseSprite}) {
7772
const canvas = this.chart.getRenderedCanvas({pixelRatio: 2});
7873

7974
if(w !== canvas.width || h !== canvas.height) {
80-
const width = w / this.pixelRatio[0];
81-
const height = h / this.pixelRatio[1];
75+
const width = w / 2;
76+
const height = h / 2;
8277
this.chart.resize({width, height});
78+
console.log('resize');
8379
}
8480
drawingContext.drawImage(canvas, 0, 0, w, h);
8581
}

0 commit comments

Comments
 (0)