echarts 文本标签配置 label文字样式

2023-11-11

字体基本样式设置:fontStyle、fontWeight、fontSize、fontFamily。
文字颜色:color。
文字描边:textBorderColor、textBorderWidth。
文字阴影:textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本块或文本片段大小:lineHeight、width、height、padding。
文本块或文本片段的对齐:align、verticalAlign。
文本块或文本片段的边框、背景(颜色或图片):backgroundColor、borderColor、borderWidth、borderRadius。
文本块或文本片段的阴影:shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本块的位置和旋转:position、distance、rotate。
echarts坐标轴的name属性更改位置
		name: 'name',
        nameTextStyle: {
            padding: [0, 0, 0, -10]    // 四个数字分别为上右下左与原位置距离
        }

在这里插入图片描述

echarts 柱状图鼠标划过的样式 划出之后恢复原样式
series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '12px', // 柱子宽度
            yAxisIndex: 0,
            itemStyle: {
            // normal是柱状图的正常样式
              normal: { // 渐变色设置
                color: new echarts.graphic.LinearGradient(
                  0, 
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#4796FF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6BD1FF' // 100% 处的颜色
                    }
                  ],
                  false
                )
              },
               // 移入当前的柱状图时改变颜色
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#FF8A4D' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#FFC82C' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            data: data.plan_production
          }
        ]
饼图的渐变颜色设置 位置设置

在这里插入图片描述

 series: [
          {
            name: '占比统计',
            type: 'pie',
            center: ['55%', '50%'], // 图列的位置Ï
            radius: [25, 90],
            itemStyle: {
              // 鼠标划过样式
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              // 颜色设置 
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      c1: ' #12B7FF',
                      c2: '#058DE9'
                    },
                    {
                      c1: '#26D79C',
                      c2: '#0FB67F'
                    },
                    {
                      c1: '#1287FF',
                      c2: '#2261D5'
                    },
                    {
                      c1: '#FF8A4D',
                      c2: '#FFC82C'
                    },
                    {
                      c1: '#12ECFF',
                      c2: '#22D5CB'
                    }
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: colorList[params.dataIndex].c1
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }
                  ])
                }
              }
            },

            roseType: 'radius',
            label: {
              show: false
            },
            data: [
              { value: 24, name: '工作发现' },
              { value: 22, name: '上级交办' },
              { value: 18, name: '预警监测' },
              { value: 16, name: '群众举报' },
              { value: 14, name: '部门移送' }
            ]
          }
        ]
让x轴从原点开始

在这里插入图片描述
在这里插入图片描述

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

