echarts动态散点图+正弦图背景:
动态效果视频:动态效果视频链接
代码:
// 正弦波背景
function func (x) {
x /= 57.2;
return Math.sin(x) * 40 + 30;
}
function sinData () {
let sindata = [];
for (let i = 0; i <= 360; i += 0.1) {
sindata.push([i, func(i)]);
}
return sindata;
}
// 产生5000个随机坐标
function generateData () {
var data = [];
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 100; j++) {
data.push([i, j * 3.6, Math.floor(Math.random() * 51)]);
}
}
return data;
}
// 将3600个三维坐标转化为二维坐标
function creatArray (data) {
var array = data.map(item => [item[1], item[2]])
var arr = array.map(item => [...item, array.filter(ins => ins[0] === item[0] && ins[1] === item[1]).length]);
return arr;
}
var data = generateData();
var arr = creatArray(data);
var option = {
title: {
// top:'5%',
text: 'PRPD',
left: 'center',
textStyle:{
color:'#fff',
fontSize:22,
}
},
grid: {
top: '22%',
left: '10%',
right: '22%',
bottom: '6%'
},
xAxis: {
type: 'value',
name: '相位(°)',
interval: 90, //坐标轴刻度标签的显示间隔
min: 0,
max: 360,
axisLine: {
// show: true,
// interval: 5, // (此处无效?)坐标轴刻度标签的显示间隔,在类目轴中有效。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
lineStyle: {
color: '#fff',
width: 1,//这里是为了突出显示加上的
},
},
axisLabel: {
show: true,
margin: 8, // x轴的刻度值到x轴的距离
interval: 0, // 可控制坐标轴刻度标签的显示间隔,在类目轴中有效
textStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: '幅值(dB)',
min: -10, // 最小值
max: 70,
interval: 40,
// 坐标轴轴线
axisLine: {
show: true,
// interval: 5, // (此处无效?)坐标轴刻度标签的显示间隔,在类目轴中有效。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
lineStyle: {
color: '#fff',
width: 1,//这里是为了突出显示加上的
},
},
// 坐标轴刻度标签
axisLabel: {
show: true,
margin: 6, // y轴的刻度值到y轴的距离
interval: 0, // 可控制坐标轴刻度标签的显示间隔,在类目轴中有效。
formatter: '{value}', // 自定义x轴显示数据标签格式
textStyle: {
color: '#fff'
}
}
},
visualMap: [
{
left: 'right',
top: '5%',
right: 5,
min: 0,
max: 5,
dimension: 2, //指定用数据的『哪个维度』,映射到视觉元素上
orient: 'vertical',
// top: 'center',
itemWidth:10,
itemHeight:120,
text: ['放电次数(次)'],
textGap: 20, //组件与text之间的距离
calculable: true, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)
hoverLink: true, //鼠标悬浮到 visualMap 组件上时,鼠标位置对应的数值 在 图表中对应的图形元素,会高亮
textStyle: {
color: '#fff',
fontSize:12,
},
inRange: {
color: ['#c1da1f', '#bc872a', '#c02221'],
},
}
],
series: [
// 正弦波
{
type: 'line',
showSymbol: false,
clip: true,
data: sinData(),
color: '#fff'
},
// 散点图
{
symbolSize: 3, //散点的大小
data: arr,
type: 'scatter',
symbol: 'rectangle', //设置散点图形状
}
]
};
setInterval(function () {
for (var num = 0; num < 5000; num++) {
var tem = data[num][0];
// +10代表增加10个周期
data[num][0] = tem + 10
}
for (var num3 = 0; num3 <= 9; num3++) {
for (var num2 = 0; num2 <= 100; num2++) {
// num2 * 5是因为一周期有71个数但是坐标轴是[0,3600],所以一格代表3.6,故乘以3.6
data.unshift([num3, num2 * 3.6, Math.floor(Math.random() * 51)])
data.pop()
}
}
var array = data.map(item => [item[1], item[2]]) //[x,y,z]=>[y,z]
var arr = array.map(item => [...item, array.filter(ins => ins[0] === item[0] && ins[1] === item[1]).length]);
myChart.setOption({
series: [
// 正弦波
{
type: 'line',
showSymbol: false,
clip: true,
data: sinData(),
color: '#fff'
},
// 散点图
{
symbolSize: 3, //散点的大小
data: arr,
type: 'scatter',
symbol: 'rectangle', //设置散点图形状
}
]
})
}, 200);