echarts中无下划线实现,我采用图片填充文本块背景的方式实现

这是从

长空雁叫霜晨月

的博客中得到启发https://www.cnblogs.com/volodya/p/Echarts.html

图片

代码

先将图片转化为base64编码,在将图片设置为文本块背景(使用网站http://tu.chacuo.net/imagetodataurl

//定义背景图片
var hr = new Image();
hr.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADAQMAAABoE/fBAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAAAAAApWe5zwAAAAJ0Uk5TAP9bkSK1AAAADklEQVR4nGNgYGhgYAAAAYYAgX1rxDcAAAAASUVORK5CYII=";
//
//
//
rich: {
hr: {
width: '100%',
height: 3,
backgroundColor: { image:hr }//文本块背景图片
}
},
formatter: function (params)//文本(hr就是下划线行)
{
return [`mm`, `{hr|}`, `m`].join("\n");
}

效果

echarts下划线实现的更多相关文章

  1. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  2. [转]CSS 类名的单词连字符:下划线还是横杠?

    问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...

  3. [CSS]textarea设置下划线格式

    功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加t ...

  4. python 里面的单下划线与双下划线的区别

    python 里面的单下划线与双下划线的区别 Python 用下划线作为变量前缀和后缀指定特殊变量. _xxx 不能用'from moduleimport *'导入 __xxx__ 系统定义名字 __ ...

  5. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  6. 递归将Map里的字段名由驼峰转为下划线

    导航 定位 概述 算法设计 递归技巧 代码实现 定位 本文适合于想要使用Java递归地将Map里的Key字段名从驼峰转为下划线,或者想了解如何处理任意递归的Map结构的筒鞋. 概述 在进行多语言混合编 ...

  7. iOS 给NSString文字上添加横线 中间和下划线

    有时候我们需要给文字添加横线,有两种情况: 第一种是贯穿中间的横线: 横线的颜色和文字的颜色保持一致 _oldPriceLabel.text = "; _oldPriceLabel.text ...

  8. Python中的下划线(译文)

    原文地址这篇文章讨论Python中下划线_的使用.跟Python中很多用法类似,下划线_的不同用法绝大部分(不全是)都是一种惯例约定. 单个下划线(_) 主要有三种情况: 1. 解释器中 _符号是指交 ...

  9. PHP面试题之驼峰字符串转换成下划线样式例子

    自己在看到这个问题的时候,想到的是用ASCII码来处理,没往万能的正则上去想.好吧,下面来看看答案: 答案1: 代码如下 复制代码 $str = 'OpenAPI'; $length = mb_str ...

  10. nginx 自动忽略request中header name包含下划线参数的解决方法

    使用nginx过程中遇到了个问题,就是request中的header name中如果包含下划线会自动忽略掉,导致服务器接收不到该字段的内容,以下为解决方法: nginx默认request的header ...

随机推荐

  1. Kubernetes(K8S)命令指南

    本文提供了一份全面的Kubernetes(K8S)命令指南,旨在帮助用户掌握和运用K8S的各种命令. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有10+年互联网 ...

  2. HMS Core机器学习服务,高效助力跨语种沟通

    5月24日, HUAWEI Developer Day(简称HDD)线上沙龙·创新开发专场活动成功举办.HMS Core机器学习服务(ML Kit)产品经理在会上围绕机器翻译的技术优势.使用场景和接入 ...

  3. Python数据分析 numpy 笔记

     B站课链接:[Python数据分析三剑客:NumPy.Pandas与Matplotlib] https://www.bilibili.com/video/BV1Yb4y1g7SV/?p=16& ...

  4. HarmonyOS音视频开发概述

      在音视频开发指导中,将介绍各种涉及音频.视频播放或录制功能场景的开发方式,指导开发者如何使用系统提供的音视频API实现对应功能.比如使用TonePlayer实现简单的提示音,当设备接收到新消息时, ...

  5. k8s 深入篇———— 一些容器操作的原理[三]

    前言 简单介绍一下一些容器的操作原理. 正文 docker exec 是怎么做到进入容器里的呢. 比如说: 这里有一个容器,我们可以exec 进去: docker exec -it b265 /bin ...

  6. Python阿里云消息推送调用API

    很多公司测试APP推送时候,应该也是很头疼:推送环境:测试.正式,稍不注意就把测试的push到正式上,导致所有用户都收到 例子很多: 其实阿里.极光都有推送Api,直接调用API就ok,特别是有的公司 ...

  7. js 实现双指缩放

    前言随着智能手机.平板电脑等触控设备的普及,交互方式也发生了改变.相对于使用鼠标和键盘进行交互的电脑,触控设备可以直接使用手指进行交互,而且基本上都支持多点触控.多点触控最常见的操作莫过于双指缩放了. ...

  8. 力扣121(java&python)-买卖股票的最佳时机(简单)

    题目: 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格. 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票.设计一 ...

  9. 牛客网-SQL专项练习1

    ①检索所有比"王华"年龄大的学生姓名.年龄和性别.SQL语句: 解析: 第一步:先找到王华的年龄 SELECT AGE FROM S WHRE SN = "王华" ...

  10. 一遇到复杂分析查询就卡顿?MySQL分析实例了解一下

    随着企业数据爆发式增长,MySQL分析查询卡顿问题越来越多,用户时效性不能保证,精细化运营诉求不能满足.如何能无缝对接业务库,实现毫秒级针对万亿级数据进行即时的多维分析透视和业务探索,MySQL分析实 ...