echarts中点击图例y轴消失

最新推荐文章于 2023-11-16 18:56:53 发布

LoveZJC12138

最新推荐文章于 2023-11-16 18:56:53 发布

阅读量2.2k

点赞数 2

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/LoveZJC96/article/details/125146716

版权

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '多 Y 轴⽰例';

        let colors, LengData, SelectedData, YaData, SeriesData, DataInfo;
        colors = ['#5793f3', '#d14a61', '#675bba', '#66bbee'];
        SelectedData = {//图例是否被选中
            '降⽔量': true, '蒸发量': true, '温度': true, '温差': true,
        }

        //图例组件数据
        LengData = ['降⽔量', '蒸发量', '温度', '温差'];
        //数据信息
        DataInfo = [
            {
                name: '降⽔量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '蒸发量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name: '温度',
                type: 'line',
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
                name: '温差',
                type: 'line',
                data: [21.0, 32.2, 23.3, 4.5, 7.3, 14.2, 20.3, 55.4, 23.0, 43.5, 13.4, 16.2]
            }
        ];
        //初始化数据，其中的两个参数sel代表图例被选中的数据，datainfo代表要显示的数据
        function Init(sel, dataInfo) {
            SelectedData = sel || {};
            //YaData是y轴数据，SeriesData是最终处理好的数据
            YaData = [], SeriesData = [];
            let Datas = JSON.parse(JSON.stringify(dataInfo));
            //通过循环处理数据
            for (let n = 0, l = LengData.length; n < l; n++) {
                const ydata = Datas[n].data;
                const ymax = Math.round(Math.max(...ydata) / 0.8 / 5) * 5;
                //console.log(ymax);
                // 如果该图例状态为false时，则不往Y轴显示数据里面添加数据，以此实现不选中某个图例，图例对应的某个Y轴消失
                if (sel[LengData[n]]) {
                    YaData.push({
                        type: 'value',
                        name: LengData[n],
                        min: 0,
                        max: ymax,//多个Y轴，只有最大值存在，才会在Y轴上显示其数据
                        splitNumber: 5,//y轴分成5分
                        interval: ymax / 5, //y轴每份的数值
                        position: YaData.length % 2 == 0 ? 'left' : "right",//y轴位置，是在左，还是在右
                        //Y 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用.
                        offset: (YaData.length + 1) <= 2 ? 0 : (Math.ceil((YaData.length + 1) / 2) - 1) * 80,
                        axisLine: {//坐标轴轴线相关设置
                            lineStyle: {//y坐标轴轴线样式设置
                                color: colors[n]
                            }
                        },
                        axisLabel: {//坐标轴刻度标签的相关设置。
                            formatter: function (value) {
                                if (n < 2) {
                                    return value + 'ml'
                                } else {
                                    return value + '°C'
                                }
                            }
                        }
                    })
                } else {
                    //把对应显示数据变为空，使其不显示折线图或者柱状图
                    Datas[n].data = [];
                }
                //当series中的yAxisIndex等于几，就按照第几个对应的坐标轴来作为坐标轴。
                Datas[n].yAxisIndex = YaData.length - 1 < 0 ? 0 : YaData.length - 1;
                SeriesData.push(Datas[n]);
            }
            if (YaData.length == 0) {
                YaData = [{ type: 'value' }];
            }
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {//组件离容器左侧的距离
                    right: YaData.length ? `${(YaData.length / 2) * 7}%` : '5%',
                    left: YaData.length ? `${(YaData.length / 2) * 7}%` : '5%',
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {//图例
                    data: LengData,
                    selected: SelectedData,
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['1⽉', '2⽉', '3⽉', '4⽉', '5⽉', '6⽉', '7⽉', '8⽉', '9⽉', '10⽉', '11⽉', '12⽉']
                    }
                ],
                yAxis: YaData,
                series: SeriesData
            };
        }
        Init(SelectedData, DataInfo);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        //选中图例 
        myChart.on("legendselectchanged", function (params) {
            // 得到当前的图例显⽰隐藏状态分别有哪些
            console.log('选中图例', params);
            SelectedData = params.selected;
            Init(SelectedData, DataInfo);
            if (option && typeof option === "object") {
                console.log(option);
                myChart.setOption(option, true);
            }
        })
        /* 取消选中图例 */
        // myChart.on("legendunselected", function (params) {
        //     // 得到当前的图例显⽰隐藏状态分别有哪些
        //     let selectObj = params.name;
        // })
    </script>
</body>

</html>

其中我做了一些注释，便于理解，大家可以自行观看。