在做项目中需要在同一幅图中展示正弦曲线和散点图,而且正弦曲线的周期必须为一个周期且需跟着散点的数据进行联动,在网上找了好多资料,无果,只好自己硬着头皮干,下面是这部分的代码
已封装成一个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 就必须的,如果有幸遇上大佬知道这个参数的具体含义,烦请跟我解释下呢。