echarts-datazoom的使用

最新推荐文章于 2024-10-11 20:36:42 发布

Ciao_Traveler

最新推荐文章于 2024-10-11 20:36:42 发布

阅读量3.4k

点赞数 1

分类专栏： echarts的使用文章标签： echarts

本文链接：https://blog.csdn.net/weixin_44202904/article/details/124303935

版权

echarts的使用专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这篇博客展示了如何利用JavaScript库ECharts生成一个动态数据的线性图表。代码示例详细说明了配置项，包括背景颜色、标题样式、坐标轴设置、提示框样式、网格布局、数据缩放组件等，旨在实现一个具有滑动缩放功能的高频振动数据可视化图表。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

let data = [];
let xAxisData = [];
for (let i = 0; i <= 1000; i++) {
  data.push(Math.random()*0.1);
  xAxisData.push(i);
}
option = {
  backgroundColor: '#080b30',
  title: {
    text: '[Hz]',
    textStyle: {
      align: 'center',
      color: 'rgba(255,255,255,0.4)',
      fontFamily: 'MicrosoftYaHei',
      fontSize: 12
    },
    bottom: '0',
    left: 'center'
  },
  tooltip: {
    backgroundColor: 'rgba(19,26,60,0.85)',
    borderColor: 'rgba(89,112,221,0.45)',
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        color: 'rgba(255,255,255,0.4)',
        type:'solid',
        with:0.5,
      },
    },
  },
  grid: {
    left: '2%',
    right: '5%',
    bottom: '8%',
    top: '24%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: xAxisData,
    axisLine: {
      show: true,
    },
    axisLabel: {
      color: 'rgba(255,255,255,0.4)',
      fontFamily: 'MicrosoftYaHei',
      interval:99
    },
    axisTick: {
      show: true
    }
  },

  yAxis: {
    type: 'value',
    max: '0.15',
    name:"[m/s^2]",
    nameTextStyle:{
      color: 'rgba(255,255,255,0.4)',
      fontFamily: 'MicrosoftYaHei',
      fontSize: 12
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.15)',
        width: 1,
        type: 'dashed'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255,255,255,0.4)',
      fontFamily: 'MicrosoftYaHei',
      fontSize: 12
    }
  },
  dataZoom: [
    {
      show: true,
      xAxisIndex: [0],
      type: 'slider',
      top: '4%',
      height:'3%',
      start: 1,
      end: 1000,
      handleIcon:
        'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '100%',
      handleStyle: {
        color: '#6680FF',
        borderColor: '#6680FF',
        shadowColor: '#6680FF',
      },
      textStyle: {
        color: '#fff'
      },
      backgroundColor: 'rgba(102,153,255,0.12)',
      borderColor:'rgba(102,153,255,0.12)',
      moveHandleSize: 8,
      moveHandleStyle: {
        color: '#6680FF',
        borderColor: '#6680FF',
        shadowColor: '#6680FF',
        opacity: 1,
      },
      emphasis: {
        moveHandleStyle: {
          color: '#6680FF',
          borderColor: '#6680FF',
          shadowColor: '#6680FF',
          opacity: 1,
        },
        handleStyle: {
          color: '#6680FF',
          borderColor: '#6680FF',
          shadowColor: '#6680FF',
        },
      },
      dataBackground: {
        lineStyle: {
          color: 'none',
          shadowColor: 'none',
        },
        areaStyle: {
          color: 'none',
          shadowColor: 'none',
        },
      },
      selectedDataBackground: {
        lineStyle: {
          color: 'none',
          shadowColor: 'none',
        },
        areaStyle: {
          color: 'none',
          shadowColor: 'none',
        },
      },
    },
    // {
    //   type: 'inside',
    //   show: true,
    //   height: 15,
    //   start: 1,
    //   end: 35
    // }
  ],
  series: [
    {
      name: '1',
      type: 'line',
      symbol: 'none',
      smooth: true,
      data:data,
      tooltip: {
            valueFormatter: function (value) {
              return value.toFixed(2);
            }
          },
    }
  ]
};