Echarts之图例legend基本配置方式
更新时间：2023年04月22日 10:06:49 作者：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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js使用v-pre与v-html输出HTML操作示例
这篇文章主要介绍了vue.js使用v-pre与v-html输出HTML操作,结合实例形式分析了vue.js基于v-pre与v-html属性输出HTML的具体操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
今天小编就为大家分享一篇vue 项目打包时样式及背景图片路径找不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题
这篇文章主要介绍了Vue+ElementUI踩坑之动态显示/隐藏表格的列el-table-column问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue.js前端框架之事件处理小结,本文给大家介绍了v-on 指令的基本用法，通过实例讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue :src 文件路径错误问题的简单解决方法，本文分步骤给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要介绍了vue中this.$parent的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本篇文章主要介绍了开发Vue树形组件的示例代码，它展现了组件的递归使用。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家详细介绍了vue实现全选和反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论