Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper has participated in theProject Digg”To win a creative gift package and challenge for creative incentive money.

spectrum

We need to write the corresponding label in Dom. If we need the rotation effect, we can use the el-Carousel label to achieve it. If we need to display several tags, we can put them in the 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">spectrum&nbsp;(&nbsp;<span>Max:</span><span class="chart-max">{{spectrogramMax}}</span><span>Average:</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>
Copy the code

What plug-ins do we need to introduce

    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';
Copy the code

The following is the core code of the spectrum map, which is similar to the content of the options in Echarts

1, zoom effect code, we can start to set the start and end to control the scale position, backgroundColor can set the color of the unscaled position, showDetail can set whether to display the detailed value information when dragging, the default is true.

  dataZoom: [{
    show: true.realtime: true.start: 0.end: 55.// Control the distance between two columns
    height: 8.// Component height
    left: 30.// The left distance
    right: 30.// Distance to the right
    bottom: 0.// Distance to the right
  }]
Copy the code

2. The X-axis data is stored in the data in xAxis. When the data is too compact, we can add “” between the data to improve the spacing. We can use rotate to set the tilt Angle, and the legend data can be set to [‘pictorialBar’, ‘bar’].

3. LineStyle allows you to set some styles of the line, using properties such as color, width, opacity, and type, where type sets the type of the line, which can be a solid line or a dashed line. If we want to display the corresponding scale for each data, we can set the show parameter in axisTick to false and true to show the corresponding scale.

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.30 KHz.' '.'1.98 KHz.' '.'3.02 KHz.' '.'4.60 KHz.' '.'7.00 KHz.' '.'10.6 KHz.' '.'20KHz'].axisTick: {
      show: false.alignWithLabel: true
    },
    axisLabel: {
      rotate:40.margin: 10 // X-axis Data distance from X-axis}},yAxis: {
    // splitLine: {show: false},
    type: 'value'.axisLine: {
      show: true.//-- whether to display
    },
    axisLabel: {
      interval: 0.margin: 10.// Y-axis Indicates the distance between the data and the Y-axis

    },
    axisTick: {
      show: false.// Display the scale corresponding to each value
    },
    nameGap: 10.splitLine: { //-- The partition line in the grid area
      show: true.//-- the 'category' category axis is not displayed. In this case, my Y-axis is the category axis. The splitLine attribute makes sense
      lineStyle: {
        color: '#DADADA'.width: 1.opacity: 0.57.type: 'dashed'./ / - type}},},// 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.// Control the distance between two columns
    height: 8.// Component height
    left: 30.// The left distance
    right: 30.// Distance to the right
    bottom: 0.// Distance to the right
    handleColor: '#D3DCFD'.//h slide icon color
    handleStyle: {
      borderColor: '#D3DCFD'.borderWidth: '1'.shadowBlur: 2.background: '#D3DCFD'.shadowColor: '#D3DCFD',},backgroundColor: '#f4f7f9'.// The color of the unselected slider area on both sides
    showDataShadow: false.// Whether to display data shadow Default auto
    showDetail: false.The default value is true
    // xAxisIndex: [0, 1] // This line of code will __dzAxisProxy error
    },
    {
      type: 'inside'.realtime: true.start: 0.end: 10],},itemStyle: { normal: { label: { show: true}}}},Copy the code

The following is an example of the implementation of the above code. If you want to see the effect, you can go to the Echarts website and copy the above code to the echarts casebarOptions:Modified intooption=The company used it, so it wrote: