码迷,mamicode.com
首页 > 其他好文 > 详细

CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析

时间:2014-08-22 12:57:58      阅读:387      评论:0      收藏:0      [点我收藏+]

标签:百度   zrender   echarts   数据可视化   javascript   

ECharts问题描述:

问题就是折线图上的点是显示的,有人问能不能一开始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示?

如下图所示:

bubuko.com,布布扣

分析:让折线上的点不显示可以让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);
});
                    

最终实现结果:
bubuko.com,布布扣

上面代码是option中的代码,具体页面参考:
http://echarts.baidu.com/doc/example/event.html#




CSDN开源夏令营 百度数据可视化实践 ECharts(8)问题分析

标签:百度   zrender   echarts   数据可视化   javascript   

原文地址:http://blog.csdn.net/u013476464/article/details/38753647

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!