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

weixin_38048154 2016-09-21 12:09:17
在将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";   } },   } } 结果的出来的鼠标经过每个折点都会显示折线的名。改怎样去掉鼠标经过这个问题?
...全文
898 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
前导课程:      《Java工程师系列课程》前4部课程内容:       本课程是《Java工程师系列课程》的第7部分,主要讲解Java实际开发过程中常用类,特别是各种工具类的使用。熟练掌握这些类的使用方法,能够大幅度提高编程效率。同时还在课程中穿插讲解了很多Java语言的设计思想和理念,深刻理解并掌握这些编程思想能够从根本上提高编程水平和解决问题的能力。在课程的末尾还安排了国际化软件实战项目。       本课程涉及的主要内容如下表所示:课程说明:      在开发Java程序的过程中,无论做什么类型的项目,都会用到各种工具类来解决一些实际问题。这些工具类被广泛的应用与各种行业软件的开发。比如我们经常会用BigDecimal类来的完成浮点数的精确计算,也会用Formatter类完成文本、数字、日期的格式化操作等等。      为了能够让学员迅速掌握这些工具类的使用,我们特意开发了这门视频课程,视频中详细讲解了20余种常用工具类的使用规则。此外,在课程中,还讲解了很多Java语言的设计思想和理念,可以让学员在听课过程中能够对Java语言有更加深刻的理解和认识。      最后,本课程还安排了一个小型国际化软件的实战项目,通过实战让学员掌握国际化软件的开发理念和实际操作流程预期效果:      认真学习完本课程,学员可以掌握20种Java实战开发中常用类的使用方法,实实在在提高实战水平,完成从菜鸟到高手的华丽转变。配套福利:中英文双语版本自助购物软件的完整源码环境配置要求:      学习本课程需安装JDK13或更高版本的JDK,以便程序能正确运行,建议使用IntelliJ IDEA 2019.1.2或更高版本的开发工具。     因有合作协议约束,《穆哥学堂》只提供PDF版本的课件!

433

社区成员

发帖
与我相关
我的任务
社区描述
其他技术讨论专区
其他 技术论坛(原bbs)
社区管理员
  • 其他技术讨论专区社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