echart之dataZoom数据区域缩放组件

最新推荐文章于 2024-07-12 14:10:05 发布

jiugie

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量259

点赞数 5

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_44642382/article/details/140096907

版权

echart之滑动条型数据区域缩放组件。

对于echart图数据量大的时候，我们一般不需要默认显示全部数据，可以通过dataZoom去设置显示部分数据

需求背景：一个eachrt实例需要同时展示n个指标，这些指标共享x轴，而x轴是类目轴（周几）。最关键的是，其中一个指标需要和x轴重合，该指标是面积图，作为其他指标的重要参考，需要和x轴重合并压入区域缩放条里。

通过查阅官方文档，发现echart并不支持直接将系列放入区域缩放条组件里。但！！！可以曲线救国，利用grid网格布局，将我们所需要的压入区域缩放条组件的系列，放置在网格的最后一个单元格里。调整好系列的高度，保证小于区域缩放条的高度，即可实现重合的效果。
示例如下

const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const seriesData = [
  [820, 932, 901, 934, 1290, 1330, 1320],
  [1, 2, 3, 4, 5, 6, 7],
  [2, 2, 345, 123, 121, 11, 117],
  [5, 334, 23, 43, 5, 32, 111],
  [0, 0.5, 0.5, -0.3, 0.3, 0.7, 0, 0]
];
option = {
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      // params 是一个包含当前鼠标悬停数据点信息的数组
      var tooltipContent = '';
      tooltipContent += `<p><strong>X轴:</strong> ${params[0].axisValue}</p>`;
      // 遍历数据点信息，自定义排列和样式
      for (let i = 0; i < params.length; i++) {
        tooltipContent += `<p><span style='display:inline-block;width:10px;height:10px;background-color:#06E984;border-radius:50%;margin-right:5px;'></span><strong>${params[i].seriesName}:</strong> ${params[i].value}</p>`;
      }

      tooltipContent += '</div>';
      return tooltipContent;
    }
  },
  axisPointer: {
    link: { xAxisIndex: 'all' }
  },
  xAxis: Array.from({ length: 5 }, (_, index) => ({
    gridIndex: index,
    type: 'category',
    boundaryGap: false,
    show: index === 4,
    axisLine:
      index === 4
        ? { show: true, lineStyle: { type: 'dashed', color: 'red' } }
        : null,
    data: index === 4 ? daysOfWeek : null
  })),
  legend: {},
  grid: [
    { top: '3%', left: 50, right: 120, height: '16%' },
    { top: '26%', left: 50, right: 120, height: '16%' },
    { top: '49%', left: 50, right: 120, height: '16%' },
    { top: '72%', left: 50, right: 120, height: '16%' },
    { top: '92%', left: 50, right: 120, height: '4%' }
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1, 2, 3]
    },
    {
      type: 'slider', // 滑块形式的滚动条
      xAxisIndex: [0, 1, 2, 3], // 应用于哪个X轴（如果有多个的话）
      bottom: '3%', // 滚动条距离图表底部的距离
      height: '6%', // 滚动条的高度
      showDataShadow: false // 不显示数据走势阴影
    }
  ],
  yAxis: Array.from({ length: 5 }, (_, index) => ({
    gridIndex: index,
    splitLine: { show: false },
    type: 'value',
    axisLabel: index === 4 ? { show: false } : null
  })),
  series: seriesData.map((data, index) => ({
    name: String.fromCharCode(65 + index), // 'A', 'B', 'C', ...
    xAxisIndex: index,
    yAxisIndex: index,
    data,
    type: 'line',
    areaStyle: index === 4 ? {} : null
  }))
};