echart 单选legend 并排序

Posted 2020-09-20 conserdao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echart 单选legend 并排序相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts</title>

</head>
<body>
     <h1>Echarts 3</h1>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 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 入门示例‘
            },
            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(3);
                        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(1);
                        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>

以上是关于echart 单选legend 并排序的主要内容，如果未能解决你的问题，请参考以下文章

echarts怎么通过改变legend改变xAxis的显示

echarts legend只截取前几个值

echarts饼图的legend形状可以修改么

echarts 设置自定义legend

echarts legend data数据过长，如何换行

echarts饼图的legend形状可以修改么