ECharts 折线图 tooltip 自定义显示的内容

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34357835/article/details/80006035

下图这个折线图是以置装率数据呈现，为一条折线图

但是我想点上去，tooltip上显示其它的数据，比如总人数和已置装的人数

就像下面这个

代码实现：

  function ok(){
                    var lineChartdefine = echarts.init(document.getElementById('lineChart'));
                    lineChartdefine.showLoading();

                    $.ajax({

                        //获取折线图中的数据

                        url: '**************',
                        type: 'get',
                        success: function(result){
                               lineChartdefine.hideLoading();                             

                        var map=result.data;

                                //x轴显示的内容

                                var shortName=map.shortName;

                    //未置装
                    //var hjWZZList=map.hjWZZList;
                    //已置装
                    var hjYHZList=map.hjYHZList;
                    //总人数
                    var hjZRSList=map.hjZRSList;
                    //置装率
                    var hzlList_d=map.hzlList;
                    var hzlList = new Array();
                    for(var i = 0; i < hzlList_d.length && i < hjYHZList.length && i < hjZRSList.length; i++ ){
                    hzlList[i] = {
                    value: hzlList_d[i],
                    tooltip:{

                    formatter:'{b}<br/>置装率：{c}%<br/>已置装：'+hjYHZList[i]+'<br/>总人          数：'+hjZRSList[i]

                    }
                    };
                    }
                    var lineOption = {
                        tooltip: {
                        },
                        grid: {
                            top:'3%',
                            bottom:'10%',
                            left: '3%',
                            right: '4%',
                            containLabel: true,
                            bottom: '18%'
                        },
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : shortName,
                                axisLabel : {
            interval : 0,
            rotate : -60
      }
                            }
                        ],
                        yAxis : [
                            {
                              type: 'value',
                                  axisLabel: {
                                      formatter: '{value}%'
                                   }
                            }
                        ],
                        dataZoom : [ {
       show : true,
start : 0,
end : 100
}, {
type : 'inside',
start : 0,
end : 100
}, ],
   series: [
   {   
    name:'置装率',
    type:'line',
    data:hzlList
   }
    ]
  
                    };
                    
                    lineChartdefine.setOption(lineOption); 
                        }
                    });
                }