echartsjs 在图中添加图片

echartsjs 在图中添加图片

graphic 是原生图形元素组件

支持的图形元素包括:
image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group

官方的案例:

官方案例

添加一张图片到图表的中央

add to graphic: []

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
type: 'image',
id: 'logo',
right: 'center',
top: 'center',
z: -10,
bounding: 'raw',
origin: [75, 75],
style: {
image: 'http://echarts.baidu.com/images/favicon.png',
width: 150,
height: 150,
opacity: 0.4
}
}

right,top,left,bottom属性值的类型可以是:

  • number:表示像素值。
  • 百分比值:如 ‘33%’,用父元素的高和此百分比计算出最终值。
  • ‘center’:表示自动居中。

left 和 right 只有一个可以生效。 (top, bottom同理)
如果指定 left 或 right,则 shape 里的 x、cx 等定位属性不再生效。

让图片元素自动旋转

1
2
3
4
5
6
7
8
9
var rotation = 0;
setInterval(function () {
myChart.setOption({
graphic: {
id: 'logo',
rotation: (rotation += Math.PI / 360) % (Math.PI * 2)
}
});
}, 30);

Comments

Your browser is out-of-date!

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

×