echarts 折线图自定义设置自己的图片图表

最新推荐文章于 2024-07-03 16:38:10 发布

yue31313

最新推荐文章于 2024-07-03 16:38:10 发布

阅读量1.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/yue31313/article/details/122453241

版权

在Echarts中，可以使用`symbol: 'image://'`结合Base64编码的图片来定制折线图的节点图标。通过在线工具将图片转为Base64，然后将其插入到Echarts配置项中，即可实现个性化图表效果。示例代码展示了如何设置带有自定义图片的折线图。

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

symbol: 'image://data: ******'

图片用在线工具转成 base64 。然后填入路径。

base64图片在线转换工具 - 站长工具

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABPCAYAAACTUyndAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAEl1JREFUeAHtnO1vHcd1xs/u3st7+SKKsizJkUPFcY28uG6KNk2DuEBaNEjRfk/y76T/Uj8URT8UbeAGRmrXMGpXaGFHsB3bsmXJeqNI3nv3pc/vzM7lXlIieS+HVZBwiN2dnZ0985xnzjkzu3eWZmfpxAxkSGia5ic6/Owk0iob6/ZcGyILzyEva9i3qW6PVFNqstKPoTjTXYWfn2RX2Ui3I6f3eAwIp8EWg1AIR0WpF4N/Xhw9v9vsD3X8aZtf8BBR5U4jQryHfNeKjFUOXORCt2Jbf6HDrKwDGOjUGRzUiG3P3nvc5iOJx63/xHq5934EQzXQskXzUzbrAgZ6sDzXiard23W6SMplgbOCaB/hJB29jUNwhIpz7ZOROAs8ngE+bhFXNIN9jO07jbXnP+4J2stFIsFCabwSsczfSveOZCTOxD5vAaACOXNhP6Eol01V2lOuC3G+/ExzfqtwZJBF28S+iAF8tM+1k+FIRqKQPCYBFJcFOClaBHmuxfJ4PPnAguTZRDuRxNhmIG2v02L78TgfjlMmUfgbgLPFQwTaloUrp7ufwRAJjE2eHMcpkHgYSViEUqwSzsI+Q7n/j9RioKlEONKR2M61AjLQ4RLqZWVrHXKsQXmuHOh7Cj1+c