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

效果

还可以添加判断现实部分

 使用markpoint 引入base64格式

markPoint: {data: item.data.map((qitem, qindex) => ({coord: [qindex, qitem],symbol: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEX///8AAAAAAAAAAAAAAAAAAAAAAADPRUXqTE7xTk/vTk/qTE3LRETiSUvzTk/zT1DiSUvLRETpS03vTU7wTk/vTk/rTU7qTEzSREfzT1DMQkLgSUvfSUnvTk/vTU7LQ0PyTk/yV1jyWFn5uLn5urr6u7z6vb71e3z1fH32jI32iYnzZmfzZGX///8Ap66yAAAAIHRSTlMAAQIFCAoDSrjo5rZEhf78ekCt3e7jvrJP/UaCd+XkRTA2RwMAAAABYktHRACIBR1IAAAAB3RJTUUH5QkPAzobcqT7egAAAIxJREFUGNNtj+kSgjAMhEmacogWb8SL9T7f//kMLTjj4P7YSb+2ySaK/omIVUTfMxuxVgy3hGJJ0myQDyWmcC8jh8MRxVj8GzKJA05noJiYBrCkAC5XtalwA2zWgZkNYN6BRQCy1Pp2Vyv9FzIrbfp4AtXaN9WxG4fXG9U2jPXB8t2+rNtg/ej95X70ATzGCjM7EQGRAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA5LTE0VDE5OjU4OjI3KzA4OjAwrEwOHwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOS0xNFQxOTo1ODoyNyswODowMN0RtqMAAAARdEVYdGV4aWY6Q29sb3JTcGFjZQAxD5sCSQAAABJ0RVh0ZXhpZjpFeGlmT2Zmc2V0ADI2UxuiZQAAABd0RVh0ZXhpZjpQaXhlbFhEaW1lbnNpb24AMTa998GMAAAAF3RFWHRleGlmOlBpeGVsWURpbWVuc2lvbgAxNmBhGAkAAAAgdEVYdHNvZnR3YXJlAGh0dHBzOi8vaW1hZ2VtYWdpY2sub3JnvM8dnQAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABd0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMTYdr15vAAAAFnRFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADE25QCe4gAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNjMxNjIwNzA3HUVAbwAAABF0RVh0VGh1bWI6OlNpemUANjUxQkIH8ZGhAAAARnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vYXBwL3RtcC9pbWFnZWxjL2ltZ3ZpZXcyXzlfMTYyODY1MTc2Mjk2ODEwOTBfMzZfWzBdxniuAwAAAABJRU5ErkJggg==`,symbolSize: qitem > item.divider ? 0 : 18,symbolOffset: [0, '-70%'],}))},

引入图片文件

import TipsSvg from '@/assets/img/svg/tips.svg'symbol: `image://${TipsSvg}`,

 分别对应这两种方式

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！