关于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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
微信小程序实现多张图片上传功能
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
laravel自定义分页效果
2017/07/23 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python套接字流重定向实例汇总
2016/03/03 Python
python读取和保存图片5种方法对比
2018/09/12 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
学校门卫管理制度
2014/01/30 职场文书
网络书店创业计划书
2014/02/07 职场文书
党员创先争优承诺书
2014/03/26 职场文书
2014年收银工作总结
2014/11/13 职场文书
优秀团队申报材料
2014/12/26 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL