echarts柱状图区间滚动


const xData = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00'];
const barData = [5, 20, 36, 10, 10, 20];

option = {
    tooltip: {
        show: true,
        trigger: 'axis',
        confine: true,
        formatter(item) {
            const html = `<div>
                                        <div>${xData[item[0].dataIndex]}~${
                        xData[item[0].dataIndex + 1]
                    }</div>
                                            <div><span style="width:10px;height:10px;display: inline-block;background:${
                                                item[0].color
                                            }"></span> ${item[0].data}</div>
                                  </div>`;
            return html;
        },
    },
    xAxis: [{
            data: barData,
            show:false
        },
        {
            data: xData,
            axisLabel: {
                interval: 0,
                show: true,
            },
            position: 'bottom',
            boundaryGap: false,
            axisPointer: {
                show: false,
            },
            name: "BP",
            nameLocation: "end", // 将名称放置在 X 轴的末尾
            nameTextStyle: {
              // padding: [10, 0, 0, -30], // 向下偏移 10 像素
              fontWeight: 600,
              color: "black",
              verticalAlign: "top"
            },
        },
    ],
    yAxis: {
        type: 'value',
        axisLine:{
          show:true
        },
        name: "频数", // Y 轴的名称
        nameLocation: "end", // 将名称放置在 Y 轴的顶部
        nameGap: 15, // 轴名称与轴线之间的间距
        nameTextStyle: {
          padding: [0, 0, 0, -50] // 设置 Y 轴名称的偏移位置,右偏移 20 像素
        }
        // show: false,
    },
   dataZoom: [
    {
      type: "slider",
      show: true,
      xAxisIndex: [0,1],
      start: 0,
      end: 100,
      bottom: "2%"
    }
  ],
    series: [{
        data: barData,
        type: 'bar',
        barWidth:'100%',
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)',
        },
    }, ],
}

要实现echarts柱状图超出滚动的效果,可以按照以下步骤进行操作: 1. 首先,引入较新版本的echarts库,确保能正常显示图表。你可以在echarts官网上下载最新的版本[1]。 2. 为了实现柱状图滚动效果,你需要对数据进行分页显示。在代码中,你可以设置一个计数器变量来确定每页显示的数据项数量。 3. 假设你的数据项存储在一个数组中,你可以通过判断数组的长度来确定是否需要显示滚动条。如果数据项的数量超过了每页显示的数量,那么就需要显示滚动条。 4. 根据上述判断的结果,你可以通过调用echarts的相关方法来动态地设置柱状图的显示效果。比如,可以设置滚动条的位置和样式,以及每页显示的数据项数量。 5. 最后,在页面中渲染echarts图表,并将上述设置应用到柱状图中。 总结起来,要实现echarts柱状图超出滚动的效果,你需要引入较新版本的echarts库,判断数据项的数量是否超过每页显示的数量,并根据判断结果设置滚动条的显示和样式。然后,将设置应用到echarts图表中,即可实现柱状图滚动效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [ECharts柱状图过多添加滚动条(亲测可用)](https://blog.csdn.net/weixin_42064877/article/details/121958016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [echarts柱状图滚动轮播显示](https://download.csdn.net/download/qq_44423029/87409555)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值