在echarts中自定义提示框内容

笔记名称：     在echarts中自定义提示框内容

---

 

---

 

首先是默认的提示信息 （1）	* tooltip配置项示例 */ tooltip: { trigger: 'item' }
然后是默认的提示信息 （2）【显示当前横坐标下多个数据项的提示框】	/** * tooltip配置项示例 */ tooltip: { trigger: 'axis' },
自定义效果（一）	/**      * tooltip配置项示例      */     //用formatter回调函数显示单项数据内容     tooltip: {         trigger: 'item',         formatter: function (params) {             var color = params.color;//图例颜色             var htmlStr ='<div>';             htmlStr += params.name + '<br/>';//x轴的名称             //为了保证和原来的效果一样，这里自己实现了一个点的效果             htmlStr += '<span ></span>';                          //添加一个汉字，这里你可以格式你的数字或者自定义文本内容             htmlStr += params.seriesName + '：'+params.value + '笔';                          htmlStr += '</div>';                          return htmlStr;         }     }
多个格式化 期待效果	方法如下

 

多个格式化 ：

  formatter: function (params, ticket, callback) {
                                 var htmlStr = '';
                                 for(var i=0;i<params.length;i++){
                                   var param = params[i];
                                   var xName = param.name;//x轴的名称
                                   var seriesName = param.seriesName;//图例名称
                                   var value = param.value;//y轴值
                                   var color = param.color;//图例颜色
                                   if(i===0){
                                     htmlStr += xName + '<br/>';//x轴的名称
                                     htmlStr +='<div>';
                                        //为了保证和原来的效果一样，这里自己实现了一个点的效果
                                        htmlStr += '<span min-height: 16pt; font-size: 12pt; font-family: Consolas;">+color+';"></span>';
                                        //圆点后面显示的文本
                                        htmlStr += seriesName + '：' + value + '万元';
                                        htmlStr += '</div>';
                                   }else{
                                   /*   htmlStr += xName + '<br/>';//x轴的名称 */
                                          htmlStr +='<div>';
                                             //为了保证和原来的效果一样，这里自己实现了一个点的效果
                                             htmlStr += '<span min-height: 16pt; font-size: 12pt; font-family: Consolas;">+color+';"></span>';
                                             //圆点后面显示的文本
                                             htmlStr += seriesName + '：' + value + '%';
                                        htmlStr += '</div>';
                                   }
                                   
                                 }
                                 return htmlStr;
                                }

 

 

---