Echarts基础篇（1）echarts图表数据标记

拄杖盲学轻声码

4279人浏览 · 2021-02-18 13:57:55

拄杖盲学轻声码 · 2021-02-18 13:57:55 发布

前言：

前不久接到公司的一个任务，就是要针对指标采集的数据异常的值进行一个数据的标记。也借此机会给大家进行一个echarts的标记数据的基础普及，具体页面展示效果如下：
在这里插入图片描述

实现代码

其中就存在一个数据的标记为红色星形和蜡笔小新图片的，具体实现思路就是对加载的数据添加symbol和symbolSize属性，具体数据如下所示：

var data_y2 = ['12', '11', '12', '10', {
value: '8',
symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
symbolSize: 20
}, '14', {
value: '8',
symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
symbolSize: 20
}, '17'];

不难发现其中第5、7条数据都是一个json格式，也就是说这两个数据我认为存在问题，所以设置了他们的symbol和symbolSize属性。这才有页面的效果。

疑问？如何写？

这个image一大堆的东西是啥玩意儿，我怎么写的出来？
这里我做了一个总结，其实我们echarts关于数据标记的方式总共分为三种：

1. symbol属性自带的类型
2. base64位（示例用的）图片，
3. 自定义图片路径

具体展示效果及属性值如下所示
symbol的默认样式属性主要如下（我力所能及找到的且和负责的测试过）
‘rect’、‘roundRect’、‘triangle’、‘diamond’、‘pin’、‘arrow’、‘circle’、‘emptyCircle’、‘emptyRectangle’、‘emptyTriangle’、‘emptyDiamond’、‘none’;
默认的，自定义，Base64图片对照表如下：

‘rect’	‘roundRect’	‘triangle’	‘diamond’	‘pin’	‘arrow’

方形	有圆角	三角形	三角形	气球状	箭头
‘circle’	‘emptyCircle’	‘emptyRectangle’	‘emptyTriangle’	‘emptyDiamond’	‘none’
					–
圆形	空心圆	空心方形	空心三角形	空心菱形	默认不标记
	`星形base64图片`	值见下面-TYPE64		`自定义图片`	值见下面-IMGURL

TYPE64：
‘image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7’
IMGURL:
‘image://https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600062199599&di=7dc2ea5cdde585ce200c7656ba171960&imgtype=0&src=http%3A%2F%2Fwww.36588.com.cn%3A8080%2FImageResourceMongo%2FUploadedFile%2Fdimension%2Fbig%2Fa32a40bd-b597-4712-9127-17e6d5a5d04b.png’
最后来看一下我星状的echarts动态效果吧：
在这里插入图片描述
贴心提示：如果出现了标记的点因为数据量大而不显示的话是不是有点坑爹，这个时候记得在series中新增一个这个属性就可以showAllSymbol: true,也就是展示所有的点。