关于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 编写规范
Mar 03 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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的curl封装类用法实例
2014/11/07 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php微信开发之图片回复功能
2018/06/14 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
python ip正则式
2009/05/07 Python
python中类的一些方法分析
2014/09/25 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
酒店经理职责
2014/01/30 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
工商管理本科生求职信
2014/07/13 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
怎样写观后感
2015/06/19 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
公司岗位说明书
2015/10/08 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python