echart自定义tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- https://echarts.baidu.com/option.html#tooltip.formatter -->
<!-- https://blog.csdn.net/qq_36604180/article/details/79046396 -->
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//评价标签情况柱状图
var options = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
// formatter: "{value} ssss" ,
formatter: function (params) {
var res = params.name+'<br/>';
var res='<div><p>指标：'+params[0].seriesName +'</p></div>' ;
// res+='<p>'+'金额'+':'+params[0].data+'</p>';
res+='<p>'+'剂量'+':'+params[1].data+'</p>';
// res+='<p>'+'剂量'+':'+params[2].data+'</p>';
// res+='<p>'+'剂量'+':'+params[3].data+'</p>';
return res;
// {
// var res = datas[0].name + '<br/>', val;
// for(var i = 0, length = datas.length; i < length; i++) {
// val = (datas[i].value*100) + '%';
// res += datas[i].seriesName + '：' + val + '<br/>';
// }
// return res;
// }
}
},
legend: {
data:['好评率']
},
grid: {
left: '3%',
right: '4%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['住户1','住户2','住户3','住户4','住户5','住户6','住户7','住户8','住户9']
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: function(value){
if(value==0)
{
return value;
}else {
return value*100+'%';
}
}
}
}
],
dataZoom : [{
show : true,
realtime : false,
start : 0,
end :50
}],
series : [
{
name:'好评率',
type:'bar',
barWidth:'35',
data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
itemStyle:{
normal:{
color:'#ff7000'
}
},
label:{
normal:{
show:true,
position:'insideTop'
},
}
},
{
name:'好评xxx率',
type:'bar',
barWidth:'35',
data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
itemStyle:{
normal:{
color:'#ff7000'
}
},
label:{
normal:{
show:true,
position:'insideTop'
},
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(options);
</script>
</body>
</html>
echart自定义tooltip的更多相关文章
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
- echart的tooltip自定义换行
自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...
- DevExpress.XtraGrid.GridControl 实现自定义tooltip
DevExpress.XtraGrid.GridControl 控件默认的tooltip显示的每一个单元格的文本值,但是实际工作中会出现各种需求.我这里就有一个列是折扣率显示的值是0-1之间的两位小数 ...
- echart自定义浮窗 增加点击事件
一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- echarts自定义tooltip显示
使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...
- C# ListView 自定义ToolTip 显示
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Echart自定义y轴刻度信息1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- WinForm中使用自定义Tooltip控件
private ToolTip tooltipCtr; 构造函数中: 隐藏默认的Tooltip:this.ShowCellToolTips = false; this.tooltipCtr = new ...
随机推荐
- bzoj3676-回文串
给出一个字符串,一个子串的出现值为字串出现次数乘以长度,求所有回文串中最大的出现值. 分析 回文自动机模版题,建出自动机后直接统计即可. 回文自动机 类似于后缀自动机,不过一条边\((u,v,c)\) ...
- HUAS 1483 mex(莫队算法)
考虑莫队算法,对于区间减小的情况,可以O(1)解决.对于区间增加的情况,可能需要O(n)解决.好在数据不卡莫队. 1200ms过了. 离线+线段树 760ms过了. # include <cst ...
- 【bzoj2060】[Usaco2010 Nov]Visiting Cows拜访奶牛 树形dp
题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<=N<=50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统 ...
- OI入门
学习顺序: 1.高精度计算: 高精度计算(一) 高精度计算练习1 高精度计算(二) 高精度计算练习2 2.递推 3.递归 递归算法 递归练习 4.搜索与回溯 搜索与回溯算法(一) 搜索与回溯练习(一) ...
- （三）Redis列表List操作
List全部命令如下: lset key index value # 将列表key下标为index的元素的值设置为value,当 index 参数超出范围,或对一个空列表(key不存在)进行lset时 ...
- [洛谷P4070][SDOI2016]生成魔咒
题目大意:有一个字符串,每次在末尾加入一个字符,问当前共有多少个本质不同的字串 题解:$SAM$,就是问插入这个字符后,多了多少个字串,就是当前这个点的$Right$数组大小. 卡点:无 C++ Co ...
- BZOJ4651 & 洛谷1173 & UOJ220：[NOI2016]网格——题解（附debug数据）
https://www.lydsy.com/JudgeOnline/problem.php?id=4651 https://www.luogu.org/problemnew/show/P1173#su ...
- BZOJ4196：[NOI2015]软件包管理器——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=4196 https://www.luogu.org/problemnew/show/P2146 你决定 ...
- JavaScript定义类与对象的一些方法
最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...
- 一篇博文将JavaScript尽收眼底
简介 这篇文章是为专业程序员介绍的JavaScript语言的,它是一种小巧的语言,如果你熟悉其他的编程语言,那么这篇文章对你来讲不是那么难以理解. JavaScript不是Java,他们是两门完全不同 ...