关于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 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery formValidator表单验证
Jan 07 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Node.js的特点详解
Feb 03 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php调用C代码的实现方法
2014/03/11 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JS简单计算器实例
2015/01/20 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
工作个人的自我评价
2014/01/14 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
大专学生求职信
2014/07/04 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
小学教育见习报告
2014/10/31 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
工作简报怎么写
2015/07/21 职场文书
小学班主任研修日志
2015/11/13 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Python函数式编程中itertools模块详解
2021/09/15 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL