关于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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
js module大战
Apr 19 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
我的论坛源代码(七)
2006/10/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
php自定义session示例分享
2014/04/22 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
yii数据库的查询方法
2015/12/28 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python str与repr的区别
2013/03/23 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python中count函数简单用法
2020/01/05 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
10张动图学会python循环与递归问题
2021/02/06 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
九年级数学教学反思
2014/02/02 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书