热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

关于echarts在节点显示动态数据及添加提示文本所遇到的问题

刚接触echarts不久,在使用过程中遇到了2个难点,1、每个节点显示动态数据,这个其实可以通过配置项完成,在series数据绑定中,可以使用原本的配置项itemStyle中的标签格式化完成,如下:代码如下,如果需要修改文字显示的样式,则需另外配置项(如f

刚接触echarts不久,在使用过程中遇到了2个难点,

1、每个节点显示动态数据,这个其实可以通过配置项完成,在series数据绑定中,可以使用原本的配置项itemStyle中的标签格式化完成,如下:

代码如下,如果需要修改文字显示的样式,则需另外配置项(如font-style,font-weigth等)完成

{
      name: '其中:少数民族',
      type: 'line',
      data: ssmz,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ]
      },
      itemStyle: {//节点数据显示
        normal: {
          label: {
            show: true,
            position: 'right',
            formatter: ssmz,//该值动态显示数据,若需固定的文本,则直接写入
          }
        }
      }
    },

2、有些客户会提出另外的要求,在折线显示最高值和最低值的同时,折线的末尾需要加上该折线代表的意义,此时也可以通过itemStyle完成,只是在formatter格式化文本提示的时候,需要自己写一个函数进行格式化判断之后显示

代码如下:

{
      name: '合计',
      type: 'line',
      data: hj,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ],
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'right',//居右
            offset:[20,0],//横向往右20
            formatter: function(para){//格式化提示文本
            if(para.value == hj[hj.length-1]){
            return '合计';//显示文本
            }else{
            return '';
            }
            }
          }
        }
      }
    },

总结

以上所述是小编给大家介绍的关于echarts在节点显示动态数据及添加提示文本所遇到的问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本题旨在通过给定的评级信息,利用拓扑排序和并查集算法来确定全球 Tetris 高手排行榜。题目要求判断是否可以根据提供的信息生成一个明确的排名表,或者是否存在冲突或信息不足的情况。 ... [详细]
  • 本文详细介绍了Java中的输入输出(IO)流,包括其基本概念、分类及应用。IO流是用于在程序和外部资源之间传输数据的一套API。根据数据流动的方向,可以分为输入流(从外部流向程序)和输出流(从程序流向外部)。此外,还涵盖了字节流和字符流的区别及其具体实现。 ... [详细]
  • 自己用过的一些比较有用的css3新属性【HTML】
    web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ... [详细]
  • MySQL DateTime 类型数据处理及.0 尾数去除方法
    本文介绍如何在 MySQL 中处理 DateTime 类型的数据,并解决获取数据时出现的.0尾数问题。同时,探讨了不同场景下的解决方案,确保数据格式的一致性和准确性。 ... [详细]
  • 本文详细介绍了 JavaScript 中类 (class) 的基本语法、定义方式、属性保护方法、私有属性的实现以及继承机制。通过具体的代码示例和详细的解释,帮助开发者更好地掌握 JavaScript 类的相关知识。 ... [详细]
  • 不确定性|放入_华为机试题 HJ9提取不重复的整数
    不确定性|放入_华为机试题 HJ9提取不重复的整数 ... [详细]
  • 本文详细探讨了 Django 的 ORM(对象关系映射)机制,重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外,文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]
  • GIMP 2.99.2 发布:UI 采用 GTK3 实现、原生支持高分屏和 Wayland
    开源项目评选最后一周,手里的5票再不用就没用了https:www.oschina.netprojecttop_cn_2020GIMP2.99.2已发布,同时这也标志着GIMP3.0的到来,其中最显著的变化是从GTK2过渡到GTK3工具包。基于 ... [详细]
  • 本文详细介绍了S5P4418处理器中的定时器模块,涵盖五个定时器(Timers 0-4)的特性与配置。这些定时器不仅支持PWM输出,还具备灵活的时钟源和预分频器设置,其中Timers 0和1共享一个预分频器,而Timers 2、3和4则共享另一个预分频器。默认情况下,2nboot配置为200MHz。 ... [详细]
  • 本文详细介绍了Java Web应用程序中的过滤器(Filter)功能,包括其作用、实现方式及配置方法。过滤器可以在请求到达目标资源之前对其进行预处理,并在响应返回给客户端之前进行后处理。 ... [详细]
  • 作为一名 Ember.js 新手,了解如何在路由和模型中正确加载 JSON 数据是至关重要的。本文将探讨两者之间的差异,并提供实用的建议。 ... [详细]
  • 本文详细解释了华为ENSP模拟器中常用的命令,涵盖用户模式、系统模式、接口模式和地址池视图模式下的操作。这些命令对于进行计算机网络实验至关重要,帮助用户更好地理解和配置路由器及PC机的通信。 ... [详细]
  • 探讨了在有序数列中实现多种查询和修改操作的高效数据结构设计,主要使用线段树与平衡树(Treap)结合的方法。 ... [详细]
  • 华为USG基于源地址的多出口策略路由配置
    网络拓扑如下:组网情况:企业用户主要有技术部(VLAN10)和行政部(VLAN20),通过汇聚交换机连接到USG。企业分别通过两个不同运营商(ISP1和ISP2)连接到 ... [详细]
  • 本文介绍如何通过 JavaScript 实现一个基于鼠标坐标的 Tooltip 弹出层,详细解释了如何获取窗口和文档的尺寸及滚动位置,并优化了代码结构。 ... [详细]
author-avatar
mobiledu2502917243
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有