首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts（8）问题分析
CSDN开源夏令营 百度数据可视化实践 ECharts（8）问题分析
ECharts问题描述：
那么代码如下：
最终实现结果：
上面代码是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）问题分析
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。