echarts 文本标签配置 label文字样式 的相关文章

  • TCP详解之重传机制

    TCP详解之重传机制 TCP 实现可靠传输的方式之一 是通过序列号与确认应答 在 TCP 中 当发送端的数据到达接收主机时 接收端主机会返回一个确认应答消息 表示已收到消息 但在错综复杂的网络 并不一定能如上图那么顺利能正常的数据传输 万一
  • OpenGL ES 着色器(shader)介绍

    1 Shader Shader其实就是一段执行在GPU上的程序 此程序使用OpenGL ES SL语言来编写 它是一个描述顶点或像素特性的简单程序 在opengles中常用的shader有两种 vertex shader和fragment
  • 在styled-components的样式声明中做px到rem的自动转换

    原文地址 最近在尝试使用styled components来做React下的样式开发 这样可以利用js语言的灵活来增强css的能力 在用styled components处理px到rem的转换时 有点问题了 styled component
  • 嵌入式学习(四)——串口

    目录 一 通信的基本概念 1 1 同步通信和异步通信 1 2 电平信号和差分信号 1 3 并行接口和串行接口 1 4 单工通信和双工通信 二 串口通信 2 1 基本概念 2 2 起始位 数据位 奇偶校验位 停止位 2 3 RS232电平和T
  • 如何将二维数组作为函数的参数传递

    如何将二维数组作为函数的参数传递 今天写程序的时候要用到二维数组作参数传给一个函数 我发现将二维数组作参数进行传递还不是想象得那么简单里 但是最后我也解决了遇到的问题 所以这篇文章主要介绍如何处理二维数组当作参数传递的情况 希望大家不至于再
  • 如何加速实现数据透明度 驱动企业释放数据价值

    本文根据王锦超先生在 DQMIS 2020第四届数据质量管理国际峰会 现场演讲内容整理而成 图1 1 思迪博软件 Stibo Systems 中国区总经理 王锦超 演讲嘉宾介绍 王锦超 专注于服务企业信息化建设十余年 在主数据管理 数据治理
  • 贪心法田忌赛马问题Java代码,hdoj 1052 Tian Ji - The Horse Racing【田忌赛马】 【贪心】...

    hdoj 1052 Tian Ji The Horse Racing 田忌赛马 贪心 思路 先按从小到大排序 然后从最快的开始比 假设i j 是最慢的一端 flag1 flag2是最快的一端 田的最快的大于king的 则比较 如果等于然后判
  • linux 系统安装vscode 图文学习记录

    目录 1 下载 2 解压 3 移动到 usr local 目录 4 复制一个VScode图标文件到 usr share icons 目录 后面会有用 5 创建启动器 1 下载 到地址下载安装包 https code visualstudio
  • OpenGL programming with GLSL: Part I

    The standards of OpenGL GLSL are evolving constantly we enter to the era of programmable graphic pipeline at the same ti
  • 关于对象的引用作为参数,可以直接访问私有成员的问题

    include using namespace std class CPoint public CPoint int xx int yy x xx y yy CPoint const CPoint p x p x y p y private
  • 详解掩膜mask及不规则mask应用

    部分引用自 https www cnblogs com skyfsm p 6894685 html 在OpenCV中我们经常会遇到一个名字 Mask 掩膜 很多函数都使用到它 那么这个Mask到底什么呢 mask经常应用于 原图 src 与
  • [OpenCV实战]41 嵌入式计算机视觉设备选择

    文章目录 1 简介 1 1 深度学习与传统计算机视觉 1 2 性能考量 1 3 社区支持 2 结论 3 参考 在计算机视觉领域中 不同的场景不同的应用程序需要不同的解决方案 在本文中 我们将快速回顾可用于在单板计算机 指所有的逻辑线路 定时
  • Element UI的数据表格数据检索方法

    Element UI的数据表格数据检索方法 vue兼容性很好的前端组件 刚开始上手 感觉这一些方法功能蛮强大的 跟大家分享一下吧 一 表体数据检索 1 1 样式检索 如图 我们想根据数据表格中出现的特定文本 优 良 中 进行样式的检索 这种
  • Win10 bat 调用管理员运行打开/杀死进程

    原因 后台有个插件服务与其他进程存在端口 串口冲突 需要使用管理员身份杀死进程 注意 以下代码为bat脚本 保存时另存为 gt 编码格式选择 ANSI 在运行时则不会出现中文乱码 Q 如何调起管理员身份的cmd A 使用vbs脚本 代码如下
  • 应急响应思路

    一 挖矿病毒应急响应 1 判断遭遇的挖矿木马 a 挖矿木马挖矿现象 1 cpu占用过高2 网络连接外部网络3 配置文件特征pools b 排查网络链接及进程定位挖矿木马 1 排查定时任务2 排查守护连接 c 判断挖矿木马时间 d 判断挖矿木
  • ES 22 - Elasticsearch中如何进行日期(数值)范围查询

    目录 1 范围查询的符号 2 数值范围查询 3 时间范围查询 3 1 简单查询示例 3 2 关于时间的数学表达式 date math 3 3 关于时间的四舍五入 4 日期格式化范围查询 format 5 时区范围查询 time zone 1
  • nginx-ingress配置跨域

    nginx ingress controller 配置跨域 直接在ingress 的annation里面加 kubernetes io ingress class nginx nginx ingress kubernetes io cors
  • 《动手学深度学习 Pytorch版》 3.3 线性回归的简洁实现

    import numpy as np import torch from torch utils import data from d2l import torch as d2l from torch import nn nn 是神经网络
  • 34_windows环境debug Nginx 源码-配置WSL和CLion

    文章目录 WSL 中安装 编译构建使用的相关软件 重装默认的 ssh 创建 libstdc so 软链接 34 windows环境debug Nginx 源码 配置WSL和CLion WSL 中安装 编译构建使用的相关软件 sudo apt
  • 锁的四种状态与锁升级过程 图文详解

    一 前言 锁的状态总共有四种 级别由低到高依次为 无锁 偏向锁 轻量级锁 重量级锁 这四种锁状态分别代表什么 为什么会有锁升级 其实在 JDK 1 6之前 synchronized 还是一个重量级锁 是一个效率比较低下的锁 但是在JDK 1

