Echarts 对图表用鼠标滚轮缩放

最新推荐文章于 2025-02-06 16:10:38 发布

Paul-George

最新推荐文章于 2025-02-06 16:10:38 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/luohang_1/article/details/129303179

当Echarts图表数据过多导致显示不清晰时，可以利用dataZoom组件进行缩放查看。通过配置yAxis的min和max属性以及dataZoom的start和end参数，能实现更精细的数据浏览体验。例如设置为inside类型的数据缩放，并自定义轴标签格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图表渲染数据很多看不明显，可以采用echarts的 dataZoom属性

yAxis: [
          {
            type: 'value',
            min: 'dataMin',
            max: 'dataMax',
            splitLine: false,
            axisLabel: {
              color: '#ccc', //刻度线标签颜色
              formatter: function(value, index) {
                return value.toFixed(2)
              },
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            type: 'line',
            color: '#11d1e1',
            // smooth: true, //设置折线图平滑
            data: [],
          },
        ],

具体配置参考官网 https://echarts.apache.org/zh/api.html#%2Fsearch%2FdataZoom