Bootstrap

Echarts实现正弦曲线和散点图

在做项目中需要在同一幅图中展示正弦曲线和散点图,而且正弦曲线的周期必须为一个周期且需跟着散点的数据进行联动,在网上找了好多资料,无果,只好自己硬着头皮干,下面是这部分的代码

已封装成一个Vue组件

<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      dotData: {
        type: Array,
        default () {
          return []
        }
      },
      limitData: {
        type: Array,
        default () {
          return []
        }
      },
      maxData:{
        type:Number,
        default(){
          return 0
        }
      }
    },
    watch: {
      dotData(newVal) {
        this.dataDot = newVal
      },
      limitData(val) {
        this.dataLimit = val
      },
      maxData(value){
        this.dataMax = value
        this.initChart(this.dataDot, this.dataLimit,this.dataMax)
      }
    },
    data() {
      return {
        chart: null,
        dataDot: [],
        dataLimit: [],
        dataMax:0
      }
    },
    mounted() {
      this.initChart(this.dataDot, this.dataLimit,this.dataMax)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart(Dot, Limit,Max) {
        this.chart = echarts.init(document.getElementById(this.id))

        const xAxisData = []
        const data = []
        // 当页面初始化需要展示正弦的时候就使用 ω 不需要展示则直接使用 Max
        // Max这里表示最大值
        const ω = Max + 2
        for (let i = 0; i < ω; i+=0.01) {
          xAxisData.push(i)
          // y=Asin(ωx+φ) + k
          data.push((Math.sin(i/(ω/6.25))))
        }

        this.chart.setOption({
          title: {
            text: 'PRPS谱图',
            textStyle: {
              fontStyle: 'normal',
              fontWeight: '400'
            },
            left: 20,
            top: 10
          },
          grid: {
            left: '10%',
            top: '15%'
          },
          tooltip: {
            trigger: 'item',
            formatter: '[{c}]'
          },
          xAxis: [{
            type: 'value',
            name: 'X',
            scale: true
          }, {
            show: false,
            data: xAxisData
          }],
          yAxis: {
            type: 'value',
            name: 'Y',
            scale: true
          },
          series: [{
            type: 'effectScatter',
            symbolSize: 20,
            rippleEffect: {
              color: '#f5d69f'
            },
            itemStyle: {
              color: '#f5d69f'
            },
            data: Limit
          }, {
            type: 'scatter',
            itemStyle: {
              color: '#ef5055'
            },
            data: Dot
          }, {
            name: 'front',
            type: 'line',
            data,
            xAxisIndex: 1,
            z: 3,
            symbol:'none'
          }]
        })
      }
    }
  }
</script>

关键点就在于

const ω = Max + 2
        for (let i = 0; i < ω; i+=0.01) {
          xAxisData.push(i)
          // y=Asin(ωx+φ) + k
          data.push((Math.sin(i/(ω/6.25))))
        }

这串代码中 6.25 这个参数非常的关键,别问我这个参数怎么来的,我也不知道哈哈哈,我是自己一次次尝试出来的,最后发现如果只想要完成一个周期这个 6.25 就必须的,如果有幸遇上大佬知道这个参数的具体含义,烦请跟我解释下呢。

;