echarts label的显示,如何让formatter传的值只显示最后一个

琉璃水的杯 发布于 2016/09/21 12:09
阅读 4K+
收藏 0

在将echarts改为只显示最后一个折点,并且显示名称为折线的名字,我借用了label的显示,设置如下:

//这是在官网调试然后下载的
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    
    title: {
        text: '系统性能',
        left:'center',
        top:'10%'
    },
    tooltip: {
        trigger: 'xAxis',
		show:true,
		showContent:true,
		enterable :false
    },
    
    grid: {
        left: '3%',
        right: '10%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine:{show: false},
        data: ['2016/9/19 10:10:23 ','',' 24:10','',' 00:10','','2016/9/20 10:10:23']
    },
    yAxis: {
        type: 'value',
        splitLine:{show: false}
    },
    

    series: [
        {
            name:'HARD DISK',
            type:'line',
            stack: '总量',
       	data:[ {
				value:134,
				symbol: 'none'
				},{
				value:100,
				symbol: 'none'
						},{
										value:20,
										symbol: 'none'
									},{
										value:43,
										symbol: 'none'
									},{
										value:66,
										symbol: 'none'
									},
	         {value:80,symbol: 'none'},{value:190, symbol:'circle',symbolSize:8}],
							 lineStyle:{
                            normal:{
                                width:2,  //连线粗细
                                color: "#00479d"  //连线颜色
                            }
                        },
								itemStyle: {
									normal: {
										color: function(params) {
					
									              var colorList = ['','', '','','','','#00479d'];
											      return colorList[params.dataIndex%7];//params.dataIndex
										                        }
										,label: {
												show: true,
												position: 'right',
												textStyle : {
													fontSize : '15',
													fontFamily : '微软雅黑',
												
													color : '#000',
												            },
												formatter: function(params){
												 console.log(params + ','+typeof(params));
													return "HARD DISK";
																		   }
												 },
				
											  }
								            },
								  },
        {
            name:'MEMORY',
            type:'line',
            stack: '总量',
          	data:[ {
										value:134,
										symbol: 'none'
									  },{
										value:100,
										symbol: 'none'
									},{
										value:20,
										symbol: 'none'
									},{
										value:43,
										symbol: 'none'
									},{
										value:66,
										symbol: 'none'
									},{value:80,symbol: 'none'},{value:190, symbol:'circle',symbolSize:8}],
								 lineStyle:{
            normal:{
                width:2,  //连线粗细
                color: "#f52244"  //连线颜色
            }
        },
								itemStyle: {
									normal: {
										color: function(params) {
					
									              var colorList = ['','', '','','','','#f52244'];
											      return colorList[params.dataIndex%7];//params.dataIndex
										                        }
										,label: {
												show: true,
												position: 'right',
												textStyle : {
													fontSize : '15',
													fontFamily : '微软雅黑',

													color : '#000',
												            },
												formatter: function(params){
												 console.log(params + ','+typeof(params));
													return "MEMORY";
																		   }
												 },
				
											  }
								            },
								  },
       
        {
            name:'CPU',
            type:'line',
            stack: '总量',
            	   //设置折线中折点的形状和颜色,并给最后一个点加上线的名称 
										data:[ {
												value:24,
												symbol: 'none'
											},
											{
												value:224,
												symbol: 'none'
											},{
												value:200,
												symbol: 'none'
											},{
												value:209,
												symbol: 'none'
											},{
												value:143,
												symbol: 'none'
											},{
												value:86,
												symbol: 'none'
											},{value:90, symbol:'circle',symbolSize:8}],
									 lineStyle:{
                                    normal:{
                                        width:2,  //连线粗细
                                        color: "#ffca02"  //连线颜色
                                    }
                                },
                        										itemStyle: {
											normal: {
												color: function(params) {
							
												   var colorList = [
													  '','', '','', '','','#ffca02'
													];
													return colorList[params.dataIndex%7];//params.dataIndex
												}
											,label: {
													show: true,
													position: 'right',
													textStyle : {
														fontSize : '15',
														fontFamily : '微软雅黑',
														
														color : '#000',
													},
													formatter: function(params){
													 console.log(params + ','+typeof(params));
														return "CPU";
																			   }
													},
										
												   }
										}
								}
							]
						};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>



itemStyle: {
normal: {
color: function(params) {

  var colorList = [
 '','', '','', '','','pink'
];
return colorList[params.dataIndex%7];//params.dataIndex
}
,label: {
show: true,
position: 'right',
textStyle : {
fontSize : '15',
fontFamily : '微软雅黑',
fontWeight : 'bold',
color : '#28c6de',
},
formatter: function(params){
console.log(params + ','+typeof(params));
return "CPU";
  }
},

  }
}
结果的出来的鼠标经过每个折点都会显示折线的名。改怎样去掉鼠标经过这个问题?


加载中
返回顶部
顶部