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

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

(0)

相关推荐

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

    刚接触echarts不久,在使用过程中遇到了2个难点, 1.每个节点显示动态数据,这个其实可以通过配置项完成,在series数据绑定中,可以使用原本的配置项itemStyle中的标签格式化完成,如下: 代码如下,如果需要修改文字显示的样式,则需另外配置项(如font-style,font-weigth等)完成 { name: '其中:少数民族', type: 'line', data: ssmz, markPoint : { data : [ {type : 'max', name: '最大值'

  • 在vue中使用Echarts利用watch做动态数据渲染操作

    依旧直接上代码- 首先安装引入Echarts,我是直接把Echarts挂到VUE全局变量上了 //引入echarts import Vue from 'vue'; import echarts from 'echarts'; Vue.prototype.$echarts = echarts; <template> <div class="demo-container"> <div ref="chart_wrap" class="

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • 基于Echarts图表在div动态切换时不显示的解决方式

    简单粗暴,先上图,大概长这样: 在使用vue时有遇到像上图下拉框change事件切换div,change切完后大概会变成这个样子: 上代码: <div class="test"> <p class="title"> <select v-model="selected" v-on:change="change"> <option v-for="option in options

  • vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

  • Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串.但是,放到echarts option.series[0].data里,获取不到数据.在生成的地图上无法看到你从后台获取到的值.翻遍百度和必应,给出的答案五花八门,仍旧未解决问题,最后还是一个同事大牛给解决的,在此分享给大家.希望对大家有帮助,,,, 废话不多说,直接上码: $(function () { var data = []; function setOption(data)

  • JavaScript中动态向表格添加数据

    利用JavaScript ,动态向表格中添加数据,其实方法很简单的,下面给大家分享下实现方法 1. 首先先写出表格的表头和主干部分 <table width="600" border="1" cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>职位</th> <th>

  • Bootstrap treeview实现动态加载数据并添加快捷搜索功能

    写在前面: jQuery多级列表树插件基于Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 具体效果请暂时移步: http://jonmiles.github.io

  • vue实现动态列表尾部添加数据执行动画

    目录 动态列表尾部添加数据执行动画 先上动画 动态数据使用wowjs显示动画 1.通过npm安装 2.在main.js中引入animate.css 动态列表尾部添加数据执行动画 先上动画 动态控制节点数量(目前只显示6个节点) 尾部添加几个item,头部则删除几个item 触发 transition-group 动画 splice 的使用方法 代码: <style lang="scss"> .content {   display: flex;   width: 600px

  • echarts几个公司内部数据可视化图表必收藏

    目录 折线图 日负荷折线图 最大需求表 柱状图 日电量柱状图 分时电量 功率因数 三相温度 水球图 年月日负荷率图 散点图 三相平衡 最近公司有一个需求,要做一个数据可视化的页面,所有的图表都在下面,做这些都是本人自己写的,全部都是真是的项目中的代码,包含有柱状图.折线图.水球图以及散点图,这里直接打出来给大家练手,希望大家多多支持,如果这篇文章对您有用的话,记得收藏 数据: 链接: https://pan.baidu.com/s/1BSjLZkZ7dbsdiwPt4uPqOg 提取码: u1k

随机推荐