关于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 相关文章推荐
jQuery获得子元素个数的方法
Apr 14 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
node实现基于token的身份验证
Apr 09 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
个人站长制做网页常用的php代码
2007/03/03 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python创建线程示例
2014/05/06 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python实现微信自动回复机器人功能
2019/07/11 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python如何安装第三方模块
2020/05/28 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
读书活动总结
2014/04/28 职场文书
银行员工考核评语
2014/12/31 职场文书
行政复议答复书
2015/07/01 职场文书
亲情作文之母爱
2019/09/25 职场文书
导游词之青岛崂山
2019/12/27 职场文书