echarts-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项

摘要:
=“其他”){selectedMode=true;}}*/console.log(“参数”);console.log(参数);varv=空;for(vari=0;i<$seriesData.length;i++){varitem=$seriesData〔i〕console.log(params.selected〔item.name〕);if(!params.select[item.name]){if(v==null){v=item.value;}else{v+=item.vvalue;}}如果(item.name=‘Other’){continue;}legendData.push!

将下列代码copy的echarts编辑器中

app.title = '环形图';
var $legendData = ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'];
var $legendSelected = {'直接访问':false};
var $seriesData = [
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
];


var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:$legendData,
            selected:$legendSelected

        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:$seriesData
            }
        ]
    };
myChart.on('legendselectchanged', function (params) {
    if (!$seriesData || $seriesData.length <= 0) return
    var legendData = []
    var seriesData = []
    var selected = params.selected;
    /*var selectedMode = false;
    for (var i in params.selected) {
        if( params.selected[i] && i != '其他'){
            selectedMode = true;
        }
    }*/
    console.log('params');
    console.log(params);


    var v = null;
    for (var i = 0; i < $seriesData.length; i++) {
        var item = $seriesData[i]
        console.log(params.selected[item.name]);
        if( !params.selected[item.name] ){
            if( v === null ){
                v = item.value;
            }else{
                v += item.value;
            }
        }
        if(item.name == '其他'){
            continue;
        }

        legendData.push(item.name)
        seriesData.push({ value: item.value, name: item.name, })
    }
    if( v !== null ){
        legendData.push('其他');
        seriesData.push({ value: v, name: '其他'})
    }
    console.log(legendData);
    console.log(seriesData);

    var $option = option
    $option.legend.data = legendData
    $option.legend.selected = selected
    //$option.legend.selectedMode = selectedMode
    $option.series[0].data = seriesData
    myChart.clear()

    console.log(option);
    myChart.setOption(option)

});

免责声明:文章转载自《echarts-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇iOS 运行时使用(交换两个方法)Nginx 出现504 Gateway Time-out的解决方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

OpenLDAP安装与配置

因为公司内部有多个系统,而每个系统都有自己的一套用户认证。每次新进或离职一位同事,运维的小伙伴们,都要在每个系统上去添加用户,搞得小伙伴们很不爽。 为了让运维的小伙伴们,从这个繁琐的工作中解放出来,同时也为了统一管理所有系统的用户认证,我们决定启用ldap。这样每个系统的用户认证全部通过ldap来进行,而每个系统的权限就使用各自系统的权限管理即可。 一、O...

[转载]JS拖动技术 关于setCapture

<script type="text/javascript"><!--window.onload=function(){objDiv = document.getElementByIdx('drag');drag(objDiv);}; function drag(dv){dv.onmousedown=function(e){var d=...

Linux curl

命令:curl 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具。它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具。 语法:# curl [option] [url] 常见参数:   -A/--user-agent <string>...

瀑布流的三种实现方式(原生js+jquery+css3)

前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写。最近闲来没事,就自己写个。大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

利用Javascript获取当前日期的农历日期

来源:http://www.ido321.com/926.html JavaScript代码 1: /*设置农历日期*/ 2: var CalendarData=new Array(100); 3: var madd=new Array(12); 4: var numString="一二三四五六七八九十"; 5: var...

nginx配置静态路径

原因:文件资料上传至ftp上,由于需要大量图片回显,导致服务器压力过大,反应不过来,所以改为通过nginx做静态资源代理。 服务器路径为:/var/ftp/2020/10/09/12a1b8f973fc4d51b67e9a168fcb757f1602227927258.jpg 初次尝试,是通过: location /ftp/ {      root /va...