echarts 图 折线图、热力图添加趋势拟合线,ecStat
线性拟合,
回归算法如何把数据分析与echarts 图表结合
echarts 的一个扩展库:echarts-stat.js
ecStat 是 ECharts 的统计和数据挖掘工具。
直接引用或者下载:
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
调用:
var myRegression = ecStat.regression(regressionType, data, order);
参数说明
regressionType:回归类型(String),有四种回归算法类型:'linear', 'exponential', 'logarithmic', 'polynomial'。
data:要统计的数据,是个二维数组(Array),一维数组值分别表示自变量和因变量的值。
regressionType:回归类型(String),有四种回归算法类型:'linear', 'exponential', 'logarithmic', 'polynomial'。
data:要统计的数据,是个二维数组(Array),一维数组值分别表示自变量和因变量的值。
order:多项式的阶数(number)。对于非多项式回归,可以忽略该参数。
返回值说明
myRegression:返回一个对象. 包括用于绘制折线图的拟合数据点 points,回归曲线的参数 parameter,以及拟合出的曲线表达式 expression。如下:
myRegression:返回一个对象. 包括用于绘制折线图的拟合数据点 points,回归曲线的参数 parameter,以及拟合出的曲线表达式 expression。如下:
// 绘制折线图的拟合数据点
myRegression.points = [
[1, 2],
[3, 4],
...
];
// 这是线性回归到额参数,对于其它的回归类型,返回值有所不同
myRegression.parameter = {
gradient: 1.695,
intercept: 3.008
};
// 拟合曲线的表达式
myRegression.expression = 'y = 1.7x + 3.01';
示例数据:
<table id="tblSearch" class="search_all" style="width:100%;display:block;">
<tr>
<td id="haha" width="50%" style="display:block;">
<!-- 量值溯源误差趋势 -->
<div class="spDiv" style="position:auto;height: 450px;width:100%;">
<div id="showLedgerCountBar" style="height:100%;width:100%;"></div>
</div>
</td>
</tr>
</table>
<script language="javascript">
var dataEcstat = [
[1990, 97.50795611],
[1991, -1.47594249]
]
init();
function init(){
ledgerCountBar();
}
function ledgerCountBar(){
var ledgerCount = echarts.init(document.getElementById('showLedgerCountBar'));
var regressionDemo = ecStat.regression( "linear", dataEcstat, 1);
option = {
title: {
text: ' 折线图',
subtext: ' ',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [{
name: '数据',
label: {
show: true,
position: "top",
formatter:' {c}'
},
data: dataEcstat,
type: 'line'
},
{
name: '误差趋势拟合',
label: {
show: true,
position: "top",
formatter:' {c}'
},
data: regressionDemo.points,
lineStyle: {
color: "#f00"
},
type: 'line'
}
]
};
ledgerCount.setOption(option);
window.onresize = ledgerCount.resize;
}
</script>
参考:https://www.jianshu.com/p/c97273a05167

浙公网安备 33010602011771号