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>
猜你喜欢
