<!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的更多相关文章

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

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

  2. echart的tooltip自定义换行

    自定义换行,内容很长的时候 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直 ...

  3. DevExpress.XtraGrid.GridControl 实现自定义tooltip

    DevExpress.XtraGrid.GridControl 控件默认的tooltip显示的每一个单元格的文本值,但是实际工作中会出现各种需求.我这里就有一个列是折扣率显示的值是0-1之间的两位小数 ...

  4. echart自定义浮窗 增加点击事件

    一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...

  5. Echart自定义y轴刻度信息2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. echarts自定义tooltip显示

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

  7. C# ListView 自定义ToolTip 显示

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. Echart自定义y轴刻度信息1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. WinForm中使用自定义Tooltip控件

    private ToolTip tooltipCtr; 构造函数中: 隐藏默认的Tooltip:this.ShowCellToolTips = false; this.tooltipCtr = new ...

随机推荐

  1. 【刷题】BZOJ 1717 [Usaco2006 Dec]Milk Patterns 产奶的模式

    Description 农夫John发现他的奶牛产奶的质量一直在变动.经过细致的调查,他发现:虽然他不能预见明天产奶的质量,但连续的若干天的质量有很多重叠.我们称之为一个"模式". ...

  2. 【以前的空间】vijos 1720 阿狸的打字机

    https://www.vijos.org/p/1720 作为一个一个蒟蒻,跪了三个星期,终于在蔡大神的帮助下a了.这题网上的题解很多,不过大都把题解写的太简单了(对因为大神的题解只有三个字:傻叉题) ...

  3. ubuntu10.04 安装gcc4.1.2

    After a bunch of searching to get gcc-4.1 & g++-4.1 in Ubuntu 10.10 (maverick), I found easy wor ...

  4. 基于tcp交互的python聊天程序

    语言:Python 工具:MySQL,Tkinter,图灵机器人 功能:图形聊天工具,可以选择自动回复或者人工回复. 注意:如果运行需要自建mysql数据库表.还有安装各种模块.还有到“图灵机器人”申 ...

  5. poj 2541 Binary Witch

    Binary Witch http://poj.org/problem?id=2541 Time Limit: 1000MS   Memory Limit: 65536K       Descript ...

  6. HDU 5950Recursive sequence ICPC沈阳站

    Recursive sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  7. flask-login源码梳理

  8. C语言数据库-二叉树

    一.定义 二叉树在图论中是这样定义的:二叉树是一个连通的无环图,并且每一个顶点的度不大于3.有根二叉树还要满足根结点的度不大于2.有了根结点之后,每个顶点定义了唯一的父结点,和最多2个子结点.然而,没 ...

  9. Ajax请求Spring Mvc 时总是返回 302 Moved Temporarily

    功能上主要是实现在前台点击保存按钮,单元格变成文本框,修改值后请求后台保存数据.但在做的过程中,ajax 请求总是不能请求到后.打开浏览器调试,查看到http状态码总是返回 http/1.1  302 ...

  10. jmeter进行http压力测试(图文小教程)

    下载地址:http://jmeter.apache.org/download_jmeter.cgi JMeter基于Java开发,需要系统有安装JDK环境.解压后进入bin目录,点击jmeter.ba ...