关于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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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实现的增强性mhash函数
2015/05/27 PHP
php实现的操作excel类详解
2016/01/15 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
pycharm的console输入实现换行的方法
2019/01/16 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
在python中使用nohup命令说明
2020/04/16 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
高级编程求职信模板
2014/02/16 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
董事长助理岗位职责
2015/02/11 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python