echarts折线图上每个点上引入icon图片

效果

还可以添加判断现实部分

 使用markpoint 引入base64格式

markPoint: {
            data: item.data.map((qitem, qindex) => ({
              coord: [qindex, qitem],
              symbol: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
                      AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEX///8AAAAAAAAAAAAA
                      AAAAAAAAAADPRUXqTE7xTk/vTk/qTE3LRETiSUvzTk/zT1DiSUvLRETpS03vTU7wTk/vTk/rTU7q
                      TEzSREfzT1DMQkLgSUvfSUnvTk/vTU7LQ0PyTk/yV1jyWFn5uLn5urr6u7z6vb71e3z1fH32jI32
                      iYnzZmfzZGX///8Ap66yAAAAIHRSTlMAAQIFCAoDSrjo5rZEhf78ekCt3e7jvrJP/UaCd+XkRTA2
                      RwMAAAABYktHRACIBR1IAAAAB3RJTUUH5QkPAzobcqT7egAAAIxJREFUGNNtj+kSgjAMhEmacogW
                      b8SL9T7f//kMLTjj4P7YSb+2ySaK/omIVUTfMxuxVgy3hGJJ0myQDyWmcC8jh8MRxVj8GzKJA05n
                      oJiYBrCkAC5XtalwA2zWgZkNYN6BRQCy1Pp2Vyv9FzIrbfp4AtXaN9WxG4fXG9U2jPXB8t2+rNtg
                      /ej95X70ATzGCjM7EQGRAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA5LTE0VDE5OjU4OjI3KzA4
                      OjAwrEwOHwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOS0xNFQxOTo1ODoyNyswODowMN0RtqMA
                      AAARdEVYdGV4aWY6Q29sb3JTcGFjZQAxD5sCSQAAABJ0RVh0ZXhpZjpFeGlmT2Zmc2V0ADI2Uxui
                      ZQAAABd0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AMTa998GMAAAAF3RFWHRleGlmOlBpeGVsWURp
                      bWVuc2lvbgAxNmBhGAkAAAAgdEVYdHNvZnR3YXJlAGh0dHBzOi8vaW1hZ2VtYWdpY2sub3JnvM8d
                      nQAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABd0RVh0VGh1bWI6OkltYWdl
                      OjpIZWlnaHQAMTYdr15vAAAAFnRFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADE25QCe4gAAABl0RVh0
                      VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNjMxNjIw
                      NzA3HUVAbwAAABF0RVh0VGh1bWI6OlNpemUANjUxQkIH8ZGhAAAARnRFWHRUaHVtYjo6VVJJAGZp
                      bGU6Ly8vYXBwL3RtcC9pbWFnZWxjL2ltZ3ZpZXcyXzlfMTYyODY1MTc2Mjk2ODEwOTBfMzZfWzBd
                      xniuAwAAAABJRU5ErkJggg==`,
              symbolSize: qitem > item.divider ? 0 : 18,
              symbolOffset: [0, '-70%'],
            }))
          },

引入图片文件

import TipsSvg from '@/assets/img/svg/tips.svg'

symbol: `image://${TipsSvg}`,

 分别对应这两种方式

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值