Echarts之图例legend基本配置方式
作者:Akimoto Hiroshi
这篇文章主要介绍了Echarts只图例legend基本配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
Echarts图例legend基本配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状图的基本实现和常见效果</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script> </head> <body> <div style="width: 600px; height: 400px; border: 1px solid black;"></div> <script> var myCharts = echarts.init(document.querySelector('div')) var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie'] var yDataArr = [88, 99, 78, 67, 84, 32] var yDataArr2 = [78, 89, 98, 57, 94, 92] var option = { title: { text: 'Title', textStyle: { color: 'lightblue', fontSize: 20 }, borderWidth: 2, borderColor: 'lightblue', borderRadius: 10, top: 30, left: '45%', backgroundColor: 'black', padding: 10 }, grid: { show: true, top: 90, left: 100, right: 40, bottom: 40, height: '60%', }, tooltip: { trigger: 'item', triggerOn: 'click', formatter: function(arg) { console.log(arg) return `cate: ${arg.name} ---> value: ${arg.data}` } }, xAxis: { type: 'category', data: xDataArr }, yAxis: { type: 'value' }, legend: { data: ['Math', 'English'], left: 'center', top: 'bottom' }, series: [ { name: 'Math', type: 'bar', label: { show: true, rotate: 30, postion: 'middle', color: 'pink' }, barWidth: '30%', data: yDataArr }, { type: 'bar', name: 'English', data: yDataArr2, color: 'lightblue', barWidth: '30%', label: { show: true, color: '#fff' } } ] } myCharts.setOption(option) </script> </body> </html>
left和top可以控制图例显示的位置:
orient控制图例的显示方式是横着还是竖着,默认horizontal横着
改为vertical:
Echarts图例位置-legend属性
[如何设置Echarts图例位置]
Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。
不过我们在使用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] [(距离上方距离),(距离右方距离)、(距离下方距离)、(距离左方距离)]
当前(2020年6月)直接只设置left、right、top、bottom具体像素值或百分比即可:left、right、top、bottom
legend: { orient: ‘vertical', right: 10, //当前直接只设置此具体像素值、百分比即可了 data: [‘直接访问', ‘邮件营销', ‘联盟广告', ‘视频广告', ‘搜索引擎'] },
如此设置完就可以得到自己想要的位置啦。
参考:Echarts官网配置项介绍:https://echarts.apache.org/zh/option.html#legend
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。