关于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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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/06/21 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP时间函数使用详解
2019/03/21 PHP
javascript 写类方式之七
2009/07/05 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python 实现波浪滤镜特效
2020/12/02 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
运动会演讲稿300字
2014/08/25 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
法定代表人证明书
2014/11/28 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android