由于业务需求,现在要自定义tootips;

设计稿如下:

代码如下:

  1. app.title = '坐标轴刻度与标签对齐';
  2. var str1 = "top:-20px;border:0px solid #000;position:relative;width:100px;height:60px;line-height:60px;background:rgba(50,50,50,0.7);;border-radius:4px;text-align:center;";
  3. var arrow="position:absolute;color:rgba(50,50,50,0.7);width: 0px;height:0px;height:0px;line-height: 0px;border-width: 10px 15px 0;border-style: solid dashed dashed dashed;border-left-color: transparent;border-right-color: transparent;bottom: -10px;right: 50%;margin-right:-15px";
  4. option = {
  5. color: ['#3398DB'],
  6. tooltip : {
  7. trigger: 'item',
  8. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  9. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  10. },
  11. position:"top",
  12. formatter:function(params)
  13. {
  14.  
  15. return "<div style='"+str1+"'><div style='"+arrow+"'></div>"+params.value+"</div>";
  16. },
  17. backgroundColor:'transparent'
  18. },
  19. grid: {
  20. left: '3%',
  21. right: '4%',
  22. bottom: '3%',
  23. containLabel: true
  24. },
  25. xAxis : [
  26. {
  27. type : 'category',
  28. data : ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30','13:35','13:40','13:45','13:50','13:55'],
  29. axisTick: {
  30. alignWithLabel: true
  31. }
  32. }
  33. ],
  34. yAxis : [
  35. {
  36. // type : 'category',
  37. // data : ['10','20','30','40'],
  38. axisTick: {
  39. alignWithLabel: true
  40. }
  41. }
  42. ],
  43. series : [
  44. {
  45. name:'直接访问',
  46. type:'bar',
  47. barWidth: '40%',
  48. data:[1, 3, 2, 3, 4, 2, 1,3,3,2,3,2]
  49. },
  50.  
  51. ],
  52. label: {
  53. normal: {
  54. show: true,
  55. position: 'top',
  56. formatter: '{c}'
  57. }
  58. },
  59. itemStyle: {
  60. normal: {
  61.  
  62. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  63. offset: 0,
  64. color: 'rgba(17, 168,171, 1)'
  65. }, {
  66. offset: 1,
  67. color: 'rgba(17, 168,171, 0.1)'
  68. }]),
  69. shadowColor: 'rgba(0, 0, 0, 0.1)',
  70. shadowBlur: 10
  71. }
  72. }
  73. };

更多 :http://gallery.echartsjs.com/editor.html?c=xB1DgDmtmb

Echarts自定义tootips的更多相关文章

  1. echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

    echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...

  2. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

  3. Echarts自定义折线图例,增加选中功能

    用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...

  4. Echarts 自定义legend图片,修改点击之后的颜色图解

    第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片 后来我想了个法子,就是先获取到这个 ...

  5. echarts自定义悬浮框的显示

    最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...

  6. echarts自定义折线图横坐标时间间隔踩坑总结

    折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...

  7. echarts自定义tooltip显示

    使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...

  8. 学习笔记-echarts自定义背景图片

    困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...

  9. echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕

    -------tip1-------- 在 tooltip  里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...

随机推荐

  1. 【java】java基本用法记录

    java用法总结 计时 long startTime = System.nanoTime(); solution.process(inputFile); long endTime = System.n ...

  2. struts2-第二章-拦截器

    一,回顾 (1)默认action,404问题;<default-action-ref name="action 名称"/> (2)模块化,package,struts. ...

  3. MySQL查看所有连接的客户端ip

    ) AS host_name,state,count(*) FROM information_schema.processlist GROUP BY state,host_name;

  4. php框架rbac功能分析

    四大php框架rbac功能分析对比

  5. rpm和yum软件管理

    rpm简介 数据库管理工具,通过读取数据库,判断软件是否安装,如已安装可读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Package Manager(递归 ...

  6. Redis持久化之RDB

    本文及后续文章,Redis版本均是v3.2.8 上篇文章介绍了RDB的优缺点,我们先来回顾下RDB的主要原理,在某个时间点把内存中所有数据保存到磁盘文件中,这个过程既可以通过人工输入命令执行,也可以让 ...

  7. .net core 上传文件大小限制 webconfig

    <?xml version="1.0" encoding="utf-8"?><configuration> <location p ...

  8. 20165235 实现pwd功能

    20165235 实现pwd功能 要求 学习pwd命令 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3.实现mypwd 测试mypwd 实现过程 pwd是将当前的文件目录 ...

  9. 周一干货~手把手教你安装 Visual Studio 安卓模拟器

    干货~手把手教你安装 Visual Studio 安卓模拟器 转 http://mini.eastday.com/mobile/171107134734194.html# 今天软妹为大家带来一篇来自M ...

  10. AngularJS多个ng-app只解析第一个的问题

    <div id="1" ng-app="myApp" ng-controller="ctrl"> <table> & ...