数据可视化大屏 项目开发中,需要渲染echarts地图,在地图中绘制标识点,为了提升交互,需要事先准备13条数据,然后每次请求mockjs接口都需要随机从接口中取6-13条数据。
[
{
name: '新百汇社区',
value: [111.14152930113444, 36.15093718050324],
}, {
name: '新百汇社区',
value: [111.38229588336162, 36.230560774625616],
},{
name: '御景社区',
value: [111.3481714858806, 36.07813846587707],
},{
name: '社区1',
value: [111.76780845154134, 36.07254273134508],
},{
name: '社区2',
value: [111.63948259233273, 36.013652104483455],
},{
name: '社区3',
value: [111.47534486543799, 36.1083545990312],
},{
name: '社区4',
value: [111.53801563388872, 36.1943030814779],
},{
name: '社区5',
value: [111.5131462813289, 36.0335475865313],
},{
name: '社区6',
value: [111.31120713854327, 36.165653587329],
},{
name: '社区7',
value: [111.41864274160163, 36.16963268373857],
},{
name: '社区8',
value: [111.59471775772508, 36.10755877974929],
},{
name: '社区9',
value: [111.24555204778537, 36.11472115328651],
},{
name: '社区10',
value: [111.58278046849637, 35.978636056079246],
},
]
数据处理
要从数组中随机获取6到13个数据,你可以首先复制数组,然后将其打乱,最后截取所需的随机长度。以下是如何做到这一点:
function getRandomSubArray(arr) {
// 首先,复制原始数组以避免修改它
const tempArr = arr.slice();
// 打乱数组
for (let i = tempArr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[tempArr[i], tempArr[j]] = [tempArr[j], tempArr[i]]; // 交换元素
}
// 获取6到13之间的随机数
const randomLength = Math.floor(Math.random() * (13 - 6 + 1)) + 6;
// 截取数组并返回
return tempArr.slice(0, randomLength);
}
const data = [
//... 你的数组数据
];
const randomData = getRandomSubArray(data);
console.log(randomData);
上述函数首先复制了传入的数组,并使用现代版的Fisher-Yates洗牌算法打乱它。之后,它使用Math.random()
来获取一个介于6和13之间的随机数,并用这个数来截取打乱后的数组的前n个元素。
mockjs接口生成
// 地图数据生成
// vue3 使用mockjs生成 地图数据生成接口
{
url: '/api/mapData',
method: 'get',
response: () => {
function getRandomSubArray(arr) {
// 首先,复制原始数组以避免修改它
const tempArr = arr.slice();
// 打乱数组
for (let i = tempArr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[tempArr[i], tempArr[j]] = [tempArr[j], tempArr[i]]; // 交换元素
}
// 获取6到13之间的随机数
const randomLength = Math.floor(Math.random() * (13 - 6 + 1)) + 6;
// 截取数组并返回
return tempArr.slice(0, randomLength);
}
var list = [
{
name: '新百汇社区',
value: [111.14152930113444, 36.15093718050324],
}, {
name: '新百汇社区',
value: [111.38229588336162, 36.230560774625616],
}, {
name: '御景社区',
value: [111.3481714858806, 36.07813846587707],
}, {
name: '社区1',
value: [111.76780845154134, 36.07254273134508],
}, {
name: '社区2',
value: [111.63948259233273, 36.013652104483455],
}, {
name: '社区3',
value: [111.47534486543799, 36.1083545990312],
}, {
name: '社区4',
value: [111.53801563388872, 36.1943030814779],
}, {
name: '社区5',
value: [111.5131462813289, 36.0335475865313],
}, {
name: '社区6',
value: [111.31120713854327, 36.165653587329],
}, {
name: '社区7',
value: [111.41864274160163, 36.16963268373857],
}, {
name: '社区8',
value: [111.59471775772508, 36.10755877974929],
}, {
name: '社区9',
value: [111.24555204778537, 36.11472115328651],
}, {
name: '社区10',
value: [111.58278046849637, 35.978636056079246],
},
]
return {
data: getRandomSubArray(list),
message: '成功',
code: 0
}
},
},