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

设计稿如下:

代码如下:

app.title = '坐标轴刻度与标签对齐';
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;";
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";
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'item',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
position:"top",
formatter:function(params)
{ return "<div style='"+str1+"'><div style='"+arrow+"'></div>"+params.value+"</div>";
},
backgroundColor:'transparent'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
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'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
// type : 'category',
// data : ['10','20','30','40'],
axisTick: {
alignWithLabel: true
}
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '40%',
data:[1, 3, 2, 3, 4, 2, 1,3,3,2,3,2]
}, ],
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}'
}
},
itemStyle: {
normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(17, 168,171, 1)'
}, {
offset: 1,
color: 'rgba(17, 168,171, 0.1)'
}]),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
}
};

更多 :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. 详解MariaDB数据库的事务

    1.什么是事务 数据库事务:(database transaction): 事务是由一组SQL语句组成的逻辑处理单元,一组事务中的SQL语句要不全部执行成功功:如果其中某一条执行失败,则这组SQL语句 ...

  2. Django models文件模型变更注意事项(表结构的修改)

    表结构的修改 1.表结构修改后,原来表中已存在的数据,就会出现结构混乱,makemigrations更新表的时候就会出错 比如第一次建模型,漏了一个字段,后来补上了.(经常遇到模型字段修改) 重新ma ...

  3. 总zabbix配置-搭建-邮件报警-微信报警-监控mysql

    Centos7安装Zabbix4.0步骤 官方搭建zabbix4.0的环境要求: 1. 环境搭建LAMP 前提Centos系统安装完成:  确认一下: 1 2 cat /etc/redhat-rele ...

  4. 【转载】OpenSSL 提取 pfx 数字证书公钥与私钥

    转自https://www.cnblogs.com/Irving/p/9551110.html OpenSSL 提取 pfx 数字证书公钥与私钥   由于之前生产环境已经使用了 Identityser ...

  5. 怎样用css写出一个下拉菜单

    <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...

  6. RN和IOS原生端交互

    1.RCTBridgeModule #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" #imp ...

  7. 使用Kazoo操作ZooKeeper服务治理

    单机服务的可靠性及可扩展性有限,某台服务宕机可能会影响整个系统的正常使用:分布式服务能够有效地解决这一问题,但同时分布式服务也会带来一些新的问题,如:服务发现(新增或者删除了服务如何确保能让客户端知道 ...

  8. linux 访问到对应的接口

    8080端口已经打开. 8080端口已被监听 telnet 192.168.163.128 8080   成功 也可以将防火墙关闭,这样所有的接口已经开放,不会再被拦截.这种情况下只要8080端口被某 ...

  9. Win10家庭版WindowsUpdate属性为灰色

    一般的取消Windows更新只需要打开任务管理器,点击服务 然后点击左下角的打开服务 找到WindowsUpdate,右键属性 按照正常的电脑只要在启动类型中选择禁用,然后在恢复里的第一次操作选择无操 ...

  10. maven项目如何手动打包

    1.确定打包对象:dubbo-admin 2.进入打包对象目录,复制目录路径(D:\H\dubbox-master\dubbo-admin). 可以看到该对象为典型的maven目录,此时没有“targ ...