Echarts自定义tootips
由于业务需求,现在要自定义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的更多相关文章
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
- Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
- Echarts 自定义legend图片,修改点击之后的颜色图解
第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片 后来我想了个法子,就是先获取到这个 ...
- echarts自定义悬浮框的显示
最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...
- echarts自定义折线图横坐标时间间隔踩坑总结
折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryG ...
- echarts自定义tooltip显示
使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...
- 学习笔记-echarts自定义背景图片
困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...
- echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕
-------tip1-------- 在 tooltip 里边配置:拼接字符串: tooltip : { trigger: 'axis', formatter:function(params) { ...
随机推荐
- 常用的user32说明
函数名称 说明 ActiveKeyboardLayout 激活一个不同的键盘布局,该布局必须先由LoadKeyBoardLayout函数装载AdjustWindowRect 根据希望的用户矩形大小来计 ...
- php cookie的问题
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- unity中调试模型时unity崩溃问题
这个问题是在我调试3D模型资源时出现的,每当在Scene场景中调试模型时unity崩溃,出现Unity Bug Reporter页面,反复出现这个问题,很烧脑 对于这个问题我表示很无语,但是经过不断查 ...
- Photoshop 操作
本文主要记录在工作过程中使用ps的一些快捷键或操作顺序 1.ctrl+H:取消标尺 2.ctrl+D:取消选区 3.看矩形尺寸:选中矩形图层 >窗口 >属性(w:宽 H:高) 4.看图层 ...
- tp5 修改默认的分页url
默认分页url:xx.com/xxx?page=1 个人主要感觉不美观,想变成xx.com/xxx/list_1.html这样的 框架本身默认使用的boostrap分页类,目录位置 simplewin ...
- BZOJ2759 一个动态树好题 LCT
题解: 的确是动态树好题 首先由于每个点只有一个出边 这个图构成了基环内向树 我们观察那个同余方程组 一旦形成环的话我们就能知道环上点以及能连向环上点的值是多少了 所以我们只需要用一种结构来维护两个不 ...
- Kubernetes 1.10.0离线安装
讲述如何通过离线的方式安装Kubernetes,主要用于对Kubernetes的研究学习,不建议在生产环境使用,安装包获取地址: 链接:https://pan.baidu.com/s/1nX5_mem ...
- C# dynamic类型序列化和反序列化之Newtonsoft.Json,动态解析远端返回的jSON数据
一.说明 1.Newtonsoft.Json 中的Linq To Json中提供了方便的json数据查询.修改等操作. 例如:JObject,JArray 2.在JObject.FromObject( ...
- ViewState 和字段属性的差异
ViewState是一个字典对象,将控件状态或对象值散列为字符串并在页面中保存为一个或多个隐藏域... PostBack之后字段的值就被清空了而ViewState还在,但ViewState为了保持值需 ...