Echarts图例位置 - legend属性

2023-10-29

 legend: {
    orient: 'vertical',
    x:'right',      //可设定图例在左、右、居中
    y:'center',     //可设定图例在上、下、居中
    padding:[0,50,0,0],   //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
    data: ['直接访问','微信','百度','其他文章','网页']
 },

Echarts 图例位置 - legend 属性:

如何使用echarts 图例位置:

  Echarts 可以帮助我们快速构建柱状图(bar), 饼图(pie)折线图(line),  这对于多图行化展示数据尤其特别方便, 可以帮助我们快速开发。 图例经常调节到我们想要的位置。

 2: 只需要legend属性中修改如下几个示数即可: 

x : 轴上可以设定图例在: left (左)   -- 右(right) ---居中 (center)

y: 代表y 轴 上 (top),  居中(center) bottom: (底部)

另外: 可以使用padding 内边距:

padding: [0, 50, 50, 30]   ( 距离:上方距离, 右方距离, 下方距离, 左方距离

legend: {
   orient: 'vertical',
   right: 10,   //当前直接只设置此具体像素值、百分比即可了
   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
 },

)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Echarts图例位置 - legend属性 的相关文章

随机推荐

  • Unity 轻量级对象池管理器(上)

    参考 https www jianshu com p 144181beab79 完整代码请跳转至 Unity 轻量级对象池管理器 下 一 前言 很多时候 你都要考虑一个问题 就是到底是牺牲时间换空间 还是牺牲空间换时间 特别是在资源紧缺的那
  • 前后端分离项目打包上传服务器

    前后端分离项目打包上传服务器 项目环境 前端项目打包 npm run build 后端项目打包 xshell和xftp 项目环境 本次项目前端使用的是vue 后端使用spring boot 分别使用的编辑器是vs code和ide 前端项目
  • Failed to load resource: the server responded with a status of 500 ()

    文章目录 前提 解决思路 心得 前提 1 最近在写SSM博客项目 基于jsp编写的 跟着视频敲 直接运行已经给好的资料 在登录验证的时候 发现页面加载半天 如下图 2 于是就盲目的去比对是不是自己复制的代码有问题 然后就一行行的比对 这犯了
  • Linux中磁盘分区的具体步骤

    磁盘分区是在Linux操作系统中重要的任务之一 通过分区可以让我们更好地管理磁盘空间 并更好地使用磁盘来存储数据和程序 在这篇博客里 我将向大家介绍如何在Linux中进行磁盘分区的实战步骤 步骤一 打开终端 首先 我们需要打开终端 在终端中
  • Linux系统巡检项及详细巡检方法与解决方案

    一 背景 1 开发脚本实现OS配置参数巡检 2 推动监控系统发布OS巡检插件 3 利用监控数据形成报表 二 巡检项整改方案解析 1 检查僵尸进程 此项检查项是检查主机系统是否存在D状态的进程 D是一种不可中断的sleep 如果发现D状态并且
  • [React Hooks 翻译] 3-8 State Hook

    示例 等价的class组件 使用class实现一个计数器 你可能会这么写 class Example extends React Component constructor props super props this state coun
  • 微信公众号 几种移动端UI框架介绍

    微信公众号 几种移动端UI框架介绍 微信公众号开发 主要是移动端网页的页面开发 在这里推荐3个移动端UI框架 WeUI SUI和Mint UI 1 WeUI 1 1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计 可以令用
  • 从RecyclerView、NestedScrollView源码分析嵌套滑动异常

    一 显示不全 自动滚动异常 NestedScrollView嵌套RecyclerView时 有2个问题 1 RecyclerView数据加载完成后 会自动滚动到第一个itemView的位置上 导致RecyclerView上面的布局不显示 2
  • 处理 Java 异常时应避免的 7 个常见错误

    处理异常是最常见但不一定是最简单的任务之一 它仍然是经验丰富的团队中经常讨论的话题之一 并且我们应该了解一些最佳实践和常见错误 以下是在处理应用程序中的异常时应避免的几个错误 错误 1 指定一个 java lang Exception 或
  • uwb定位上位机定位源码流程分析

    主要用到的文件有两个 1 SerialConnection cpp 负责串口初始化相关内容 2 RTLSClient cpp 负责解算标签坐标并发送给上位机 3 trilateration cpp 解算坐标数学原理 1 先执行 函数 voi
  • 斐波那契额数列

    斐波那契额数列 文章目录 斐波那契额数列 前言 一 迭代法 二 公式法估算 三 矩阵快速幂加高精度 完 前言 采用三种方法求斐波那契数列 迭代法 公式法 矩阵快速幂加高精度 偷偷告诉你 可以精确求到一万位斐波那契数 一 迭代法 includ
  • 网络剪枝(1)

    论文名 Learning Efficient Convolutional Networks through Network Slimming 本文主题 Network Slimming 1 剪枝的三种意义 re duce the model
  • 串口通信----串口接收框接收不到数据

    在进行串口调试时 数据发送没有问题 但是其他串口给该串口发送数据时 接收框始终接收不到数据 也不提示错误 感觉接收函数不起作用 对照之前没有问题的串口程序 发现只有这部分没有添加进去 其他都是一样的 问题应该在这里 添加进去后 正常接收了
  • 面试官提问js篇3:js中 0.1 + 0.2 为什么不等于0.3?怎么才能等于0.3?

    一 js中 0 1 0 2 为什么不等于0 3 因为浮点数运算的精度问题 在计算机运行过程中 需要将数据转化成二进制 然后再进行计算 js中的Number类型遵循IEEE754标准 在IEEE754标准的64位浮点数相加 因为浮点数自身小数
  • RocketMq的控制台安装以及RocketMqTemplate的使用

    跟别的mq一样 RocketMq也有自己的控制台 本章讲解控制台的安装以及在实际开发中RocketMq的使用 1 RocketMq控制台安装 首先进入github中RocketMq控制台的源码中 添加链接描述 将其下载下来 如图 可以直接通
  • 什么是服务器虚拟化?

    虚拟化就解决了这个问题 将多台服务器整合到一台服务器中 运行多个虚拟环境 最终将节省物理空间 另一个问题就是 计算机网络变得越来越大 同时也越来越复杂 服务器会占用宝贵的空间 这叶就是为何数据中心会为散热而烦恼 若将一个服物理务器划分多个虚
  • springboot多模块项目(微服务项目)正确打包(jar)方式

    大致步骤 新建一个springboot项目名称为父亲 添加父快捷方式 新建子模块 子模块同时插入新建springboot的项目 依次创建enty和web模块 关键是并配置好pom文件 web模块依赖于entiy模块中的实体类 创建测试控制器
  • invalid sender 或出现Invalid JSON RPC response: {“size“:0,“timeout“:0}

    web3发交易经常出现invalid sender 或者Invalid JSON RPC response size 0 timeout 0 报错 这个报错很不具体 云里雾里 经过我的反复测试 这是和web3相关的包版本有关 以web3 j
  • Linux系统如何使用命令创建文件?

    在Linux系统中 文件是我们日常工作中会经常接触到的一部分 不管是编写代码 存储数据还是记录日志 都需要创建文件来进行操作 那么在Linux系统中 如何使用命令创建文件呢 以下是详细的内容 1 创建空白文件 要在Linux系统中创建空白文
  • Echarts图例位置 - legend属性

    legend orient vertical x right 可设定图例在左 右 居中 y center 可设定图例在上 下 居中 padding 0 50 0 0 可设定图例 距上方距离 距右方距离 距下方距离 距左方距离 data 直接