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


Posted in Javascript onApril 20, 2018

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

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

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

代码如下,如果需要修改文字显示的样式,则需另外配置项(如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格式化文本提示的时候,需要自己写一个函数进行格式化判断之后显示

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

代码如下:

{
      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在节点显示动态数据及添加提示文本所遇到的问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS模块与命名空间的介绍
Mar 22 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
layui文件上传实现代码
May 20 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 #Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
vue多页面开发和打包正确处理方法
Apr 20 #Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 #Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 #Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 #Javascript
Vue中如何实现proxy代理
Apr 20 #Javascript
You might like
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
javascript中的面向对象
2017/03/30 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
python获取文件扩展名的方法
2015/07/06 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Django实现学生管理系统
2019/02/26 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
电力培训心得体会
2014/09/02 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技