Echarts
可以通过 'path://' 将图标设置为任意的矢量路径。路径图形会自适应调整为合适的大小。: 可以设定图例在----左(left)、右(right)、居中(center)、填写数字(如:100px): 可以设定图例在----上(top)、下(bottom)、居中(center)、填写数字(如:100px)也可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dat
Echarts图例常用配置
图例大小、字体、显示方式、位置等
legend: {
data: this.allLegend,
textStyle: {
//图例字体大小
fontSize: 10,
},
//图例大小
itemHeight: 10,
//图例滚动显示
type: 'scroll',
//图例纵向显示
orient: 'vertical',
//图例位置
right: 0,
top: 30,
bottom: 30,
},
echarts图例位置设置详解
只需要legend属性中修改如下几个示数即可:
legend: {
orient: 'vertical',
x:'right', //可设定图例在左、右、居中
y:'center', //可设定图例在上、下、居中
padding:[0,50,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
data: ['直接访问','微信','百度','其他文章','网页']
},
①x : 可以设定图例在----左(left)、右(right)、居中(center)、填写数字(如:100px)
②y : 可以设定图例在----上(top)、下(bottom)、居中(center)、填写数字(如:100px)
③另外,可使用padding:
padding:[0,50,0,0] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]
当前直接只设置left、right、top、bottom具体像素值或百分比即可:left、right、top、bottom
legend: {
orient: 'vertical',
right: 10, //当前直接只设置此具体像素值、百分比即可了
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
如此设置完就可以得到自己想要的位置了。
echarts图例修改icon的形状及大小
图例项的legend icon,ECharts 提供的标记类型有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
也可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
URL 为图片链接例如:
'image://http://xxx.xxx.xxx/a/b.png'
URL 为 dataURI 例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
修改icon大小
legend: {
icon: 'circle',
bottom: 10,
itemHeight: 7, //修改icon图形大小
textStyle: {
fontSize: 13,
color: '#000'
},
data: ['底层数据', '机构代码+企业名称', '联系电话', '联系人姓名', '详细地址', '实名认证']
},
更多推荐
所有评论(0)