起因

实现对 label 的样式定制,自定义字体颜色、大小等属性;效果如下图


实现

  1.  
    itemStyle: {
  2.  
    normal: {
  3.  
    color: '#f7ba0e',
  4.  
    label: {
  5.  
    show: true,
  6.  
    position: 'top',
  7.  
    formatter: function(params) {
  8.  
    for (var i = 0,
  9.  
    l = option.xAxis[0].data.length; i < l; i++) {
  10.  
    if (option.xAxis[0].data[i] == params.name) {
  11.  
    var val1 = params.value || 0;
  12.  
    var val2 = option.series[0].data[i] || 0;
  13.  
    return '{color1|' + val1 + '}/{color2|' + val2 + '}';
  14.  
    }
  15.  
    }
  16.  
    },
  17.  
    rich: {
  18.  
    color1: {
  19.  
    color: '#f7ba0e'
  20.  
    },
  21.  
    color2: {
  22.  
    color: '#42a1fe'
  23.  
    }
  24.  
    },
  25.  
    textStyle: {
  26.  
    color: '#333'
  27.  
    }
  28.  
    }
  29.  
    }
  30.  
    }

(1)通过“formatter”实现内容自定义;

(2)通过“rich”项控制内容样式;

'{color1|' + val1 + '}/{color2|' + val2 + '}' 用“color1”的样式显示“val1”,用“color2”的样式显示val2;

(3)下方有对“color1”和“color2”样式的具体定义;

官方文档

官方文档有更加详细的描述:

--------------------- 本文来自 lufaxinT 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/tomorrow13210073213/article/details/79654892?utm_source=copy

ECharts 定制 label 样式的更多相关文章

  1. form表单修改label样式

    <?php $form = ActiveForm::begin([ 'options'=>['enctype'=>'multipart/form-data','class' => ...

  2. WPF:定制Checkbox样式,让“正确”绿得好看,让“错误”红的显眼

    WPF提供了样式.模板.触发器.状态管理.矢量形状等方式,让我们不需要背景图片,也可以轻松定制控件的风格样式.下面是笔者针对Checkbox进行的样式定制,让“正确”绿得好看,让“错误”红的显眼.  ...

  3. SharePoint 2010 用xsl文件定制列表样式

    有时候我们不希望列表用默认的方式显示,要我们自定义的方式定制.其中有一种方式是使用xsl文件. 在AllItems.aspx页面中,列表是以webpart的形式显示在页面上的,webpart类型是Xs ...

  4. 百度地图Label 样式:label.setStyle

    创建文本标注对象设置样式的时候,其中的backgroundColor属性居然还支持透明啊,不过改变数值好像对效果没有影响 var numLabel = new BMap.Label(num); num ...

  5. 张高兴的 UWP 开发笔记:定制 ContentDialog 样式

    我需要一个背景透明的 ContentDialog,像下图一样.如何定制?写了一个简单的示例(https://github.com/ZhangGaoxing/uwp-demo/tree/master/C ...

  6. 百度地图Label 样式 setStyle

    最近一直在整百度地图,发现一个小问题: 创建文本标注对象设置样式的时候,其中的backgroundColor属性居然还支持透明啊,不过改变数值好像对效果没有影响 var numLabel = new ...

  7. 百度地图label样式修正

    现象:百度地图 label 宽度为0,文字在标签边框外. 原因:样式冲突,在css中添加下列代码即可: .BMapLabel{ max-width:none; }

  8. echarts 添加自定义label标签

    1.echarts 自定义标签 注:当设置visualMap的后,给覆盖regions单独定义的值(如果data 中没有regions的地区 则无妨,我这个是从data中删除'青岛',但是lable ...

  9. vue使用elementUI form表单label样式修改

    更多关于修改ElementUI样式的方法,可以参考这篇文章 1.删除style标签中的 scoped 属性 <style lang="lang" scoped> ... ...

随机推荐

  1. Struts2和MVC的简单整合

    1.首先还是创建一个简单Maven的项目,导入jar包, <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...

  2. java基础之基础语法详录

    [前言] java的语法先从基础语法学,Java语言是由类和对象组成的,其对象和类又是由方法和变量组成,而方法,又包含了语句和表达式. 对象:(几乎)一切都是对象,比如:一只熊猫,他的外观,颜色,他在 ...

  3. Centos7初次开机提示Initial setup of CentOS Linux 7 (core)

    安装完成centos7后出现如下提示: Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License informat ...

  4. cv程序员的日常_1

    某天pom文件粘贴报红 然后我就问我同事 然后我就百度 https://blog.csdn.net/guoyiyun_tz/article/details/82115024 看完之后…emmmm没错啊 ...

  5. nginx+tomcat实现Windows系统下的负载均衡搭建的案例

    刚入行没多久就听过‘负载均衡’的大名,到现在因为工作接触的少,所以没什么太多的认识.但自己又对其非常的好奇,所以前两天通过查资料,在自己的笔记本上就搭建了一个超简单的案例(工作中没有时间,晚上到家了条 ...

  6. JSP学习笔记(3)-JSP内置对象

    有些对象不用声明就可以在JSP页面的Java程序片和表达式部分使用,这些对象就是JSP的内置对象.  JSP常用的内置对象有request,response,session,application,o ...

  7. centos7下安装sublime text3并配置环境变量

    注意:我解压完把sublime_text全改成了sublime,如果未改就是sublime_text 1.官网下载sublime,保存到指定目录,例如/home 2.解压 tar xjf sublim ...

  8. c#winform中如何修改ListView控件每个单元格的颜色

    ListView在View属性为Details的时候它呈现的方式和DataGirdView差不多,它的每一行都是一个ListViewItem,然而每个ListViewItem都有一个BackColor ...

  9. iOS中表视图单元格事件用nib和storyboard的两种写法总结

    从ios6开始,苹果公司推出了storyborad技术取代了nib的写法,这样代码量确实少写了很多,也比较简洁.但是,从学习的角度来说,阿堂认为 用nib的写法,虽然多了些代码,但是对于掌握知识和原理 ...

  10. css-使不同大小的图片在固定大小的容器中居中

    HTML示例如下: <ul> <li class="imgbox"><img src="img1.jpg"></li& ...