当前位置:   article > 正文

echarts图表动态监听dataZoom滑动,控制柱条的宽度以及数值的显示隐藏_echarts 监听滚动条

echarts 监听滚动条

当数值过多时,显示所有柱条看着会很凌乱且文字会挤在一起,于是就需要监听datazoom的滑动,拿到对应的阈值后做出相应的配置。
dataZoom” 事件通常用于响应用户对图表进行数据缩放的操作。
这里是datazoom官网api地址:点击跳转至官网文档的datazoom介绍
初始时状态如下图:
在这里插入图片描述
滑动x轴至设定范围内时:
在这里插入图片描述

监听datazoom

myChart为图表元素,在 “dataZoom” 事件上绑定了一个回调函数,当用户在图表上使用数据缩放时,这个回调函数会被触发。

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

myChart.on("dataZoom", function (params) {
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

params值

这里可以获取到当前datazoom的开始位置(start)和结束位置(end)
在这里插入图片描述

获取图表的option

myChart.getOption()myChart.setOption(newoption) 是 Echarts 中常用的两个方法,它们分别用于获取当前图表的配置选项和设置新的配置选项。

myChart.getOption():
作用:该方法用于获取当前图表的配置选项对象。可以在需要获取当前配置选项时调用该方法,例如在事件回调中根据当前配置进行进一步处理或修改。
返回值:返回一个包含当前图表配置的 JavaScript 对象,可以包含图表类型、数据系列、样式设置等信息。

以下为myChart.getOption()返回的值,若有其他需要控制的,都可以举一反三,根据这些值的位置对其进行设置,不局限于本文的控制柱条的宽度以及数值的显示隐藏。
在这里插入图片描述

myChart.setOption(newoption):
作用:该方法用于设置新的配置选项对象,即更新图表的显示内容和样式。通过设置新的配置选项,可以动态改变图表的展示效果,包括数据、样式、主题等。
参数:接受一个新的配置选项对象作为参数,用于更新图表的配置。 返回值:并不返回特定的数值,但会触发图表的重新渲染以反映新的配置选项。

控制柱条宽度及数值的显示与隐藏

这里通过循环图表的option配置中的series数组,设置其数值文本是否显示,以及柱条宽度
series.label.showseries.barWidth

// 在用户使用数据缩放时触发该事件
myChart.on('dataZoom', function (params) {
  // 输出参数信息到控制台
  console.log('params', params);
  
  // 获取当前图表的配置选项
  var newoption = myChart.getOption();
  
  // 获取数据缩放的起始位置和结束位置
  var dataZoomStart = params.start;
  var dataZoomEnd = params.end;
  
  // 根据数据缩放的范围对图表进行调整
  if (dataZoomEnd - dataZoomStart > 80) {
    // 如果数据缩放范围大于80,设置柱状图的标签不显示并设置柱状宽度为5
    newoption.series.forEach(function (series) {
      series.label.show = false;//隐藏顶部数值
      series.barWidth = 5;//柱条宽度为5
    });
  } else {
    // 如果数据缩放范围小于等于80,设置柱状图的标签显示并设置柱状宽度为'auto'
    newoption.series.forEach(function (series) {
      series.label.show = true;//显示顶部数值
      series.barWidth = 'auto';//柱条宽度自适应
    });
  }

  // 根据调整后的配置选项更新图表
  myChart.setOption(newoption);
});

// 设置图表的初始配置选项
option && myChart.setOption(option); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

全部代码(echarts示例可直接粘贴使用)

let colors = [
          {
            color: {
              botom: "rgba(253, 234, 60,0)",
              top: "rgba(253, 234, 60,1)",
            },
          },
          {
            color: {
              botom: "rgba(252, 140, 27,0)",
              top: "rgba(252, 140, 27,1)",
            },
          },
          {
            color: {
              botom: "rgba(100, 218, 217,0)",
              top: "rgba(100, 218, 217,1)",
            },
          },
];
var shadowColors = [];
colors.forEach((item) => {
        var colorobj = {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: item.color.botom, // 0% 处的颜色
            },
            {
              offset: 1,
              color: item.color.top, // 100% 处的颜色
            },
          ],
        };
        shadowColors.push(colorobj);
});
console.log('shadowColors',shadowColors);
option = {
  color: shadowColors,
  dataZoom: [
          {
            type: "slider", // 设置为滑动条
            show: true, // 显示滑动条
            start: 0, // 滑动条起始位置
            end: 40, // 滑动条结束位置
            bottom: 10, // 滑动条距离底部的距离
            textStyle: {
              color: "#fff",
            },
            backgroundColor: "#acb7c3", // 设置背景颜色
            handleStyle: {
              color: "#2a82e4", // 设置左右两边的可滑动收缩竖线颜色
            },
          },
        ],
  tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 显示阴影指示器
          },
          formatter: function (indexs) {
            var data = [];
            indexs.forEach((item) => {
              data.push({
                  seriesName: item.seriesName,
                  value: item.value,
              });
            });
            var content = "";
            data.forEach((item) => {
              content += item.seriesName + ": " + item.value + "<br>";
            });
            return content;
          },
        },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      name:'name1',
      barWidth: 10,
      barGap: 1, //柱子之间间距
      label: {
        show: true,
        position: "top",
        color: "white",
        rotate: 60,
        textStyle: {
          color: colors[0].color.top
        },
      },
    },
    {
      data: [110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160],
      type: 'bar',
      name:'name2',
      barWidth: 10,
      barGap: 1, //柱子之间间距
      label: {
        show: true,
        position: "top",
        color: "white",
        rotate: 60,
        textStyle: {
          color: colors[1].color.top
        },
      },
    },
    {
      data: [20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30],
      type: 'bar',
      name:'name3',
      barWidth: 10,
      barGap: 1, //柱子之间间距
      label: {
        show: true,
        position: "top",
        color: "white",
        rotate: 60,
        textStyle: {
          color: colors[2].color.top
        },
      },
    },
  ]
};
myChart.on("dataZoom", function (params) {
  var newoption = myChart.getOption();
  var dataZoomStart = params.start;
  var dataZoomEnd = params.end;
  if (dataZoomEnd - dataZoomStart > 70) {
    newoption.series.forEach(function (series) {
      series.label.show = false;
    });
  }else {
    newoption.series.forEach(function (series) {
      series.label.show = true;
    });
  }
  
  myChart.setOption(newoption);
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
本文内容由网友自发贡献,转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/1019798
推荐阅读
相关标签
  

闽ICP备14008679号