echarts中bar和line混合图形自定义悬浮内容及样式，pie图自定义悬浮内容及样式

echarts学习

1. 引入echarts

<script type="text/javascript" src="/static/online/echarts.min.js"></script>

2. 页面定义两个区域用于放置图表

	<div id="container" style="width: 800px;height: 300px;"></div>
	<div id="container1" style="width: 800px;height: 300px;"></div>

3. 选择器并初始化echarts

//选择器
				var dom = document.getElementById("container");
					//初始化echarts
				var myChart = echarts.init(dom);

4.定义数据

/* 使用假数据 */
				var s_old=[{'name':'A','value':'1','area':'12.34','typename':'1电梯2楼4户'}
				,{'name':'B','value':'2','area':'19.21','typename':'0电梯2楼4户'}
				,{'name':'C','value':'3','area':'10.34','typename':'2电梯4楼8户'}];
				/* 结束 */
				var data=[];//横轴
				var value=[];//套数数量 value
				var area=[];// 面积 area
				for (var x=0;x<s_old.length;x++){
					data.push(s_old[x].name);
					value.push(s_old[x].value);
					area.push(s_old[x].area);
				}

5. 设置option

var option;
				option= {
					title: {
						text: '梯户统计',
						left: 'center'
					},
					tooltip: {//用于自定义悬浮内容
						trigger: 'axis',//item表示分开展示，axis集中展示
						formatter:(params,ticket,callback)=>{				
									  
						}
					},
					legend: {//图例，X轴方向上的位置以及在Y轴方向上的位置
						data: ['套数', '面积'],
						x:'center',
						y:'bottom',
					},
					grid: {//配置项：图表离容器的距离
						show: true,
						top:50,	//图表离容器顶部的距离	
					},
					xAxis: [//x轴设置
						{
							type: 'category',//'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
							// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
							// 'log' 对数轴。适用于对数数据。
							data: data,
							axisPointer: {//用于在直角坐标系的 x 坐标轴上设置坐标轴指示器。
								type: 'shadow'//'line' 直线指示器,'shadow' 阴影指示器
							},
					     
							axisLabel: {//单轴刻度标签的相关设置
								//x轴文字的配置
								show: true,//是否显示单轴的刻度标签。
								interval: 0,//使x轴文字显示全,单轴刻度标签的显示间隔，在类目轴中有效。
							}
						}
				  ],
				 //坐标轴，包含数量和面积，需要两个纵坐标，是一个数组
				  yAxis: [
				    {
				      type: 'value',//'value' ：数值轴，适用于连续数据。'category' ：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。'time' ：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
					  // 'log' ：对数轴。适用于对数数据。
				      name: '',
				      interval: 5,
				      axisLabel: {
				        formatter: '{value}'
				      },
					  min: (value) => {
					      return 0
					    },
					    max: (value) => {
					      return value.max
					    }
				    },
				    {
				      type: 'value',
				      name: '',
				      interval: 5,
				      axisLabel: {
				        formatter: '{value}'
				      },
					  min: (value) => {
					      return 0
					    },
					    max: (value) => {
					      return value.max
					    }
				    }
				  ],
				  //利用series设置不同指标的样式，一个柱状，一个现状.series系列至少包括一组数值，图表类型（series.type），以及其他的关于这些数据如何映射成图的参数
				  series: [
				    {
				      name: '套数',
				      type: 'bar',
				      tooltip: {
				        valueFormatter: function (value) {
				          return value;
				        }
				      },
				      data: value
				    },
				    {
				      name: '面积',
				      type: 'line',
				      yAxisIndex: 1,
				      tooltip: {
				        valueFormatter: function (value) {
				          return value;
				        }
				      },
				      data: area
				    }
				  ]
				};
				

if (option && typeof option === 'object') {//判断option是否为空并且是否是一个对象
				    myChart.setOption(option);
					window.onresize = myChart.resize;
				}

6. 添加自定义悬浮内容

 tooltip: {
						    trigger: 'axis',
							formatter:(params,ticket,callback)=>{
								var htmlStr = "";
							 	var nameT="";
								console.log(params);
								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; //图例颜色
										  // console.log('param',param)
							  
									 //判断横轴名字
									  for(var x=0;x<s_old.length;x++){
										  if (xName==s_old[x].name){
											  nameT=s_old[x].typename;
										  }
							 	 }
							 
							htmlStr +='<li style="color:'+color+'; list-style-type: disc;">'+seriesName+':'+value+'</li>';
							  }
							  
							return '<div style="font-weight:bold;">'+nameT+'</div>'+htmlStr;	
						  },

7. 饼图添加自定义悬浮内容

var dom1 = document.getElementById("container1");
						var myChart1 = echarts.init(dom1);
						var app1 = {};
						var option1;
						
						
						option1 = {
							title: {
							    text: '占比',
							    // subtext: 'Fake Data',
							    left: 'center'
							  },
							  tooltip: {
							    trigger: 'item',
								
								
								// formatter: '{a} <br/>{b} : {c} ({d}%)'
								formatter:function(params){
									var htmlStr = "";
									var nameT="";
									console.log(params);
									var xName=params.name;
									var value=params.value;
									var color=params.color;
									var percent=params.percent;
									  
									 //判断横轴名字
									  for(var x=0;x<s_old.length;x++){
										  if (xName==s_old[x].name){
											  nameT=s_old[x].typename;
										  }
									  }
									 
									
										// htmlStr +='<li style="color:'+color+'; list-style-type: disc;">'+xName+'-'+nameT+':'+percent+'%'+'</li>';
										
									  htmlStr +='<li style="color:'+color+'; list-style-type: disc;">'+nameT+':'+percent+'%'+'</li>';
									return '户型占比'+"<br/>"+htmlStr;	
									  }
									  
									
								
							  },
							  legend: {
							    // orient: 'vertical',
							    // left: 'left'
								show:false,
							  },
							  grid: {
							  	top:10,		
							  },
							  series: [
							    {
							      name: '户型占比',
							      type: 'pie',
							      radius: '50%',
							      data: s_old,
							      emphasis: {
							        itemStyle: {
							          shadowBlur: 10,
							          shadowOffsetX: 0,
							          shadowColor: 'rgba(0, 0, 0, 0.5)'
							        }
							      }
							    }
							  ]
						};
						
						if (option1 && typeof option1 === 'object') {
						    myChart1.setOption(option1);
						}else{
						layer.msg(s_old.msg);
					    }
				

注意事项

1. 图表不显示时，检查一下div的style中宽度和高度是否设置正确，当没有父盒子的时候，不能使用百分比