在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;
                                }