echarts动态散点图+正弦图背景

原创

已于 2022-02-28 10:14:41 修改 · 1.3k 阅读

标签

#echarts #javascript #前端

收录于

于 2022-02-28 10:13:31 首次发布

该博客介绍了如何使用Echarts库创建一个动态散点图，并结合正弦曲线作为背景。通过提供的代码示例，展示了如何生成随机坐标数据、设置图表样式以及实现数据更新以达到动态效果。内容涵盖了坐标轴配置、视觉映射和散点图与线图的组合使用。

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