Echarts如何实现频谱图小知识，大挑战！本文正在参与“程序员必备小知识”创作活动本文已参与 “掘力星计划” ，赢取

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

本文已参与 “掘力星计划” ，赢取创作大礼包，挑战创作激励金。

频谱图

Dom中我们需要写入对应的标签,如果需要轮播效果，我们可以采用el-carousel标签来实现，需要显示几个就放在el-carousel-item中就行。

<el-carousel el-carousel @change="onChange" :autoplay="false" height="350px" style="width: 100%" trigger="click">
    <el-carousel-item >
        <div class="chart-title">频谱图&nbsp;(&nbsp;<span>最大值：</span><span class="chart-max">{{spectrogramMax}}</span><span>平均值：</span><span class="chart-min">{{spectrogramAverage}}</span>&nbsp;)&nbsp;</div>
        <IEcharts style="width: 850px; height: 320px;" :option="barOptions" ref="spectChart"></IEcharts>
    </el-carousel-item>
</el-carousel>

需要引入什么插件，我们按需引入就行

    import IEcharts from 'vue-echarts-v3';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/dataZoom';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/tooltip';

下面就是频谱图的核心代码，也就是类似于echarts中options的内容

1、缩放效果的代码, 我们可以一开始设置start和end来控制缩放的比例位置，backgroundColor可以设置未缩放位置的颜色，showDetail可以设置拖拽时候是否显示详细数值信息，默认为true。

  dataZoom: [{
    show: true,
    realtime: true,
    start: 0,
    end: 55, //控制两个柱形的距离
    height: 8, //组件高度
    left: 30, //左边的距离
    right: 30, //右边的距离
    bottom: 0, //右边的距离
  }]

2、x轴的数据就放在xAxis中的data中，当数据太紧凑，我们可以在data的数据之间加入'', 来提高间隔，type可以为category, axisLabel可以设置x轴数据之间的距离，如果我们觉得x轴数据太长了，我们可以使用rotate来设置倾斜的角度，频谱图可以设置legend的data为['pictorialBar', 'bar']。

3、lineStyle可以设置线的一些样式，所用到的属性有color, width, opacity, type,这里的type设置的是线的类型，可以为实线，虚线。如果我们想要显示每个数据对应的刻度效果，我们可以设置axisTick中的show参数，false为不显示对应的刻度，true表示显示对应的刻度。

barOptions: {
  legend: {
    data: ['pictorialBar', 'bar']
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    backgroundColor: '#fff',
    textStyle: { color: '#4B9BFB' },
    extraCssText: 'box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19);'
  },
  xAxis: {
    type: 'category',
    // data: ['20', '30'],
    data: ['20Hz', '', '46Hz', '', '69Hz', '', '105Hz', '', '160Hz', '', '244Hz', '', '371Hz', '', '565Hz', '', '859Hz', '', '1.30KHz', '', '1.98KHz', '', '3.02KHz', '', '4.60KHz', '', '7.00KHz', '', '10.6KHz', '', '20KHz'],
    axisTick: {
      show: false,
      alignWithLabel: true
    },
    axisLabel: {
      rotate:40, 
      margin: 10 //x轴数据距离x轴的距离
    },
  },
  yAxis: {
    // splitLine: {show: false},
    type: 'value',
    axisLine: {
      show: true, //---是否显示
    },
    axisLabel: {
      interval: 0,
      margin: 10, //y轴数据距离y轴的距离

    },
    axisTick: {
      show: false, //显示每个值对应的刻度
    },
    nameGap: 10,
    splitLine: { //---grid 区域中的分隔线
      show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
      lineStyle: {
        color: '#DADADA',
        width: 1,
        opacity: 0.57,
        type: 'dashed', //---类型
      },
    },
  },
  // animationEasing: 'elasticOut',
  series: [{
    type: 'pictorialBar',
    symbol: 'bar',
    data: [{
        value: 65,
        symbolRepeat: true,
        symbolSize: [20, '10'],
        symbolMargin: 4,
    }, {
        value: 65,
        symbolRepeat: true,
        symbolSize: [20, '10'],
        symbolMargin: 4,
    }],
    itemStyle: {
      color: '#2C90F1'
    },
  }],
  dataZoom: [{
    show: true,
    realtime: true,
    start: 0,
    end: 55, //控制两个柱形的距离
    height: 8, //组件高度
    left: 30, //左边的距离
    right: 30, //右边的距离
    bottom: 0, //右边的距离
    handleColor: '#D3DCFD', //h滑动图标的颜色
    handleStyle: {
      borderColor: '#D3DCFD',
      borderWidth: '1',
      shadowBlur: 2,
      background: '#D3DCFD',
      shadowColor: '#D3DCFD',
    },
    backgroundColor: '#f4f7f9', //两边未选中的滑动条区域的颜色
    showDataShadow: false, //是否显示数据阴影 默认auto
    showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
    //  xAxisIndex: [0, 1] //这行代码会__dzAxisProxy报错
    },
    {
      type: 'inside',
      realtime: true,
      start: 0,
      end: 10,
    },
  ],
  itemStyle: { normal: { label: { show: true } } }
},

下面就是上面代码实现的效果图，如果想要看效果，可以直接去echarts官网，将上面的代码复制到echarts案例上，然后将我的barOptions:修改成option=就可以了，公司用到所以就写了一下：