• echart 单选legend 并排序


    一、Echarts3 的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts</title> </head> <body> <h1>Echarts 3</h1> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style=" 600px; height: 400px;"></div> <!-- 引入 echarts.js --> <script src="echarts.common.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var datas = [ { "name" : "衬衫", "number" : 100, "price" : 69, "tax" : 43 }, { "name" : "羊毛衫", "number" : 80, "price" : 369, "tax" : 36 }, { "name" : "雪纺衫", "number" : 60, "price" : 129, "tax" : 9 }, { "name" : "裤子", "number" : 200, "price" : 89, "tax" : 27 }, { "name" : "高跟鞋", "number" : 30, "price" : 500, "tax" : 25 }, { "name" : "袜子", "number" : 200, "price" : 19, "tax" : 30 } ]; var dt = []; var dt2 = []; var dt3 = []; var len = datas.length; var option = { title : { text : 'ECharts Legend single selected and resorted' }, tooltip : {}, legend : { data : [ '数量', '单价', '交税' ], selected : { '单价' : false, '交税' : false }, selectedMode : 'single' }, yAxis : [ { } ], xAxis : [ { type : 'category', splitLine : { show : false }, data : dt } ], series : [ { name : '数量', type : 'bar', data : (function() { var data = []; datas.sort(function(a, b) { if (a.number > b.number) return -1; //降序 else return 1; }); datas.forEach(function(item) { console.log(1); data.push(item.number); dt.push(item.name); }); return data; })() }, { name : '单价', type : 'bar', data : (function() { var data = []; datas.sort(function(a, b) { if (a.price > b.price) return -1; //降序 else return 1; }); datas.forEach(function(item) { console.log(2); data.push(item.price); dt2.push(item.name); }) return data; })() }, { name : '交税', type : 'bar', data : (function() { var data = []; datas.sort(function(a, b) { if (a.tax > b.tax) return -1; //降序 else return 1; }); datas.forEach(function(item) { console.log(3); data.push(item.tax); dt3.push(item.name); }); return data; })() } ] }; myChart.on('legendselectchanged', function(params) { var name = params.name; if (name == '单价') { var opt = myChart.getOption(); opt.xAxis[0]["data"] = dt2; myChart.setOption(opt); } if (name == '数量') { var opt = myChart.getOption(); opt.xAxis[0]["data"] = dt; myChart.setOption(opt); } if (name == '交税') { var opt = myChart.getOption(); opt.xAxis[0]["data"] = dt3; myChart.setOption(opt); } console.log(name); }); myChart.setOption(option); </script> </body> </html>

    =====================================================================================================

    二、Echarts 2 的实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ECharts2.2.7</title>
    
    </head>
    <body>
    
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px; height: 400px;"></div>
    
        <!-- 引入 echarts.js -->
        <script src="echarts.js"></script>
    
        <script type="text/javascript">
            require.config({
                paths : {
                    echarts : 'http://echarts.baidu.com/build/dist'
                }
            });
    
            require([ 'echarts', 'echarts/chart/bar' ], function(echarts) {
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var datas = [ {
                    "name" : "衬衫",
                    "number" : 100,
                    "price" : 69,
                    "tax" : 43
    
                }, {
                    "name" : "羊毛衫",
                    "number" : 80,
                    "price" : 369,
                    "tax" : 36
                }, {
                    "name" : "雪纺衫",
                    "number" : 60,
                    "price" : 129,
                    "tax" : 9
                }, {
                    "name" : "裤子",
                    "number" : 200,
                    "price" : 89,
                    "tax" : 27
                }, {
                    "name" : "高跟鞋",
                    "number" : 30,
                    "price" : 500,
                    "tax" : 25
                }, {
                    "name" : "袜子",
                    "number" : 200,
                    "price" : 19,
                    "tax" : 30
                } ];
                var dt = [];
                var dt2 = [];
                var dt3 = [];
                var len = datas.length;
    
                var option = {
                    title : {
                        text : 'ECharts 入门示例'
                    },
                    tooltip : {},
                    legend : {
                        data : [ '数量', '单价', '交税' ],
                        selected : {
                            '单价' : false,
                            '交税' : false
                        },
                        selectedMode : 'single'
    
                    },
    
                    yAxis : [ {
    
                    } ],
                    xAxis : [ {
                        type : 'category',
                        splitLine : {
                            show : false
                        },
                        data : dt
                    } ],
                    series : [ {
                        name : '数量',
                        type : 'bar',
                        data : (function() {
                            var data = [];
                            datas.sort(function(a, b) {
                                if (a.number > b.number)
                                    return -1; //降序
                                else
                                    return 1;
    
                            });
    
                            datas.forEach(function(item) {
                                console.log(1);
                                data.push(item.number);
                                dt.push(item.name);
                            });
                            return data;
                        })()
                    }, {
                        name : '单价',
                        type : 'bar',
                        data : (function() {
                            var data = [];
                            datas.sort(function(a, b) {
                                if (a.price > b.price)
                                    return -1; //降序
                                else
                                    return 1;
    
                            });
    
                            datas.forEach(function(item) {
                                console.log(2);
                                data.push(item.price);
                                dt2.push(item.name);
                            })
                            return data;
                        })()
                    }, {
                        name : '交税',
                        type : 'bar',
                        data : (function() {
                            var data = [];
                            datas.sort(function(a, b) {
                                if (a.tax > b.tax)
                                    return -1; //降序
                                else
                                    return 1;
    
                            });
    
                            datas.forEach(function(item) {
                                console.log(3);
                                data.push(item.tax);
                                dt3.push(item.name);
                            });
                            return data;
                        })()
                    } ]
                };
                //legend单击事件
                 var ecConfig = require('echarts/config');
                
                myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function(param) {
                    var selected = param.selected;
                    if (selected['单价']) {
                        console.log('a');
                        var opt = myChart.getOption();
                        opt.xAxis[0]["data"] = dt2;
                        myChart.setOption(opt);
                    }
                    if (selected['数量']) {
                        console.log('b');
                        var opt = myChart.getOption();
                        opt.xAxis[0]["data"] = dt;
                        myChart.setOption(opt);
                    }
                    if (selected['交税']) {
                        console.log('c');
                        var opt = myChart.getOption();
                        opt.xAxis[0]["data"] = dt3;
                        myChart.setOption(opt);
                    }
                    console.log(selected);
                });
                myChart.setOption(option);
            });
        </script>
    </body>
    </html>








  • 相关阅读:
    .XamlReader.Load()解决给定编码中的字符无效与无法创建未知类型
    ie中jQuery无法解析xml文件的解决方案[转帖]
    关于BI
    关天response.setContentType()和application/json
    win7 exe程序icon消失
    关于spring的p标签(转)
    人生的阶段(转)
    Firefox高版本中alert样式问题
    IDM606注册
    Java 线程池
  • 原文地址:https://www.cnblogs.com/conserdao/p/6915980.html
Copyright © 2020-2023  润新知