关于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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
JavaScript函数详解
Nov 17 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
简单的渐变轮播插件
Jan 12 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python实现的分层随机抽样案例
2020/02/25 Python
python关于变量名的基础知识点
2020/03/03 Python
python实现梯度下降法
2020/03/24 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
测试工程师职业规划书
2014/02/06 职场文书
作文评语大全
2014/04/23 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
指导老师鉴定意见
2015/06/05 职场文书