echarts 统计图 x 轴实现拉伸滑动

UserGuan

已于 2022-11-21 21:47:40 修改

阅读量3.4k

点赞数 3

分类专栏：前端类文章标签： echarts 前端 javascript

于 2022-11-06 18:46:19 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/127719079

版权

前端类专栏收录该内容

50 篇文章 5 订阅

订阅专栏

效果图

核心代码

dataZoom: [{
  type: "slider", // 滑动条型数据区域缩放组件
  show: true, // 是否显示组件(用于 x 轴使用)
  start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  height: 30, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
  handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
  handleStyle: {
    // color: '#fff', // 图形的颜色
    // borderColor: 'red', // 图形的描边颜色
    // borderWidth: 1, // 描边线宽。为 0 时无描边
    borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
  }, // 两侧缩放手柄的样式配置
  showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
}, {
  type: "inside", // 内置型数据区域缩放组件(即在坐标系内平移与缩放)
  start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
  end: 100 // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
}, {
  type: "slider", // 滑动条型数据区域缩放组件
  show: false, // 是否显示组件(用于 y 轴使用)
  width: "5%", // 组件的宽度(竖直布局默认 30，水平布局默认自适应)
  height: "70%", // 组件的高度(水平布局默认 30，竖直布局默认自适应)
  yAxisIndex: 0, // 组件控制的 y 轴(即下方 yAxis 数组的索引值)
  filterMode: "empty", // none.不过滤数据只改变数轴范围 empty.当前数据窗口外的数据设置为空，不影响其他轴的数据范围 其他访问https://echarts.apache.org/zh/option.html#dataZoom-slider.filterMode
  handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
  handleStyle: {
    // color: '#fff', // 图形的颜色
    // borderColor: 'red', // 图形的描边颜色
    // borderWidth: 1, // 描边线宽。为 0 时无描边
    borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
  }, // 两侧缩放手柄的样式配置
  showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
  left: "93%" // 组件离容器左侧的距离
}], // 区域缩放

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>eCharts 统计图 x 轴实现拉伸滑动</title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="mainDiv" style="height: 400px; width: 500px"></div>
    <script>
      const arr = [{
        "x": "2022/10/10",
        "y": "10"
      }, {
        "x": "2022/10/11",
        "y": "20"
      }, {
        "x": "2022/10/12",
        "y": "30"
      }, {
        "x": "2022/10/13",
        "y": "40"
      }, {
        "x": "2022/10/14",
        "y": "50"
      }, {
        "x": "2022/10/15",
        "y": "60"
      }, {
        "x": "2022/10/16",
        "y": "70"
      }, {
        "x": "2022/10/17",
        "y": "80"
      }, {
        "x": "2022/10/18",
        "y": "90"
      }, {
        "x": "2022/10/19",
        "y": "100"
      }, {
        "x": "2022/10/20",
        "y": "110"
      }]
      const names = []; // 类别数组(实际用来盛放X轴坐标值)
      const seriesData = [];
      arr.forEach(item => {
        names.push(item.x);
        seriesData.push(item.y);
      })
      drawFun(names, seriesData);

      function drawFun(x_data, y_data) {
        const eChart = echarts.init(document.getElementById('mainDiv')); // 初始化 echarts 实例
        eChart.setOption({
          color: ['#2ec7c9'], // 调色盘颜色列表
          legend: {
            show: true, // 是否显示图例组件
            left: 120, // 图例组件离容器左侧的距离(值为 left,center,right 组件会根据相应的位置自动对齐)
            top: 20, // 图例组件离容器上侧的距离(值为top,middle,bottom 组件会根据相应的位置自动对齐)
            data: ['val值'], // 图例的数据数组
            icon: 'roundRect', // 图例项的图标 circle.圆 rect.矩形 roundRect.圆角矩形 triangle.三角形 diamond.菱形 pin.钉 arrow.箭头 none.无
            textStyle: {
              color: 'red', // 文字的颜色
              fontSize: 12, // 字体大小
              fontStyle: 'normal', // 字体风格 normal.标准(默认) talic oblique.斜的
              fontWeight: 'normal' // 字体粗细
            } // 图例的公用文本样式
          }, // 图例组件
          tooltip: {
            trigger: 'axis', // 触发类型 item.数据项图形触发(主要在散点图) axis.坐标轴触发(主要在柱状图) none.什么都不触发
            axisPointer: {
              type: 'shadow' // 指示器类型 line.直线指示器 shadow.阴影指示器 none.无指示器 cross.十字准星指示器
            } // 坐标轴指示器配置项
          }, // 提示框组件
          grid: {
            show: true, // 是否显示直角坐标系网格
            left: '3%', // grid 组件离容器左侧的距离(值为 left,center,right 组件会根据相应的位置自动对齐)
            right: '4%', // grid 组件离容器右侧的距离
            bottom: '5%', // grid 组件离容器下侧的距离
            containLabel: true // grid 区域是否包含坐标轴的刻度标签
          }, // 直角坐标系网格
          dataZoom: [{
            type: "slider", // 滑动条型数据区域缩放组件
            show: true, // 是否显示组件(用于 x 轴使用)
            start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            end: 100, // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            height: 30, // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
          }, {
            type: "inside", // 内置型数据区域缩放组件(即在坐标系内平移与缩放)
            start: 70, // 数据窗口范围的起始百分比(范围是：0 ~ 100。表示 0% ~ 100%)
            end: 100 // 数据窗口范围的结束百分比(范围是：0 ~ 100。表示 0% ~ 100%)
          }, {
            type: "slider", // 滑动条型数据区域缩放组件
            show: false, // 是否显示组件(用于 y 轴使用)
            width: "5%", // 组件的宽度(竖直布局默认 30，水平布局默认自适应)
            height: "70%", // 组件的高度(水平布局默认 30，竖直布局默认自适应)
            yAxisIndex: 0, // 组件控制的 y 轴(即下方 yAxis 数组的索引值)
            filterMode: "empty", // none.不过滤数据只改变数轴范围 empty.当前数据窗口外的数据设置为空，不影响其他轴的数据范围 其他访问https://echarts.apache.org/zh/option.html#dataZoom-slider.filterMode
            handleSize: '30%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同
            handleStyle: {
              // color: '#fff', // 图形的颜色
              // borderColor: 'red', // 图形的描边颜色
              // borderWidth: 1, // 描边线宽。为 0 时无描边
              borderType: 'solid' // 描边类型 solid.实线(默认) dashed.虚线 dotted.点虚线
            }, // 两侧缩放手柄的样式配置
            showDataShadow: false, // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势
            left: "93%" // 组件离容器左侧的距离
          }], // 区域缩放
          xAxis: [{
            show: true, // 是否显示 x 轴
            // name: 'x坐标轴名称', // 坐标轴名称
            nameLocation: 'center', // 坐标轴名称的显示位置 start.开始 center.中心 end.末端(默认)
            nameTextStyle: {
              color: '#000', // 字体颜色(默认取 axisLine.lineStyle.color)
              fontSize: 12, // 字体大小
              padding: 0, // 文字块的内边距
              fontStyle: 'normal', // 字体风格 normal.标准(默认) talic oblique.斜的
              fontWeight: 'normal' // 字体粗细
            }, // 坐标轴名称的文字样式
            type: 'category', // 坐标轴类型 value.数值轴(适用于连续数据) category.类目轴(适用于离散的类目数据) time.时间轴(适用于连续的时序数据) log.对数轴(适用于对数数据)
            data: x_data, // 类目数据(类目轴[type: 'category']中有效) 如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取
            axisLine: {
              show: true, // 是否显示坐标轴轴线
              lineStyle: {
                type: 'solid', // 线的类型 solid.实线(默认) dashed.虚线 dotted.点虚线
                color: 'red', // 线的颜色
                width: 1, // 坐标轴线线宽
              } // 坐标轴线的样式
            }, // 坐标轴轴线相关设置
            axisTick: {
              show: true, // 是否显示坐标轴刻度
              length: 5, // 坐标轴刻度的长度
              inside: false, // 坐标轴刻度是否朝内 true.朝内 false.朝外(默认)
              alignWithLabel: true // 保证刻度线和标签对齐(类目轴中在 boundaryGap 为 true 的时候有效)
            }, // 坐标轴刻度相关设置
            axisLabel: {
              show: true, // 是否显示刻度标签
              interval: 0, // 坐标轴刻度标签的显示间隔(类目轴中有效) 0.强制显示所有标签 1.隔一个标签显示 2.隔两个标签显示，以此类推
              textStyle: {
                color: 'red', // 字体颜色
                fontSize: 12 // 字体大小
              }, // 标签文字样式
              inside: false, // 坐标轴刻度是否朝内 true.朝内 false.朝外(默认)
              rotate: 0, // 刻度标签旋转的角度(可防止标签之间重叠)
              margin: 8, // 刻度标签与轴线之间的距离
              // formatter: function(nal) {
              // 	const str = nal.split("");
              // 	return str.join("\n");
              // } // 文字改为竖版显示
            } // 坐标轴刻度标签的相关设置
          }],
          yAxis: [{
            show: true, // 是否显示 y 轴
            // name: 'y坐标轴名称', // 坐标轴名称
            nameLocation: 'end', // 坐标轴名称的显示位置 start.开始 center.中心 end.末端(默认)
            nameTextStyle: {
              color: '#000', // 字体颜色(默认取 axisLine.lineStyle.color)
              fontSize: 12, // 字体大小
              padding: 0, // 文字块的内边距
              fontStyle: 'normal', // 字体风格 normal.标准(默认) talic oblique.斜的
              fontWeight: 'normal' // 字体粗细
            }, // 坐标轴名称的文字样式
            type: 'value', // 坐标轴类型 value.数值轴(适用于连续数据) category.类目轴(适用于离散的类目数据) time.时间轴(适用于连续的时序数据) log.对数轴(适用于对数数据)
            axisLine: {
              show: true, // 是否显示坐标轴轴线
              lineStyle: {
                type: 'solid', // 线的类型 solid.实线(默认) dashed.虚线 dotted.点虚线
                color: 'red', // 线的颜色
                width: 1, // 坐标轴线线宽
              } // 坐标轴线的样式
            }, // 坐标轴轴线相关设置
            axisTick: {
              show: true, // 是否显示坐标轴刻度
              length: 5, // 坐标轴刻度的长度
              inside: false // 坐标轴刻度是否朝内 true.朝内 false.朝外(默认)
            }, // 坐标轴刻度相关设置
            axisLabel: {
              show: true, // 是否显示刻度标签
              textStyle: {
                color: 'red', // 字体颜色
                fontSize: 12 // 字体大小
              }, // 标签文字样式
              inside: false, // 坐标轴刻度是否朝内 true.朝内 false.朝外(默认)
              rotate: 0, // 刻度标签旋转的角度(可防止标签之间重叠)
              margin: 8 // 刻度标签与轴线之间的距离
            }, // 坐标轴刻度标签的相关设置
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示，类目轴不显示(true)
            } // 坐标轴在 grid 区域中的分隔线
          }],
          series: [{
            name: 'val值', // 系列名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
            type: 'bar', // 柱状图(或条形图)
            barWidth: '30%', // 柱条的宽度，不设时自适应
            data: y_data // 系列中的数据内容数组
          }]
        });
      }
    </script>
  </body>
</html>