VUE项目中使用 Echarts data Zoom缩放功能

最新推荐文章于 2025-09-11 09:50:02 发布

原创最新推荐文章于 2025-09-11 09:50:02 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts

Vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

本文详细介绍了Echarts中dataZoom组件的使用，包括slider和inside两种类型，用于X轴和Y轴的数据窗口缩放，以及相关的配置参数如start、end等，以实现数据可视化的交互功能。通过示例代码展示了如何在柱状图中应用dataZoom，以动态调整显示数据的范围。

看实例：

data zoom:

有inslide和slide两种dataZoom，也分X,Y轴

dataZoom:[
    {
        type:"slider",//slider表示有滑动块的，
        show:true,
        xAxisIndex:[0],//表示x轴折叠
        start:1,//数据窗口范围的起始百分比,表示1%
        end:20//数据窗口范围的结束百分比,表示20%坐标
    },
    {
        type:"inside",//           
        yAxisIndex:[0],//表示y轴折叠
        start:1,
        end:35
    },
]

实例：

  // 数据请求
    getPlace() {
      this.$http.get("/api/stayInfo/PersonNum/ForSevenDays").then((res) => {
        if (res.data.status === 200) {
          //console.log(res.data.data);
          let placeData = res.data.data;
          for (let x = 0; x < placeData.length; x++) {
            this.placeLocationName.push(placeData[x].locationName);
            this.placeLocationNum.push(placeData[x].num);
          }
          this.getPlaceCharts();
        }
      });
    },
    // 柱状图
    getPlaceCharts() {
      let myChart = this.$echarts.init(stayPlaceChar);
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
        },
        // 数据量较多时 可采用X Y轴进行缩放
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，
            roam: false,
            show: true,
            xAxisIndex: [0], //表示x轴折叠
            start: 1, //数据窗口范围的起始百分比,表示1%
            end: 20, //数据窗口范围的结束百分比,表示20%坐标
          },
        ],
        xAxis: [
          {
            type: "category",
            data: this.placeLocationName,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#697085", //坐标值得具体的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：次",
            nameTextStyle: {
              color: "#697085",
              fontSize: 12,
            },
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#697085", //坐标值得具体的颜色
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "20%",
            label: {
              normal: {
                show: true,
                // position: "right",
              },
            },
            data: this.placeLocationNum,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#9F77EA",
                    "#37D5D7",
                    "#E47434",
                    "#F74D68",
                    "#E9CA41",
                    "#30D38A",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },

相关属性设置：


dataZoom=[                                        //区域缩放
    {
        id: 'dataZoomX',
        show:true,                             　 //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        backgroundColor:"rgba(47,69,84,0)",  　　 //组件的背景颜色
        type: 'slider',                          //slider表示有滑动块的，inside表示内置的
        dataBackground:{                         //数据阴影的样式。
            lineStyle:mylineStyle,               //阴影的线条样式
            areaStyle:myareaStyle,               //阴影的填充样式
        },
        fillerColor:"rgba(167,183,204,0.4)",     //选中范围的填充颜色。
        borderColor:"#ddd",                      //边框颜色。
        filterMode: 'filter',                    //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
        xAxisIndex:0,                            //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                        //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                       //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                    //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                               //数据窗口范围的起始百分比,表示30%
        end: 70,                                 //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                     //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                            //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                   //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                    //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
        left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                               //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                            //组件离容器右侧的距离,'20%'
        bottom:"auto",                           //组件离容器下侧的距离,'20%'
 
    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止组件的功能。
        xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                              //数据窗口范围的起始百分比,表示30%
        end: 70,                                //数据窗口范围的结束百分比,表示70%
        startValue:10,                          //数据窗口范围的起始数值
        endValue:100,                           //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                         //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                           //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                  //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                   //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
];