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


    ECharts问题描写叙述:

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

    例如以下图所看到的:


    分析:让折线上的点不显示能够让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#




  • 相关阅读:
    JNDI使用小记
    Python基础之字符串
    openstack装B之路http协议
    openstack装B之路keystone
    Python基础之列表
    openstack装B之路Keystone部署以及操作
    openstack装B之路网关协议
    纵表与横表互转的SQL
    Asp.Net请求管道中的19个事件
    jquery ajax post get
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5074192.html
Copyright © 2020-2023  润新知