• Echarts 嵌套饼图实现,内环点击控制外环显示


    Echarts有交互事件,但是如果用其进行图形变更,恐怕就只有重新修改配置了、

    如图,我想要实现,内圈的数据控制外圈的图形,当点击内环的某一块时,就可以实现,更改外环的目的。

    起初我想能不能直接修改option里 series的data数据达到修改的外圈图形的效果,可惜没那么那么容易,我暂时想到的修改实现方法,设置option的,达到修改外圈的目的。废话不多说,上代码:

    <script>
        var dataA=[];
        var option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : false,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    radius : [0, 70],
    
                    // for funnel
                    x: '20%',
                     '40%',
                    funnelAlign: 'right',
                    max: 1548,
    
                    itemStyle : {
                        normal : {
                            label : {
                                position : 'inner'
                            },
                            labelLine : {
                                show : false
                            }
                        }
                    },
                    data:[
                        {value:335, name:'直达'},
                        {value:679, name:'营销广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                },
                {
                    name:'访问来源',
                    type:'pie',
                    radius : [100, 140],
    
                    // for funnel
                    x: '60%',
                     '35%',
                    funnelAlign: 'left',
                    max: 1048,
    
                    data:dataA
                    /*[
                       {value:335, name:'直达'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1048, name:'百度'},
                        {value:251, name:'谷歌'},
                        {value:147, name:'必应'},
                        {value:102, name:'其他'}
                    ]*/
                }
            ]
        };
        var data=[];
         data[0]=[
            {value:335, name:'直达'},
            {value:310, name:'邮件营销'}
    
        ];
         data[1]=[
    
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'}
    
        ];
        data[2]=[
            {value:1048, name:'百度'},
            {value:251, name:'谷歌'},
            {value:147, name:'必应'},
            {value:102, name:'其他'}];
    
        // 路径配置
        require.config({
            paths: {
                echarts: 'www/js'
            }
        });
        var myChart;
        require(['echarts','echarts/chart/pie','echarts/chart/funnel'],function(echarts){
             myChart = echarts.init(document.getElementById('main'));
            // 使用刚指定的配置项和数据显示图表。
    
            myChart.setOption(option);
            // 处理点击事件并且跳转到相应的百度搜索页面
            myChart.on('click', function (params) {
    
                console.log(params);
    
                if(params.seriesIndex==0){
                   
    
    
                    for(var i=0;i<option.series[0].data.length;i++){
                        option.series[0].data[i].selected=false;
                    }
                    var selected=params.data;
                    selected.selected=true;
                    console.log(selected);
                    console.log( option.series[0].data[params.dataIndex]);
                    option.series[0].data[params.dataIndex]=selected;
                  //  option.series[1].data=dataA;
                    option.series[1].data=data[params.dataIndex];
                    console.log(option);
                    myChart.clear();
                    myChart.setOption(option);
                }
    
    
            });
        });
    </script>
    

      如上,为了点击切换图形,网上有人,写多个option,如何option1,option2……,通过点击事件的选择,然后切换option,但是写那么多option真的很浪费资源,他的很多属性是重复的,所以我决定更改option的内容,然后达到切换目的。

    现在详细说明:
    myChart.on('click', function (params){
       if(params.seriesIndex==0){
                   
             
    }
    });

      如上,设置点击事件通过seriesIndex的值,判断是内圈还是外圈,点击事件发生在内圈,则进行修改;通过dataIndex的值,判断它是点击的哪一个块,然后进行操作。我先预先把数据加载好做成一个数组,然后我们通过选择的索引,达到匹配数据。如果我们直接复制,不进行myChart.clear();这一步的操作,会出现数据交叉的问题,所以我们需要先清空图形数据,然后执行其myChart.setOption(option);的方法,执行完之后,图形重新加载了,会出现,点击选中的的图形,没有选中,所以需要设置选中的图形,在设置之前,把之前这只选中的图形,全部设置不选中,故达到目的。

    感兴趣的朋友可以参考代码进行实现,如果你有更好的方法实现,不吝赐教。
  • 相关阅读:
    freebsd安装mysql
    freebsd安装ports
    分布式拒绝服务攻击
    如何用命令获知当前是一年中的第多少周和今天是周几
    freebsd软件包下载地址
    mod_wsgi的两种模式
    freebsd中/etc/rc.conf配置文件导致不能启动的问题
    进程ID[PID(Process ID)]与端口号[(Port ID)]的联系
    Java EE之HttpServletRequest
    Chrome之控制台使用【转载】
  • 原文地址:https://www.cnblogs.com/roychenyi/p/5761687.html
Copyright © 2020-2023  润新知