刚接触echarts不久,在使用过程中遇到了2个难点,

    1、每个节点显示动态数据,这个其实可以通过配置项完成,在series数据绑定中,可以使用原本的配置项itemStyle中的标签格式化完成,如下:

代码如下,如果需要修改文字显示的样式,则需另外配置项(如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格式化文本提示的时候,需要自己写一个函数进行格式化判断之后显示

代码如下:

{
      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在节点显示动态数据及添加提示文本所遇到的问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

关于echarts在节点显示动态数据及添加提示文本所遇到的问题的更多相关文章

  1. vue中echarts关系图动态增删节点以及连线方式

    这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. 文本链接逐个出现的js脚本

    浏览网站时发现这个代码,非常的不错,高度为20的,文本广告调用代码:

  3. ECharts设置x轴刻度间隔的2种解决方法

    在初步接触Echarts时,经常遇到设置x轴刻度间隔的问题,这篇文章主要给大家介绍了关于ECharts设置x轴刻度间隔的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  4. Python实现文本特征提取的方法详解

    这篇文章主要为大家详细介绍了Python实现提取四种不同文本特征的方法,有字典文本特征提取、英文文本特征提取、中文文本特征提取和TF-IDF 文本特征提取,感兴趣的可以了解一下

  5. 基于文本的留言簿

    固然基数据库的留言簿可以作得很漂亮,而且也更好管理。但是对于那些没有数据库空间的朋友们来说,基于文本的留言簿也完成可以适用于个人站来使用。而且只要我们努力去做同样可以做得很好,甚至可以说丝毫不比基于数据库的留言簿差。在这里我向介绍一个基于文本的留言簿。反应留言表单的note.htm文件;最终处理留言信息的note.php文件。

  6. 利用Echarts实现图例显示百分比效果

    EChart开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart实现图例中显示百分比的效果,感兴趣的可以学习一下

  7. 基于Python实现文本文件转Excel

    Excel文件是我们常用的一种文件,在工作中使用非常频繁。Excel中有许多强大工具,因此用Excel来处理文件会给我们带来很多便捷。本文就来和大家分享一下Python实现文本文件转Excel的方法,感兴趣的可以了解一下

  8. node.js实现复制文本到剪切板的功能

    这篇文章主要给大家介绍了node.js实现复制文本到剪切板的功能,文中介绍的非常详细,并给出示例代码,相信对大家具有一定的参考借鉴价值,有需要的朋友们下面来一起看看吧。

  9. vue-cli3+echarts实现渐变色仪表盘组件封装

    这篇文章主要为大家详细介绍了vue-cli3+echarts实现渐变色仪表盘组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法

    这篇文章主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部