1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- https://echarts.baidu.com/option.html#tooltip.formatter -->
  7.     <!-- https://blog.csdn.net/qq_36604180/article/details/79046396 -->
  8.     <!-- 引入 echarts.js -->
  9.     <script src="echarts.min.js"></script>
  10. </head>
  11. <body>
  12.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  13.     <div id="main" style="width: 600px;height:400px;"></div>
  14.     <script type="text/javascript">
  15.         // 基于准备好的dom，初始化echarts实例
  16.         var myChart = echarts.init(document.getElementById('main'));
  18.     //评价标签情况柱状图
  20.     var options = {
  21.             tooltip : {
  22.                 trigger: 'axis',
  23.                 axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  24.                     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  25.                 },
  26.                 // formatter: "{value} ssss" ,
  28.                     formatter: function (params) {
  29.                                          var res = params.name+'<br/>';
  30.                                             var res='<div><p>指标：'+params[0].seriesName +'</p></div>' ;
  31.          //                                        res+='<p>'+'金额'+':'+params[0].data+'</p>';
  32.                                                 res+='<p>'+'剂量'+':'+params[1].data+'</p>';
  33.          //                                        res+='<p>'+'剂量'+':'+params[2].data+'</p>';
  34.          //                                        res+='<p>'+'剂量'+':'+params[3].data+'</p>';
  35.                                          return res;
  37. //      {
  38. //                       var res = datas[0].name + '<br/>', val;
  39. //                       for(var i = 0, length = datas.length; i < length; i++) {
  40. //                             val = (datas[i].value*100) + '%';
  41. //                             res += datas[i].seriesName + '：' + val + '<br/>';
  42. //                         }
  43. //                         return res;
  44. //                    }
  46.                    }
  47.             },
  48.             legend: {
  49.                 data:['好评率']
  50.             },
  51.             grid: {
  52.                 left: '3%',
  53.                 right: '4%',
  54.                 containLabel: true
  55.             },
  56.             xAxis : [
  57.                 {
  58.                     type : 'category',
  59.                     data : ['住户1','住户2','住户3','住户4','住户5','住户6','住户7','住户8','住户9']
  60.                 }
  61.             ],
  62.             yAxis : [
  63.                 {
  64.                     type : 'value',
  65.                     axisLabel: {
  66.                           show: true,
  67.                           interval: 'auto',
  68.                           formatter: function(value){
  69.                               if(value==0)
  70.                                   {
  71.                                   return value;
  72.                                   }else {
  73.                                       return value*100+'%';
  74.                                   }
  75.                           }
  76.                         }
  77.                 }
  78.             ],
  79.             dataZoom : [{
  80.                  show : true,
  81.                  realtime : false,
  82.                  start : 0,
  83.                  end :50
  84.              }],
  85.             series : [
  86.                 {
  87.                     name:'好评率',
  88.                     type:'bar',
  89.                     barWidth:'35',
  90.                     data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
  91.                     itemStyle:{
  92.                         normal:{
  93.                             color:'#ff7000'
  94.                         }
  95.                     },
  96.                     label:{
  97.                         normal:{
  98.                              show:true,
  99.                         position:'insideTop'
  100.                         },
  102.                     }
  103.                 },
  104.                 {
  105.                     name:'好评xxx率',
  106.                     type:'bar',
  107.                     barWidth:'35',
  108.                     data:[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9],
  109.                     itemStyle:{
  110.                         normal:{
  111.                             color:'#ff7000'
  112.                         }
  113.                     },
  114.                     label:{
  115.                         normal:{
  116.                              show:true,
  117.                         position:'insideTop'
  118.                         },
  120.                     }
  121.                 }
  122.             ]
  123.         };
  125.         // 使用刚指定的配置项和数据显示图表。
  126.         myChart.setOption(options);
  127.     </script>
  128. </body>
  129. </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. perf 是怎么计算调用栈的时间的？

    在我真个malloc的执行过程中共调用了8次的syswrite的系统调用,其中有两次来自于__lib_write, 两次来自于__memmove_avx_unaligned,然后__memmove_a ...

  2. AndroidStudio3.0 注解报错Annotation processors must be explicitly declared now. The following dependencies on the compile classpath are found to contain annotation processor.

    把Androidstudio2.2的项目放到3.0里面去了,然后开始报错了. 体验最新版AndroidStudio3.0 Canary 8的时候,发现之前项目的butter knife报错,用到注解的 ...

  3. [洛谷P5205]【模板】多项式开根

    题目大意:给你$n$项多项式$A(x)$,求出$B(x)$满足$B^2(x)\equiv A(x)\pmod{x^n}$ 题解:考虑已经求出$B_0(x)$满足$B_0^2(x)\equiv A(x) ...

  4. POJ3581：Sequence——题解

    http://poj.org/problem?id=3581 给一串数,将其分成三个区间并且颠倒这三个区间,使得新数列字典序最小. 参考:http://blog.csdn.net/libin56842 ...

  5. POJ1422：Air Raid——题解

    http://poj.org/problem?id=1422 题目大意:n个点m条有向边,每条边只能走一次,往点上放人让他们走遍所有边,问至少要多少人. —————————————————————— ...

  6. HDU1561：The more, The Better——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=1561 ACboy很喜欢玩一种战略游戏,在一个地图上,有N座城堡,每座城堡都有一定的宝物,在每次游戏中ACboy允 ...

  7. C++STL简介

    本文仅仅是个人学习的过程中结合网上博文,对STL的整理,也仅仅是简介.仅为个人学习笔记. 一.STL简介(摘自:晨光(Morning)) STL(Standard Template Library), ...

  8. BZOJ2697 特技飞行 【贪心】

    题目链接 BZOJ2697 题解 好水好水的贪心... 容易发现每种特技只表演两次,多表演没有意义,而且差距越长收益越大 然后就可以贪,最大的放两端,次大的往里,然后是第三大....... 证明很简单 ...

  9. POSIX.2 正则表达式

    By francis_hao    Oct 1,2017   这里的正则表达式主要是指扩展正则,也就是egrep(grep -e)用到的正则表达式. 字符 含义 类别说明 | 分割分支,正则表达式会去 ...

  10. java oracle clob string 大字符串存储【转】

    单位用到了oracle存储string类型到数据库里的clob,上网查看资料找到解决方案.如下: public class ClobTest { static String url = "j ...