echarts line graph add picture - graphic

echarts line graph add picture - graphic

首先以官方的demo为例做修改

官方demo

  • 添加graphic 列表
  • 修改事件中setOption涉及graphic部分,让demo能继续正常运行

graphic 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var pics = [
{
type: 'image',
id: 'logo',
right: 'center',
top: 'center',
z: 200,
bounding: 'raw',
origin: [75, 75],
style: {
image: 'http://echarts.baidu.com/images/favicon.png',
width: 150,
height: 150,
opacity: 1
}
},
{
type: 'group',
rotation: 0,
bounding: 'raw',
right: "center",
top: "center",
z: 100,
children: [
{
type: 'rect',
left: 'center',
top: 'center',
z: 100,
shape: {
width: 1000,
height: 50
},
style: {
fill: 'rgba(0,0,0,1)'
}
},
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: '#fff',
text: 'ECHARTS BAR CHART',
font: 'bold 26px Microsoft YaHei'
}
}
]
},
{
type: 'group',
rotation: 1.57,
bounding: 'raw',
right: "center",
top: "center",
z: 100,
children: [
{
type: 'rect',
left: 'center',
top: 'center',
z: 100,
shape: {
width: 1000,
height: 50
},
style: {
fill: 'rgba(0,0,0,1)'
}
},
{
type: 'text',
left: 'center',
top: 'center',
z: 100,
style: {
fill: 'red',
text: 'ECHARTS BAR CHART22',
font: 'bold 26px Microsoft YaHei'
}
}
]
}
];

修改graphic相关setOption

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
if (!app.inNode) {

setTimeout(function () {


// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
// 修改这个部分,以避免添加的图片因为覆盖而消失
graphic: [...echarts.util.map(data, function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex),
onmousemove: echarts.util.curry(showTooltip, dataIndex),
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
z: 900
};
}), ...pics]
});
}, 0);

window.addEventListener('resize', updatePosition);
}

修改后,试试看是否和展示效果图一样吧~

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×