随机推荐

  • android audio flinger

    我的书 购买链接 京东购买链接 淘宝购买链接 当当购买链接 Audio 创建 frameworks av media mediaserver main mediaserver cpp 47 int main int argc unused
  • Linux-arm架构下配置qtcreator

    QTCreator要想在Linux arm架构下运行 必须要保证两个 1 qt要在arm下编译生成对应库文件和qmake 2 qtCreator 要在arm架构下编译 这里主要是要区别qt库和qtcreator 细节可以百度 编译qt可以参
  • 在网页中插入视频的代码

    今天在网站上看到一个在网页上显示视频的代码 觉得很有用 先收藏一下 以后备用 直接加入这个代码就可以了 由于本地网站视频会对服务器造成很大的压力 所以可以先上传到这种免费的网站上 然后直接引用链接即可 这不但减轻服务器的
  • 特征筛选8——递归特征删除(REF)筛选特征(有监督筛选)

    Recursive feature elimination RFE 是通过递归的删除一些特征 最终得到模型结果 RFE思路如下 首先借助模型训练所有特征 得到各个特征的权重 从权重最小的特征开始 删除特征后重新训练模型 得到除了被删特征外的
  • 测试人员知识盲区:移动端专项测试到底怎么做?

    01 专项测试测什么 资源类性能测试 CPU占用 内存占用 内存泄漏 低资源环境表现 弱网络测试 速度类性能测试 FPS测试 端到端业务延时 速度分析 客户端 网络 服务器 稳定性测试 MTTF Monkey test 兼容性测试 Andr
  • 在没有配置的dns服务器响应之后名称,在没有配置的dns服务器响应之后

    在没有配置的dns服务器响应之后 内容精选 换一换 在大型网络应用中 通常会使用多台服务器提供同一个服务 为了平衡每台服务器上的访问压力 通常会选择采用负载均衡来实现 提高服务器响应效率 云解析服务支持解析的负载均衡 也叫做带权重的记录轮询
  • 信息安全导论复习题

    一 判断题 在本题的每一小题的括号中 正确的填入 错误的填入 每题 2 分 1 F 网络软件的漏洞和 后门 没有区别 2 F 网络物理威胁中的身份识别错误与身份鉴别威胁具有相同的意义 3 T 电子窃听不一定要把窃听设备安装在线路上 4 F
  • 若依免密登录

    最近做了一个微信扫码登录的功能整合到若依中 当扫码完成后 如何确定是哪个用户 以及权限有哪些 因为shiro的加密基于MD5所以密码不可逆 则不能从数据库查询后再解密 简单一些的话可以把需要登录的用户账号密码写死在配置文件中 我之前就是这么
  • 经典SQL语句大全

    SQL语句参考 包含Access MySQL 以及 SQL Server 基础 创建数据库 CREATE DATABASE database name 删除数据库 drop database dbname 备份sql server 创建 备
  • you *might* want to use the less safe log_bin_trust_function_creators variable

    一 报错过程 在MySQL8 0 13上创建自定义函数时出现此错误 二 报错原因 因为MySQL8 0二进制日志默认开启 二进制日志的一个重要功能是用于主从复制 而存储函数有可能导致主从的数据不一致 所以当开启二进制日志后 参数log bi
  • 切换Debian的crontab的nano编辑器

    Debian的crontab默认的编辑器是nano 用起来很不习惯 怎么才能转回vim呢 用以下命令便可 update alternatives config editor 出现以下所示的界面 而后选择8使用 usr bin vim就能够了
  • SeetaFace C++环境搭建(详细图文)

    SeetaFace C 环境搭建 详细图文 SeetaFace开源库由FaceDetection FaceAlignment FaceIdentification三部分组成 本文综合网上其他SeetaFace环境搭建的教程 经实践后整理出一
  • vue新建一个项目

    新建一个vue项目步骤 1 在workspace中新建一个文件夹Test 2 在VScode中点击文件 将文件夹添加到工作区 若要添加到现有的工作空间 可以将文件夹直接拖入 3 右击文件夹 点击在终端中打开 4 打开后 输入vue init
  • 密码学基础(一)——哈希算法

    一 常用密码学算法分类 哈希算法 哈希算法不可逆 包括 MD4 MD5 hash1 ripeMD160 SHA256 SHA3 Keccak256 国家标准SM3 国家密码管理局 加密 解密算法 加密解密算法可逆 但是必须要有秘钥 对称加密
  • 获取单选框的值

    Jq获取单选框的值 var type id input name type id checked val html和smarty tr style display none td class d label 是否关联减项项目 td td t
  • Opencv-C++笔记 (18) : 轮廓和凸包

    文章目录 一 轮廓 findContours发现轮廓 drawContours绘制轮廓 代码 二 几何及特性概括 凸包 Convex Hull 凸包概念 凸包扫描算法介绍 Graham扫描算法 相关API介绍 程序示例 轮廓集合及特性性概括
  • 关于单片机PDR和POR应用注意事项

    关于单片机PDR和POR应用注意事项 在单片机相关项目的开发中很少有同行会关注到POR和PDR的问题 本人也是经过相关项目的一步步填坑才发现PDR和POR很容易被忽视 一旦出现问题也是比较致命的 为此我将展开阐述并将我开发中遇到的相关问题分
  • CSS内部样式、外部样式

    文章目录 为什么需要CSS样式表 一 样式表的基本语法 二 常用的样式属性 1 文本属性 2 背景属性 3 行内 嵌入 样式表 4 外部样式表文件 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化
  • 深度学习-目标检测

    应用背景 在AI视觉领域 许多高精度测量场景 需要搭配传统视觉算法 才会有更好的使用效果 例如 本项目测量被检目标的长度 需要两个步骤 框选识别被检目标 对被检目标进行分析测量 程序功能 本程序功能 通过深度学习算法框选出被检目标后 可获取
  • echarts 文本标签配置 label文字样式

    字体基本样式设置 fontStyle fontWeight fontSize fontFamily 文字颜色 color 文字描边 textBorderColor textBorderWidth 文字阴影 textShadowColor t