关于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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JsRender for object语法简介
2014/10/31 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
教师现实表现材料
2014/02/14 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
本科应届生自荐信
2014/06/29 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
Python Parser的用法
2021/05/12 Python
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python