脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts图例右置竖排

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数据结构与算法

    这篇文章主要介绍了JavaScript数据结构与算法，文章围绕主题展开数据结构与算法的概念，以及几种常见的数据结构是什么，有什么优点和缺，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-07-07
  • js实现类似MSN提示的页面效果代码分享

    js实现类似MSN提示的页面效果代码分享

    这篇文章主要介绍了模仿MSN消息提示的效果,推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • JavaScript中的自定义事件举例详解

    JavaScript中的自定义事件举例详解

    在JavaScript中自定义事件的用法是前端开发中一个较为高级的话题,它允许开发者创建和触发自己的事件,从而达到更好的模块化和代码解耦,这篇文章主要介绍了JavaScript中自定义事件的相关资料,需要的朋友可以参考下
    2025-04-04
  • js 倒计时（高效率服务器时间同步）

    js 倒计时（高效率服务器时间同步）

    首先说一下，为什么要服务器时间同步， 因为服务器时间和本地电脑时间存在一定的时间差。有些对时效性要求非常高的应用，例如时时彩开奖，是不能容忍这种时间差存在的
    2017-09-09
  • ajax读取数据后使用jqchart显示图表的方法

    ajax读取数据后使用jqchart显示图表的方法

    这篇文章主要介绍了ajax读取数据后使用jqchart显示图表的方法,涉及Ajax操作及图表插件的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • textarea 控制输入字符字节数(示例代码)

    textarea 控制输入字符字节数(示例代码)

    本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 关于JavaScript回调函数的深入理解

    关于JavaScript回调函数的深入理解

    由于函数是一等对象,我们可以把一个函数作为参数传递给另一个函数,然后在那个函数内执行,至也可以被那个函数返回,然后再执行,这篇文章主要给大家介绍了关于JavaScript回调函数的深入理解,需要的朋友可以参考下
    2021-06-06
  • 基于Bootstrap实现tab标签切换效果

    基于Bootstrap实现tab标签切换效果

    这篇文章主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 用javascript获得css中的属性值的代码

    用javascript获得css中的属性值的代码

    用javascript获得css中的属性值的代码...
    2007-08-08
  • HTML页面定时跳转方法解析（2种任选）

    HTML页面定时跳转方法解析（2种任选）

    本文主要对HTML页面定时跳转进行方法介绍：1、meta refresh 实现。2、JavaScript 实现。具有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12

最新评论