关于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 相关文章推荐
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
利用node.js开发cli的完整步骤
Dec 29 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框架排名
2013/07/04 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python的print用法示例
2014/02/11 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
django之自定义软删除Model的方法
2019/08/14 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python函数超时自动退出的实操方法
2020/12/28 Python
与UNIX有关的几个名词
2015/09/17 面试题
校园演讲稿汇总
2014/05/21 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
应届生面试求职信
2014/07/02 职场文书
课外活动总结范文
2014/07/09 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
python 中的@运算符使用
2021/05/26 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python