Echarts图例控制y轴显示隐藏

最新推荐文章于 2024-05-30 16:27:11 发布

杀猪刀-墨林

最新推荐文章于 2024-05-30 16:27:11 发布

阅读量3.8k

点赞数 3

分类专栏： # echarts JS基础编程文章标签： Echarts图例控制Y轴隐藏 Echarts图例点击事件

本文链接：https://blog.csdn.net/qq_38948398/article/details/101531931

版权

JS基础编程同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

echarts

19 篇文章 3 订阅

订阅专栏

说说业务需求，因为业务上根据分子元素可能会需要展示许多Y轴，而我们展示的时候可能空间往往不够，所以这个时候我们需要预先展示哪几种，并且后续可以让用户根据图例来手动观察需要展示哪些y轴数据

本人echarts博客文章一贯作风，先看效果图，再看后续代码与介绍（也是节省你的时间）

这里我说一下几个关键点在哪里，首先需要了解Echarts的图例API事件legendselectchanged，另外这里需要注意计算的就是每次Y轴的偏移量计算，其余的都比较简单

<!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',
                yAxisIndex: 0,
                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',
                yAxisIndex: 1,
                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',
                yAxisIndex: 2,
                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',
                yAxisIndex: 3,
                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]
            }
        ];
        function Init(sel, dataInfo) {
          SelectedData = sel || {};
          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时，则跳过 不push
            if (sel[LengData[n]]) {
              YaData.push({
                type: 'value',
                name: LengData[n],
                min: 0,
                max: ymax,
                splitNumber: 5,
                interval: ymax / 5,
                position: YaData.length % 2 == 0 ? 'left' : "right",
                offset: (YaData.length + 1) <= 2 ? 0 : (Math.ceil((YaData.length + 1) / 2) - 1) * 80,
                axisLine: {
                  lineStyle: {
                    color: colors[n]
                  }
                },
                axisLabel: {
                  formatter: function (value) {
                    if (n < 2) {
                      return value + 'ml'
                    } else {
                      return value + '°C'
                    }
                  }
                }
              })
            } else {
              Datas[n].data = [];
            }
            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) {
          // 得到当前的图例显示隐藏状态分别有哪些
          SelectedData = params.selected;
          Init(SelectedData, DataInfo);
          if (option && typeof option === "object") {
            myChart.setOption(option, true);
          }
        })
        /* 取消选中图例 */
        // myChart.on("legendunselected", function (params) {
        //     // 得到当前的图例显示隐藏状态分别有哪些
        //     let selectObj = params.name;
        // })
    </script>
</body>

</html>

最近发现许多朋友根据这篇博文关注了我，我将多Y轴时的分割段做了优化处理，使其看起来更加美观一些，希望对一些朋友有帮助。

max: ymax,
splitNumber: 5,
interval: ymax / 5,

杀猪刀-墨林

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
Echarts图例控制y轴显示隐藏

<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"> <div id="container" style="heig...
复制链接

扫一扫