1143 lines
39 KiB
JavaScript
1143 lines
39 KiB
JavaScript
|
||
|
||
//arr1是数据源
|
||
let set = $("#data").html();
|
||
$("#TestLogsData").html(set);
|
||
var list = set.split(',');
|
||
var arr1 = new Array(); //创建一个空数组
|
||
for (var i = 0; i < list.length; i++) {
|
||
arr1.push(Number(list[i]));
|
||
}
|
||
|
||
|
||
var total = 0;
|
||
for (var i = 0; i < arr1.length; i++) {
|
||
total += arr1[i];
|
||
}
|
||
|
||
|
||
|
||
|
||
var mCharts = echarts.init(document.getElementById('stesy'));
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: function (pt) {
|
||
return [pt[0], '10%'];
|
||
}
|
||
},
|
||
title: {
|
||
left: 'center',
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: 'none'
|
||
},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: arr1
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, '100%']
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 10
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 10
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
symbol: 'none',
|
||
sampling: 'lttb',
|
||
itemStyle: {
|
||
color: 'rgb(26,179,148)'
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(26,179,148)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(26,179,148)'
|
||
}
|
||
])
|
||
},
|
||
data: arr1
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
//option = {
|
||
////title: {
|
||
//// text: '未来一周气温变化',
|
||
//// subtext: '纯属虚构'
|
||
////},
|
||
//tooltip: {
|
||
// trigger: 'axis'
|
||
//},
|
||
////legend: {
|
||
//// data: ['最高气温']
|
||
////},
|
||
//xAxis: {
|
||
// type: 'category',
|
||
// /* boundaryGap: false,*/
|
||
// data: arr1
|
||
//},
|
||
//yAxis: {
|
||
|
||
// min: Math.min.apply(Math, arr1),
|
||
// max: Math.max.apply(Math, arr1),
|
||
// type: 'value',
|
||
// axisLabel: {
|
||
// formatter: '{value} '
|
||
// }
|
||
//},
|
||
//series: [
|
||
// {
|
||
// type: 'bar',
|
||
// data: arr1,
|
||
// markLine: {
|
||
// data: [
|
||
// { type: 'average', name: '平均值', lineStyle: { color: 'green', type: 'solid', width: 4 } },
|
||
// { type: 'max', name: '最大值' },
|
||
// { type: 'min', name: '最小值' },
|
||
// ]
|
||
// },
|
||
// },
|
||
|
||
//]
|
||
//};
|
||
mCharts.setOption(option);
|
||
|
||
//mCharts.on('mousemove', function (params) {
|
||
// // 控制台打印数据的名称
|
||
// console.log(params);
|
||
///* console.log(arr1)*/
|
||
// var arr21 = new Array(); //创建一个空数组
|
||
// if (params.componentType == "series") {
|
||
|
||
// for (var i = 0; i <= params.dataIndex; i++) {
|
||
// arr21.push(arr1[i])
|
||
// }
|
||
// }
|
||
// if (arr21.length > 0) {
|
||
// let sun = 0;
|
||
// for (var i = 0; i < arr21.length; i++) {
|
||
// sun += arr21[i]
|
||
// }
|
||
// let pingjzhi = sun / arr21.length
|
||
// console.log(arr21)
|
||
// console.log(pingjzhi)
|
||
// }
|
||
|
||
//});
|
||
|
||
|
||
|
||
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
// 首页正态曲线的计算公式
|
||
mathJax: '`f(x) = (1 / (\sqrt {2\pi} \sigma)) e^(-(x-\mu)^2/(2\sigma^2))`',
|
||
// 数据源（从隔壁的 js 文件中引入）
|
||
json: {
|
||
"R1": [], "R2": [], "R3": [] },
|
||
// 页面中输入的数据。初始默认为 json 文件
|
||
input: '', // 数组的 watch 监听不太方便处理
|
||
// 是否为样本数据
|
||
isSample: true,
|
||
|
||
},
|
||
watch: {
|
||
|
||
// 监听输入框，即时更新图形
|
||
input: function (val) {
|
||
this.input = val;
|
||
this.loadChartsSeried() // 加载数据
|
||
this.initChartsData('chart') // 生成 Echarts 图
|
||
},
|
||
},
|
||
computed: {
|
||
|
||
/**
|
||
* @Description： 获取数据源
|
||
w
|
||
* @Date： 2020-11-27 14:56:w
|
||
* */
|
||
data: {
|
||
get() {
|
||
// 因为数组的监听不太好处理，所以多转换一次
|
||
return this.input.split(',').map(t => parseFloat(t))
|
||
},
|
||
set(v) {
|
||
// 如果给 data 赋值，只能是数组类型
|
||
if (!(v instanceof Array)) return
|
||
// 同步更新 input 的值
|
||
this.input = v.join(',')
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 有序数据源（方便操作）
|
||
|
||
* @Date： 2020-11-28 14:17:24
|
||
* */
|
||
dataOrderBy() {
|
||
const data = this.data.concat([]); // 为防止 sort 方法修改原数组，对原数组进行拷贝，操作副本。
|
||
return data.sort((a, b) => a - b)
|
||
},
|
||
/**
|
||
* @Description： 数据整理。原数据整理为：{数据值 : 数据频率}
|
||
|
||
* @Date： 2020-11-28 13:59:12
|
||
* */
|
||
dataAfterClean() {
|
||
let res = {}
|
||
const data = this.dataOrderBy
|
||
for (let i = 0; i < this.data.length; i++) {
|
||
let key = parseFloat(this.data[i]).toFixed(1) // 这里保留 1 位小数
|
||
if (key !== "NaN" && parseFloat(key) === 0)
|
||
key = "0.0" //这个判断用来处理保留小数位后 -0.0 和 0.0 判定为不同 key 的 bug
|
||
if (res[key])
|
||
res[key] += 1
|
||
else
|
||
res[key] = 1
|
||
}
|
||
return res
|
||
},
|
||
|
||
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值（排序后）
|
||
|
||
* @Date： 2020-11-28 14:35:52
|
||
* */
|
||
dataAfterCleanX() {
|
||
return Object.keys(this.dataAfterClean).sort((a, b) => a - b).map(t => parseFloat(t)
|
||
.toFixed(1)) // 保留 1 位小数
|
||
// return Object.keys(this.dataAfterClean) // 不保证顺序一致
|
||
},
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值对应的频率（排序后） -- 与 dataAfterCleanX 顺序一致
|
||
|
||
* @Date： 2020-11-28 13:59:12
|
||
* */
|
||
dataAfterCleanY() {
|
||
let r = []
|
||
for (let i = 0; i < this.dataAfterCleanX.length; i++) {
|
||
r.push(this.dataAfterClean[this.dataAfterCleanX[i]])
|
||
}
|
||
return r
|
||
},
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值对应的频率，刻度更细致（保留 2 位小数） -- 与 dataAfterCleanX 顺序一致
|
||
|
||
* @Date： 2020-11-29 13:59:22
|
||
* */
|
||
dataAfterCleanXSub() {
|
||
let r = []
|
||
for (let i = parseFloat(this.min.toFixed(1)); i <= parseFloat(this.max.toFixed(1)); i +=
|
||
0.01)
|
||
r.push(i.toFixed(2))
|
||
//console.log(r)
|
||
return r
|
||
},
|
||
|
||
/**
|
||
* @Description： 计算平均数。这里的平均数指的是数学期望、算术平均数
|
||
|
||
* @Date： 2020-11-27 15:24:14
|
||
* */
|
||
sum() {
|
||
if (this.data.length === 0) return 0
|
||
return this.data.reduce((prev, curr) => prev + curr)
|
||
},
|
||
/**
|
||
* @Description： 计算平均数。这里的平均数指的是数学期望、算术平均数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
average() {
|
||
return this.sum / this.data.length
|
||
},
|
||
/**
|
||
* @Description： 计算众数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
mode() {
|
||
return 0
|
||
},
|
||
/**
|
||
* @Description： 计算中位数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
median() {
|
||
const data = this.dataOrderBy
|
||
return (data[(data.length - 1) >> 1] + data[data.length >> 1]) / 2
|
||
},
|
||
/**
|
||
* @Description： 计算偏差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
deviation() {
|
||
// 1、求平均数
|
||
const avg = this.average
|
||
// 2、返回偏差。 f(x) = x - avg
|
||
return this.data.map(x => x - avg)
|
||
},
|
||
/**
|
||
* @Description： 计算总体/样本方差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
variance() {
|
||
if (this.data.length === 0) return 0
|
||
// 1、求偏差
|
||
const dev = this.deviation
|
||
// 2、求偏差平方和
|
||
const sumOfSquOfDev = dev.map(x => x * x).reduce((x, y) => x + y)
|
||
// 3、返回方差
|
||
return sumOfSquOfDev / (this.isSample ? (this.data.length - 1) : this.data.length)
|
||
},
|
||
/**
|
||
* @Description： 计算总体/样本标准差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
standardDeviation() {
|
||
return Math.sqrt(this.variance)
|
||
},
|
||
/**
|
||
* @Description： 计算一倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
standarDevRangeOfOne() {
|
||
return {
|
||
low: this.average - 1 * this.standardDeviation,
|
||
up: this.average + 1 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算三倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:29:43
|
||
* */
|
||
standarDevRangeOfTwo() {
|
||
return {
|
||
low: this.average - 2 * this.standardDeviation,
|
||
up: this.average + 2 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算三倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:30:49
|
||
* */
|
||
standarDevRangeOfThree() {
|
||
return {
|
||
low: this.average - 3 * this.standardDeviation,
|
||
up: this.average + 3 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算最小值
|
||
|
||
* @Date： 2020-11-28 13:19:06
|
||
* */
|
||
min() {
|
||
return Math.min.apply(null, this.data)
|
||
},
|
||
/**
|
||
* @Description： 计算最大值
|
||
|
||
* @Date： 2020-11-28 13:21:16
|
||
* */
|
||
max() {
|
||
return Math.max.apply(null, this.data)
|
||
},
|
||
/**
|
||
* @Description： 正态分布(高斯分布)计算公式
|
||
|
||
* @Date： 2020-11-28 13:46:18
|
||
* */
|
||
normalDistribution() {
|
||
// 计算公式： `f(x) = (1 / (\sqrt {2\pi} \sigma)) e^(-(x-\mu)^2/(2\sigma^2))`
|
||
// return (1 / Math.sqrt(2 * Math.PI) * a) * (Math.exp(-1 * ((x - u) * (x - u)) / (2 * a * a)))
|
||
let res = []
|
||
for (let i = 0; i < this.dataAfterCleanX.length; i++) {
|
||
const x = this.dataAfterCleanX[i]
|
||
const a = this.standardDeviation
|
||
const u = this.average
|
||
const y = (1 / (Math.sqrt(2 * Math.PI) * a)) * (Math.exp(-1 * ((x - u) * (x - u)) / (2 *
|
||
a * a)))
|
||
res.push(y)
|
||
}
|
||
return res
|
||
},
|
||
|
||
//Averagemarks() {
|
||
// var yArr = [];
|
||
// var sumFuc = (s, c) => formulaCalcByFunc(s + c, 6);//求和匿名函数，formulaCalc为了减少精度误差，可以自己写;
|
||
// var ysum = this.data.reduce(sumFuc, 0)
|
||
// for (var n = 0; n < this.data.length; n++) {
|
||
// var y = this.data[n] / ysum;
|
||
// yArr.push(y);
|
||
// }
|
||
// var avg = math.mean(yArr);
|
||
//},
|
||
|
||
AveragemarksRang() {
|
||
return (this.max - this.min)/11;
|
||
},
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
|
||
|
||
this.data = arr1;
|
||
this.loadChartsSeried() // 加载数据
|
||
this.initChartsData('chart') // 生成 Echarts 图
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
|
||
numFilter(value) {
|
||
|
||
const realVal = parseFloat(value).toFixed(2);
|
||
|
||
return realVal;
|
||
|
||
},
|
||
|
||
|
||
/**
|
||
* @Description： 加载 Echarts 图所需数据
|
||
*
|
||
* @Params url
|
||
*
|
||
* @return
|
||
|
||
* @Date： 2020-11-27 13:24:26
|
||
* */
|
||
loadChartsSeried() {
|
||
this.json = this.json
|
||
},
|
||
|
||
|
||
/**
|
||
* @Description： 生成 Echarts 图
|
||
*
|
||
* @Params ref：容器
|
||
*
|
||
* @return
|
||
|
||
* @Date： 2020-11-27 13:23:26
|
||
* */
|
||
initChartsData(ref) {
|
||
let chart = this.$refs[ref]
|
||
if (!chart) return
|
||
chart = echarts.init(chart)
|
||
// Echarts 图的配置
|
||
let options = {
|
||
// Echarts 图 -- 标题
|
||
title: {
|
||
//text: 'Echarts 绘制正态分布曲线（有 3 组示例数据，刷新随机显示）'
|
||
},
|
||
// Echarts 图 -- 工具
|
||
tooltip: {},
|
||
// Echarts 图 -- 图例
|
||
legend: {
|
||
data: ['f(x)']
|
||
},
|
||
// Echarts 图 -- x 坐标轴刻度 -- 正态分布数值
|
||
xAxis: [{
|
||
// name : "标准刻度(0.1)",
|
||
data: this.dataAfterCleanX,
|
||
// min: this.min,
|
||
// max: this.max
|
||
}],
|
||
// Echarts 图 -- y 坐标轴刻度
|
||
yAxis: [{
|
||
type: 'value',
|
||
//name: '频数',
|
||
position: 'left',
|
||
// 网格线
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'orange'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
//name: '概率',
|
||
position: 'right',
|
||
// 网格线
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'black'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
],
|
||
// Echarts 图 -- y 轴数据
|
||
series: [{
|
||
name: '源数据', // y 轴名称
|
||
type: 'bar', // y 轴类型
|
||
yAxisIndex: 0,
|
||
barGap: 0,
|
||
barWidth: 27,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: '#1ab394', //柱子颜色
|
||
borderColor: '#FF7F50' //边框颜色
|
||
}
|
||
},
|
||
data: this.dataAfterCleanY, // y 轴数据 -- 源数据
|
||
}, {
|
||
name: '正态分布', // y 轴名称
|
||
type: 'line', // y 轴类型
|
||
symbol: 'none', //去掉折线图中的节点
|
||
smooth: true, //true 为平滑曲线
|
||
yAxisIndex: 1,
|
||
data: this.normalDistribution, // y 轴数据 -- 正态分布
|
||
// 警示线
|
||
markLine: {
|
||
symbol: ['none'], // 箭头方向
|
||
lineStyle: {
|
||
type: "silent",
|
||
color: "green",
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: 'black'
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "middle"
|
||
},
|
||
data: [{
|
||
name: '一倍标准差',
|
||
xAxis: this.standarDevRangeOfOne.low.toFixed(1),
|
||
// 当 n 倍标准差在坐标轴外时，将其隐藏，否则它会默认显示在最小值部分，容易引起混淆
|
||
lineStyle: {
|
||
opacity: (this.min > this.standarDevRangeOfOne
|
||
.low) ? 0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.min > this.standarDevRangeOfOne.low)
|
||
}
|
||
}, {
|
||
name: '一倍标准差',
|
||
xAxis: this.standarDevRangeOfOne.up.toFixed(1),
|
||
lineStyle: {
|
||
opacity: (this.max < this.standarDevRangeOfOne.up) ?
|
||
0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.max < this.standarDevRangeOfOne.up)
|
||
}
|
||
}, {
|
||
name: '二倍标准差',
|
||
xAxis: this.standarDevRangeOfTwo.low.toFixed(1),
|
||
lineStyle: {
|
||
opacity: (this.min > this.standarDevRangeOfTwo
|
||
.low) ? 0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.min > this.standarDevRangeOfTwo.low)
|
||
}
|
||
}, {
|
||
name: '二倍标准差',
|
||
xAxis: this.standarDevRangeOfTwo.up.toFixed(1),
|
||
lineStyle: {
|
||
opacity: (this.max < this.standarDevRangeOfTwo
|
||
.up) ? 0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.max < this.standarDevRangeOfTwo.up)
|
||
}
|
||
}, {
|
||
name: '三倍标准差',
|
||
xAxis: this.standarDevRangeOfThree.low.toFixed(1),
|
||
lineStyle: {
|
||
opacity: (this.min > this.standarDevRangeOfThree
|
||
.low) ? 0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.min > this.standarDevRangeOfThree.low)
|
||
}
|
||
}, {
|
||
name: '三倍标准差',
|
||
xAxis: this.standarDevRangeOfThree.up.toFixed(1),
|
||
lineStyle: {
|
||
opacity: (this.max < this.standarDevRangeOfThree
|
||
.up) ? 0 : 1
|
||
},
|
||
label: {
|
||
show: !(this.max < this.standarDevRangeOfThree.up)
|
||
}
|
||
}, {
|
||
name: '平均值',
|
||
// type: 'average',
|
||
xAxis: this.average.toFixed(1),
|
||
lineStyle: {
|
||
color: 'red'
|
||
}
|
||
}, ]
|
||
}
|
||
}],
|
||
|
||
}
|
||
chart.setOption(options)
|
||
window.addEventListener("resize", () => {
|
||
chart.resize()
|
||
})
|
||
},
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
var app2 = new Vue({
|
||
el: '#app2',
|
||
data: {
|
||
// 首页正态曲线的计算公式
|
||
mathJax: '`f(x) = (1 / (\sqrt {2\pi} \sigma)) e^(-(x-\mu)^2/(2\sigma^2))`',
|
||
// 数据源（从隔壁的 js 文件中引入）
|
||
json: {
|
||
"R1": [], "R2": [], "R3": []
|
||
},
|
||
// 页面中输入的数据。初始默认为 json 文件
|
||
input: '', // 数组的 watch 监听不太方便处理
|
||
// 是否为样本数据
|
||
isSample: true,
|
||
|
||
datares: "",
|
||
},
|
||
watch: {
|
||
// 监听输入框，即时更新图形
|
||
input: function (val) {
|
||
this.input = val;
|
||
this.loadChartsSeried() // 加载数据
|
||
this.initChartsData('chart') // 生成 Echarts 图
|
||
},
|
||
},
|
||
computed: {
|
||
|
||
/**
|
||
* @Description： 获取数据源
|
||
w
|
||
* @Date： 2020-11-27 14:56:w
|
||
* */
|
||
data: {
|
||
get() {
|
||
// 因为数组的监听不太好处理，所以多转换一次
|
||
return this.input.split(',').map(t => parseFloat(t))
|
||
},
|
||
set(v) {
|
||
// 如果给 data 赋值，只能是数组类型
|
||
if (!(v instanceof Array)) return
|
||
// 同步更新 input 的值
|
||
this.input = v.join(',')
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 有序数据源（方便操作）
|
||
|
||
* @Date： 2020-11-28 14:17:24
|
||
* */
|
||
dataOrderBy() {
|
||
const data = this.data.concat([]); // 为防止 sort 方法修改原数组，对原数组进行拷贝，操作副本。
|
||
return data.sort((a, b) => a - b)
|
||
},
|
||
/**
|
||
* @Description： 数据整理。原数据整理为：{数据值 : 数据频率}
|
||
|
||
* @Date： 2020-11-28 13:59:12
|
||
* */
|
||
|
||
dataAfterClean() {
|
||
let res = {}
|
||
for (var i = 0; i < 11; i++) {
|
||
//分成11份
|
||
var res1 = this.min + (this.AveragemarksRang * i);
|
||
res1 = String(res1);
|
||
if (res1.indexOf(".") != -1) {
|
||
//有小数点就截取小数点后两位
|
||
res1 = res1.substring(0, res1.indexOf(".") + 3);
|
||
} else {
|
||
//没有小数点就添加两位
|
||
res1 = res1+".00"
|
||
}
|
||
if (res1.length != 5) {
|
||
//判断长度是否符合柱形图的小数点后两位
|
||
res1 = res1+"0"
|
||
}
|
||
res[res1] = 0;
|
||
}
|
||
var reskey = Object.keys(res);
|
||
for (var i = 0; i < this.data.length; i++) {
|
||
for (var tmp in res) {
|
||
let key = parseFloat(this.data[i]) // 这里保留 1 位小数
|
||
if (key !== "NaN" && parseFloat(key) === 0) {
|
||
key = "0.0" //这个判断用来处理保留小数位后 -0.0 和 0.0 判定为不同 key 的 bug
|
||
}
|
||
if (key <= tmp) {
|
||
res[tmp] += 1;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
for (var i = 0; i < res.length; i++) {
|
||
}
|
||
this.datares = res;
|
||
return res
|
||
},
|
||
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值（排序后）
|
||
|
||
* @Date： 2020-11-28 14:35:52
|
||
* */
|
||
dataAfterCleanX() {
|
||
return Object.keys(this.dataAfterClean).sort((a, b) => a - b).map(t => parseFloat(t)
|
||
.toFixed(2)) // 保留 1 位小数
|
||
// return Object.keys(this.dataAfterClean) // 不保证顺序一致
|
||
},
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值对应的频率（排序后） -- 与 dataAfterCleanX 顺序一致
|
||
|
||
* @Date： 2020-11-28 13:59:12
|
||
* */
|
||
dataAfterCleanY() {
|
||
let r = []
|
||
for (let i = 0; i < this.dataAfterCleanX.length; i++) {
|
||
r.push(this.dataAfterClean[this.dataAfterCleanX[i]])
|
||
}
|
||
return r
|
||
},
|
||
/**
|
||
* @Description： 数据整理。返回源数据所有值对应的频率，刻度更细致（保留 2 位小数） -- 与 dataAfterCleanX 顺序一致
|
||
|
||
* @Date： 2020-11-29 13:59:22
|
||
* */
|
||
dataAfterCleanXSub() {
|
||
let r = []
|
||
for (let i = parseFloat(this.min.toFixed(1)); i <= parseFloat(this.max.toFixed(1)); i +=
|
||
0.01)
|
||
r.push(i.toFixed(2))
|
||
//console.log(r)
|
||
return r
|
||
},
|
||
|
||
/**
|
||
* @Description： 计算平均数。这里的平均数指的是数学期望、算术平均数
|
||
|
||
* @Date： 2020-11-27 15:24:14
|
||
* */
|
||
sum() {
|
||
if (this.data.length === 0) return 0
|
||
return this.data.reduce((prev, curr) => prev + curr)
|
||
},
|
||
/**
|
||
* @Description： 计算平均数。这里的平均数指的是数学期望、算术平均数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
average() {
|
||
return this.sum / this.data.length
|
||
},
|
||
/**
|
||
* @Description： 计算众数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
mode() {
|
||
return 0
|
||
},
|
||
/**
|
||
* @Description： 计算中位数
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
median() {
|
||
const data = this.dataOrderBy
|
||
return (data[(data.length - 1) >> 1] + data[data.length >> 1]) / 2
|
||
},
|
||
/**
|
||
* @Description： 计算偏差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
deviation() {
|
||
// 1、求平均数
|
||
const avg = this.average
|
||
// 2、返回偏差。 f(x) = x - avg
|
||
return this.data.map(x => x - avg)
|
||
},
|
||
/**
|
||
* @Description： 计算总体/样本方差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
variance() {
|
||
if (this.data.length === 0) return 0
|
||
// 1、求偏差
|
||
const dev = this.deviation
|
||
// 2、求偏差平方和
|
||
const sumOfSquOfDev = dev.map(x => x * x).reduce((x, y) => x + y)
|
||
// 3、返回方差
|
||
return sumOfSquOfDev / (this.isSample ? (this.data.length - 1) : this.data.length)
|
||
},
|
||
/**
|
||
* @Description： 计算总体/样本标准差
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
standardDeviation() {
|
||
return Math.sqrt(this.variance)
|
||
},
|
||
/**
|
||
* @Description： 计算一倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:26:03
|
||
* */
|
||
standarDevRangeOfOne() {
|
||
return {
|
||
low: this.average - 1 * this.standardDeviation,
|
||
up: this.average + 1 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算三倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:29:43
|
||
* */
|
||
standarDevRangeOfTwo() {
|
||
return {
|
||
low: this.average - 2 * this.standardDeviation,
|
||
up: this.average + 2 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算三倍标准差范围
|
||
|
||
* @Date： 2020-11-27 15:30:49
|
||
* */
|
||
standarDevRangeOfThree() {
|
||
return {
|
||
low: this.average - 3 * this.standardDeviation,
|
||
up: this.average + 3 * this.standardDeviation
|
||
}
|
||
},
|
||
/**
|
||
* @Description： 计算最小值
|
||
|
||
* @Date： 2020-11-28 13:19:06
|
||
* */
|
||
min() {
|
||
return Math.min.apply(null, this.data)
|
||
},
|
||
/**
|
||
* @Description： 计算最大值
|
||
|
||
* @Date： 2020-11-28 13:21:16
|
||
* */
|
||
max() {
|
||
return Math.max.apply(null, this.data)
|
||
},
|
||
/**
|
||
* @Description： 正态分布(高斯分布)计算公式
|
||
|
||
* @Date： 2020-11-28 13:46:18
|
||
* */
|
||
normalDistribution() {
|
||
// 计算公式： `f(x) = (1 / (\sqrt {2\pi} \sigma)) e^(-(x-\mu)^2/(2\sigma^2))`
|
||
// return (1 / Math.sqrt(2 * Math.PI) * a) * (Math.exp(-1 * ((x - u) * (x - u)) / (2 * a * a)))
|
||
let res = []
|
||
for (let i = 0; i < this.dataAfterCleanX.length; i++) {
|
||
const x = this.dataAfterCleanX[i]
|
||
const a = this.standardDeviation
|
||
const u = this.average
|
||
const y = (1 / (Math.sqrt(2 * Math.PI) * a)) * (Math.exp(-1 * ((x - u) * (x - u)) / (2 *
|
||
a * a)))
|
||
res.push(y)
|
||
}
|
||
return res
|
||
},
|
||
|
||
|
||
AveragemarksRang() {
|
||
return (this.max - this.min) / 11;
|
||
},
|
||
|
||
|
||
},
|
||
created() { },
|
||
mounted() {
|
||
|
||
|
||
this.data = arr1;
|
||
this.loadChartsSeried() // 加载数据
|
||
this.initChartsData('chart') // 生成 Echarts 图
|
||
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
|
||
numFilter(value) {
|
||
|
||
const realVal = parseFloat(value).toFixed(2);
|
||
|
||
return realVal;
|
||
|
||
},
|
||
|
||
|
||
/**
|
||
* @Description： 加载 Echarts 图所需数据
|
||
*
|
||
* @Params url
|
||
*
|
||
* @return
|
||
|
||
* @Date： 2020-11-27 13:24:26
|
||
* */
|
||
loadChartsSeried() {
|
||
this.json = this.json
|
||
},
|
||
|
||
|
||
/**
|
||
* @Description： 生成 Echarts 图
|
||
*
|
||
* @Params ref：容器
|
||
*
|
||
* @return
|
||
|
||
* @Date： 2020-11-27 13:23:26
|
||
* */
|
||
initChartsData(ref) {
|
||
let chart = this.$refs[ref]
|
||
if (!chart) return
|
||
chart = echarts.init(chart)
|
||
// Echarts 图的配置
|
||
let options = {
|
||
// Echarts 图 -- 标题
|
||
title: {
|
||
//text: 'Echarts 绘制正态分布曲线（有 3 组示例数据，刷新随机显示）'
|
||
},
|
||
// Echarts 图 -- 工具
|
||
tooltip: {},
|
||
// Echarts 图 -- 图例
|
||
legend: {
|
||
data: ['f(x)']
|
||
},
|
||
// Echarts 图 -- x 坐标轴刻度 -- 正态分布数值
|
||
xAxis: [{
|
||
// name : "标准刻度(0.1)",
|
||
data: this.dataAfterCleanX,
|
||
// min: this.min,
|
||
// max: this.max
|
||
}],
|
||
// Echarts 图 -- y 坐标轴刻度
|
||
yAxis: [{
|
||
type: 'value',
|
||
//name: '频数',
|
||
position: 'left',
|
||
// 网格线
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'orange'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
//name: '概率',
|
||
position: 'right',
|
||
// 网格线
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'black'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
],
|
||
// Echarts 图 -- y 轴数据
|
||
series: [{
|
||
name: '源数据', // y 轴名称
|
||
type: 'bar', // y 轴类型
|
||
yAxisIndex: 0,
|
||
barGap: 0,
|
||
barWidth: 27,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: '#1ab394', //柱子颜色
|
||
borderColor: '#FF7F50' //边框颜色
|
||
}
|
||
},
|
||
data: this.dataAfterCleanY, // y 轴数据 -- 源数据
|
||
}, {
|
||
name: '正态分布', // y 轴名称
|
||
type: 'line', // y 轴类型
|
||
symbol: 'none', //去掉折线图中的节点
|
||
smooth: true, //true 为平滑曲线
|
||
yAxisIndex: 1,
|
||
//data: this.normalDistribution, // y 轴数据 -- 正态分布
|
||
// 警示线
|
||
//markLine: {
|
||
// symbol: ['none'], // 箭头方向
|
||
// lineStyle: {
|
||
// type: "silent",
|
||
// color: "green",
|
||
// },
|
||
// itemStyle: {
|
||
// normal: {
|
||
// show: true,
|
||
// color: 'black'
|
||
// }
|
||
// },
|
||
// label: {
|
||
// show: true,
|
||
// position: "middle"
|
||
// },
|
||
// data: [{
|
||
// name: '一倍标准差',
|
||
// xAxis: this.standarDevRangeOfOne.low.toFixed(1),
|
||
// // 当 n 倍标准差在坐标轴外时，将其隐藏，否则它会默认显示在最小值部分，容易引起混淆
|
||
// lineStyle: {
|
||
// opacity: (this.min > this.standarDevRangeOfOne
|
||
// .low) ? 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.min > this.standarDevRangeOfOne.low)
|
||
// }
|
||
// }, {
|
||
// name: '一倍标准差',
|
||
// xAxis: this.standarDevRangeOfOne.up.toFixed(1),
|
||
// lineStyle: {
|
||
// opacity: (this.max < this.standarDevRangeOfOne.up) ?
|
||
// 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.max < this.standarDevRangeOfOne.up)
|
||
// }
|
||
// }, {
|
||
// name: '二倍标准差',
|
||
// xAxis: this.standarDevRangeOfTwo.low.toFixed(1),
|
||
// lineStyle: {
|
||
// opacity: (this.min > this.standarDevRangeOfTwo
|
||
// .low) ? 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.min > this.standarDevRangeOfTwo.low)
|
||
// }
|
||
// }, {
|
||
// name: '二倍标准差',
|
||
// xAxis: this.standarDevRangeOfTwo.up.toFixed(1),
|
||
// lineStyle: {
|
||
// opacity: (this.max < this.standarDevRangeOfTwo
|
||
// .up) ? 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.max < this.standarDevRangeOfTwo.up)
|
||
// }
|
||
// }, {
|
||
// name: '三倍标准差',
|
||
// xAxis: this.standarDevRangeOfThree.low.toFixed(1),
|
||
// lineStyle: {
|
||
// opacity: (this.min > this.standarDevRangeOfThree
|
||
// .low) ? 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.min > this.standarDevRangeOfThree.low)
|
||
// }
|
||
// }, {
|
||
// name: '三倍标准差',
|
||
// xAxis: this.standarDevRangeOfThree.up.toFixed(1),
|
||
// lineStyle: {
|
||
// opacity: (this.max < this.standarDevRangeOfThree
|
||
// .up) ? 0 : 1
|
||
// },
|
||
// label: {
|
||
// show: !(this.max < this.standarDevRangeOfThree.up)
|
||
// }
|
||
// }, {
|
||
// name: '平均值',
|
||
// // type: 'average',
|
||
// xAxis: this.average.toFixed(1),
|
||
// lineStyle: {
|
||
// color: 'red'
|
||
// }
|
||
// },]
|
||
//}
|
||
}],
|
||
|
||
}
|
||
chart.setOption(options)
|
||
window.addEventListener("resize", () => {
|
||
chart.resize()
|
||
})
|
||
},
|
||
}
|
||
}) |