CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析
2014-08-22 11:46
274 查看
ECharts问题描述:
问题就是折线图上的点是显示的,有人问能不能一开始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示?
如下图所示:
分析:让折线上的点不显示可以让symbol属性为"none"。考虑到当点击的时候让折线上的点显示出来,那么可以再on事件中重新加载option事件。当click到折线关键点时候可以重新加载数据中symbol属性,设置成你想要的形状,并且一定要重新加载setOption事件。
那么代码如下:
最终实现结果:
上面代码是option中的代码,具体页面参考:
http://echarts.baidu.com/doc/example/event.html#
问题就是折线图上的点是显示的,有人问能不能一开始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示?
如下图所示:
分析:让折线上的点不显示可以让symbol属性为"none"。考虑到当点击的时候让折线上的点显示出来,那么可以再on事件中重新加载option事件。当click到折线关键点时候可以重新加载数据中symbol属性,设置成你想要的形状,并且一定要重新加载setOption事件。
{self} on | {string} eventName, {Function}eventListener | 事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有: REFRESH(刷新),RESTORE(还原),RESIZE(显示空间变化),CLICK(点击),HOVER(悬浮), DATA_CHANGED(数据修改),DATA_VIEW_CHANGED(数据视图修改), MAGIC_TYPE_CHANGED(动态类型切换),TIMELINE_CHANGED(时间轴变化), DATA_ZOOM(数据区域缩放),DATA_RANGE(值域漫游),MAP_ROAM(地图漫游), LEGEND_SELECTED(图例选择),MAP_SELECTED(地图选择),PIE_SELECTED(饼图选择) |
option = { tooltip : { trigger: 'item' }, legend: { data:['最高','最低'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {readOnly:false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, dataZoom : { show : true, realtime : true, start : 40, end : 60 }, xAxis : [ { type : 'category', boundaryGap : true, data : function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push('2013-03-' + i); } return list; }() } ], yAxis : [ { type : 'value' } ], series : [ { name:'最高', type:'line', data:function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push({value:Math.round(Math.random()* 30) + 30,symbol:'none'}); } return list; }() }, { name:'最低', type:'bar', data:function (){ var list = []; for (var i = 1; i <= 30; i++) { list.push(Math.round(Math.random()* 10)); } return list; }() } ] }; var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.CLICK, function(params){ option.series[params.seriesIndex].data[params.dataIndex].symbol='star' myChart.setOption(option); });
最终实现结果:
上面代码是option中的代码,具体页面参考:
http://echarts.baidu.com/doc/example/event.html#
相关文章推荐
- CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析
- CSDN开源夏令营 百度数据可视化实践 ECharts(3)
- CSDN开源夏令营 百度数据可视化实践 ECharts(2)
- CSDN开源夏令营 百度数据可视化实践 ECharts(6) 期中总结
- CSDN开源夏令营 百度数据可视化实践 ECharts(4)
- CSDN开源夏令营 百度数据可视化实践 ECharts(5)
- CSDN开源夏令营 百度数据可视化实践 ECharts 11 (期末总结)
- CSDN开源夏令营 百度数据可视化实践 ECharts(1)
- CSDN开源夏令营 百度数据可视化实践 ECharts(8)
- CSDN开源夏令营 百度数据可视化实践 ECharts(7)
- CSDN开源夏令营 百度数据可视化实践 前言
- 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
- 百度开源的数据可视化工具eCharts真心不错
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
- 开源的数据可视化JavaScript图表库:ECharts
- 数据分析实践:遇到的问题及感想
- 在 Soui 中嵌入 MiniBlink 初体验(一):支持百度 ECharts 开源可视化库显示
- 开源的数据可视化JavaScript图表库:ECharts
- CBoard BI 数据可视化 支持国产开源 - honghuajun的专栏 - CSDN博客
- 使用开源Echarts为Splunk打造类似语法驱动的分析可视化