const rawData = window.atob(item.data.obj.Wave); // 首先把后台传来的数据使用window.atob()方法解码
const outputArray = new ArrayBuffer(rawData.length); // 结完后我们去获取数据的长度,使用
new ArrayBuffer()方法 ### ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 的内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。###
let arrByte = new Uint8Array(outputArray); // Uint8Array 数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
for (let i = 0; i < rawData.length; ++i) {
arrByte[i] = rawData.charCodeAt(i); // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
}
const dv = new DataView(outputArray); // DataView 视图是一个可以从二进制ArrayBuffer 对象中读写多种数值类型的底层接口,使用它时,不用考虑不同平台的字节序问题。
let fArr = []; for (let i = 0; i < outputArray.byteLength / 4; i++) { // byteLength 获取 outputArray的长度
fArr[i] = dv.getFloat32(i * 4, true); // 使用DataView中的内置方法 getFloat32 ,在相对于视图开始处的指定字节偏移量位置处获取 Float32 值。没有对齐约束;可从任何偏移量获取多字节值
}
let leftNum = item.data.obj.XAxisLen / fArr.length;
let colArr = [];
let colArrs = [];
for (let i = 0; i < fArr.length; i++) {
colArr.push((i + 1) * leftNum);
}
for (let i = 0; i < colArr.length; i++) {
colArrs.push(colArr[i].toFixed(3)); // 项目要求保留3位小数
}
this.xAxisArr = colArrs; // x轴的值
this.seriesArr = fArr; // series中的值
setTimeout(item => { this.$refs.child.drawLine(); }, 0); // 直接调用时有时图表不会更新,可以给一个定时器或者使用this.$nextTick
使用Echarts后台传来的值是base64编码时前端解码
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 二进制数组(ArrayBuffer对象、TypedArray视图和DataView视图)是JavaScript操作...
- 前言 二进制数组是JavaScript用来操作二进制数据的一个接口。有ArrayBuffer对象、TypedArr...