最近在使用百度的echarts开发,在使用过程中,遇到点需求,就是希望显示的数据直接在图标上显示,而不是鼠标滑动以后才显示,于是百度搜了下相关的文章正好找到了,然后使用了这个方法是可以用的,所以这里记录下来,方便以后遇到还能找到。

如上图,需要加上以下代码,黑色框里的数字才会显示,默认是需要滑动鼠标到图标上才会显示的。

series: [
{
type: 'bar',
data: [{$series}],
itemStyle:{
normal:{
label:{
show:true, //自动显示数据 ,无需鼠标滑动才显示数据
}
}
}
}

秋峰,phper、java后端开发,javascript前端开发,全栈开发,目前自创业,做项目系统开发,做公众号以及小程序等的开发, 今天就给大家分享到这里,希望对大家有所帮助。欢迎交流 大家相互学习 共同提高 我的 微信号:qiufeng2999

百度的echarts报表数据直接显示的更多相关文章

  1. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  2. 百度地图标注及结合ECharts图谱数据可视化

    本示例中根据企业位置经纬度,在页面右侧百度地图中标注企业名称.同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本.当右侧百度地图缩放拖拽,左侧ECharts图谱根据右侧地图上出现的企业动态 ...

  3. 大数据时代的图表可视化利器——highcharts,D3和百度的echarts

    大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941   ...

  4. Echarts中tooltip解决显示指定数据

    今天开发中遇到一个问题,echarts图表触摸x轴触发tooltip会将x轴上所有的数据展示出来,但是有些场合只需要展示某些数据就可以,并不需要全部展示,如下图: 这里警戒线因为需要开关,所以使用填充 ...

  5. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  6. 将百度的ECharts整合到阿里的Weex中。

    由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库.所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来. 首先,按照Weex官方教程, ...

  7. [个人项目] echarts 实现数据(tooltip)自动轮播插件

    前言 最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架. 因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况 ...

  8. vue组件之echarts报表

    vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...

  9. 使用ECharts报表统计公司考勤加班,大家加班多吗?

    最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...

随机推荐

  1. android dialog使用自定义布局 设置窗体大小位置

    AlertDialog.Builder builder = new Builder(mContext); builder.setTitle("更新进度"); final Layou ...

  2. php中应用redis

    下载软件包wget https://codeload.github.com/phpredis/phpredis/zip/develop mv develop phpredis.zip 解压unzip ...

  3. npm install --save 和 npm install -d的区别

    npm install -d 就是npm install --save-dev npm insatll -s 就是npm install --save 以前一直在纠结一个npm安装的包依赖管理的问题. ...

  4. kubernetes排错系列:(二)、运行很久的kubernetes集群,创建出来的pod都是pending状态

    1.查看pod信息 # 查看pod 报错信息kubectl get pods发现pod的ip没有 生成,也没有分配到某个node节点 # 查看pod详细时间kubectl describe pods发 ...

  5. (3)TinyXml2的详解及使用

        TinyXml2是开源的c++xml文件解析库,简单实用,非常适合存储简单数据,配置文件,对象序列化等数据量不是很大的操作.   (1)DOM DOM(Document Object Mode ...

  6. 安装Redis-cluster-gem install redis报错的解决方案

    错误描述: [root@eshop-cache01 local]# gem install redis ERROR: Loading command: install (LoadError) cann ...

  7. [转] Maven 从命令行获取项目的版本号

    [From]https://blog.soebes.de/blog/2018/06/09/help-plugin/ I bet you have been faced with the situati ...

  8. JS事件中级 --- 拖拽

    http://bbs.zhinengshe.com/thread-1200-1-1.html 要求:实现div块的拖拽 原理:拖拽过程中鼠标点和div块的相对位置保持不变. 需要理解三点: 1. 为什 ...

  9. 串的应用与kmp算法讲解--学习笔记

    串的应用与kmp算法讲解 1. 写作目的 平时学习总结的学习笔记,方便自己理解加深印象.同时希望可以帮到正在学习这方面知识的同学,可以相互学习.新手上路请多关照,如果问题还请不吝赐教. 2. 串的逻辑 ...

  10. 升级Nginx1.14.1以上版本

    一.编译Nginx ①.下载Nginx最新版 目前Nginx最新版是今年11月份发布的 1.9.7 版本,反正1.9+是没有稳定版,所以干脆弄个最新版:   cd /usr/local/src   w ...