echarts中图例右置且竖排完整代码
更新时间：2023年08月16日 08:54:29 作者：wudechun
这篇文章主要给大家介绍了关于echarts中图例右置且竖排的相关资料,Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发,需要的朋友可以参考下
有echarts中，图例是用来指示不同系列的标记颜色和名字小组件，见图所示。
默认图标都是水平放置的：
要让图例放在右侧并竖直，需要作如下配置：
legend: {
show:true,
type:'plain',
left:'right',
top:'middle',
width:130,
},type代表类型，有plain与scroll两个，这里我们使用plain，这也是默认的类型；
- left代表图例在水平放置的位置，有left、center、right
- top代表图例在垂直方向的位置，有top、middle、bottom
- width是最主要的，当设置的宽度比较小时，才会迫使图例换行，从而形成竖直排列的现像。
以下分别是width在20、150、400时的样子：
以下是完整代码：
<!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>
<style>
#echart {
width: 600px;
height: 400px;
margin: 100px auto;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div id="echart"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- <script src="js/gt.js"></script> -->
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('echart'));
// 构建图表配置项
option = {
color: ["#003366", "#006699", "#4cabce", "#e5323e"],
legend: {
show:true,
type:'plain',
left:'right',
top:'middle',
width:20,
},
xAxis: {
type: "category",
axisTick: {
show: false
}
},
yAxis: {},
series: [{
name:'Forest',
type: "bar",
seriesLayoutBy: "row",
data:[320,332,301,334,390],
}, {
name:'Steppe',
type: "bar",
seriesLayoutBy: "row",
data:[220,182,191,234,290],
}, {
name:'Desert',
type: "bar",
seriesLayoutBy: "row",
data:[150,232,201,154,190],
}, {
name:'Wetland',
type: "bar",
seriesLayoutBy: "row",
data:[98, 77, 101, 99, 40],
}]
};
// 将构建好的配置项传入echarts
myChart.setOption(option);
</script>
</body>
</html>总结
到此这篇关于echarts中图例右置且竖排的文章就介绍到这了,更多相关echarts图例右置竖排内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript中的精度丢失与分摊不平问题原因及解决方案
这篇文章主要介绍了JavaScript中浮点数精度问题,包括根本原因、常见场景及解决方案,推荐使用整数运算、BigInt或高精度库（如decimal.js）来解决金额计算的精度问题,需要的朋友可以参考下2026-03-03
这篇文章主要为大家详细介绍了js实现自动轮换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为，本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用,需要的朋友可以参考下2023-06-06
window.onload想必大家都有使用过吧，在窗口加载时执行，如果多次使用window.onload该如何判断呢？下面与大家分享个方法2014-09-09
这篇文章主要介绍了JS与SQL方式随机生成高强度密码,结合实例形式分析了javascript方式与SQL方式生成高强度密码的相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了JS异步函数队列功能,结合实例形式分析了异步函数队列的应用场景、实现方法与相关操作技巧,需要的朋友可以参考下2017-11-11
本文主要介绍了egg.js的基本使用实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
下面小编就为大家带来一篇JS判断日期格式是否合法的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了javascript原型链学习记录之继承实现方式,结合实例形式分析了javascript使用原型链实现继承的相关操作技巧与注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了javascripit实现密码强度检测，大家参考使用吧2013-12-12
最新评论