echarts散点图加图片

ml1658503

已于 2024-07-30 17:36:20 修改

阅读量1.4k

点赞数

分类专栏：其他文章标签： echarts 散点图加图片

于 2022-09-05 11:47:06 首次发布

本文链接：https://blog.csdn.net/ml1658503/article/details/126701946

版权

其他专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何在Echarts的散点图中添加图片，通过查阅官方文档和示例代码，展示了实现这一功能的方法。

摘要由CSDN通过智能技术生成

要在echarts散点图上加图片，我觉得echarts应该是支持的。查了下文档，可以，还比较简单。

效果：

文档：

代码：

option = {
	xAxis: {},
	yAxis: {},
	series: [{
			symbolSize: 100,
			data: [
				[2.0, 6.04]
			],
			type: 'scatter',//url图片
			symbol: 'image://https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a2e5575d2e7a0000018c1b8e06e9.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664941282&t=642db8e7e31ddffcdfac39498ecb7d0c'
		},
		{
			symbolSize: 100,
			data: [
				[6.0, 6.04]
			],
			type: 'scatter',
			symbol: 'image://https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F70%2F24%2F595fa272d8ec4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664941282&t=6b6caaf86d843db34be500aa39732c8b'
		},
		{
			symbolSize: 100,
			data: [
				[12.0, 12.04]
			],
			type: 'scatter',
			symbol: 'image://https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0197c458187b5da84a0d304fb7981e.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664941282&t=62af7a75255484d84283e13b3055d8fc'
		},
		{
			symbolSize: 100,
			data: [
				[8.0, 8.04]
			],
			type: 'scatter',//base64图片
			symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
		},
		{
      symbolSize: 20,
      data: [//静态数据
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81]
      ],
      type: 'scatter'
    }
	]
};