关于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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
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实现微信支付之企业付款
2018/05/30 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python开发中module模块用法实例分析
2015/11/12 Python
Django的信号机制详解
2017/05/05 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
实体的生命周期
2013/08/31 面试题
考生诚信考试承诺书
2014/05/23 职场文书
运动会拉拉队口号
2014/06/09 职场文书
教师节倡议书
2014/08/30 职场文书
地理科学专业自荐信
2014/09/01 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015大学生求职信范文
2015/03/20 职场文书
光荣之路观后感
2015/06/12 职场文书
参加招聘会后的感想
2015/08/10 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫
git中cherry-pick命令的使用教程
2022/06/25 Servers