echarts label的显示，如何让formatter传的值只显示最后一个-CSDN论坛

⋅golang 复杂json Unmarshal后如何取值 ⋅请问这是什么问题，为什么进入死循环 ⋅一个多任务服务，是做成单个exe好，还是分开各做成一个exe好？ 更多帖子 关注私信空间博客 weixin_38048154 等级 本版专家分：0 结帖率 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";
   }
},

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




2016-09-21 12:09:17

点赞只看楼主引用举报楼主收起

展开阅读全文