关于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 相关文章推荐
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
用Node提供静态文件服务的方法
Jul 06 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
JavaScript canvas绘制折线图
Feb 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php实现分页显示
2015/11/03 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python如何随机生成高强度密码
2020/08/19 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
好邻里事迹材料
2014/01/16 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
个人年终总结范文
2015/03/09 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
什么是SOLID
2022/03/24 Javascript