ecStat.min.js是线性趋势变化(图中蓝色虚线)所需要引用的js
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts折线图</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
<script type="text/javascript" src="echarts/ecStat.min.js"></script>
<script type="text/javascript" src="chart.js"></script>
</head>
<style type="text/css">
.tuCon{
width: 400px;
height: 400px;
float: left;
}
</style>
<body>
<div class="bianHuaTu">
<div class="bianHuaTuCon cont">
<div class="zheXianTu" id="zheXianTu">
<div class="tit" id="zhexian">年平均变化折线图
</div>
<div class="zheXianCon tuCon" id="zheXianCon">
</div>
</div>
<div class="zhuZhuangTu" id="zhuZhuangTu">
<div class="tit" id="zhuzhuang">年平均变化柱状图
</div>
<div class="zhuZhuangCon tuCon" id="zhuZhuangCon">
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
var tasArray =[45,67,90,20,10,24,15,81];
var yearArray = [1994,1995,1996,1997,1998,1999,2000,2001];
var maxTas = Math.max.apply(Math,tasArray);//y轴最大值
var minTas = Math.min.apply(Math,tasArray);//y轴最小值
var dataNameLine = "河北省指数变化折线图";
var dataNameBar = "河北省指数变化柱状图";
makeChart("zheXianCon",maxTas,minTas,tasArray,yearArray,"line",'yaosu',dataNameLine,false,false);
makeChart("zhuZhuangCon",maxTas,minTas,tasArray,yearArray,"bar",'yaosu',dataNameBar,false,false);
})
</script>
chart.js:
//防止出现“There is a chart instance already initialized on the dom.”的警告
//在使用echarts发现需要及时对新建的myChart实例进行销毁,否则会出现上述警告
var _myChart={};
/**
* 调用echart绘制统计图 chartId chart的div的id maxTas 统计图y轴最大值 minTas 统计图y轴最小值 tasArray
* 统计图x轴数据数组 yearArray 统计图y轴数据数组 chartType 统计图图表类型:line是折线图,bar是柱状图
* imageName:下载图片名称 axisName y轴坐标轴名称 markLineValue 标示线(常年值)
*/
function makeChart(chartId, maxTas, minTas, tasArray, yearArray, chartType, imageName,axisName,markLineValue) {
$('#' + chartId).css({
width : $('#' + chartId).width() + 'px',
height : $('#' + chartId).height() + 'px'
});
var echartsWarp = document.getElementById(chartId);
var chartCanvas = $("#"+chartId).html();
if(chartCanvas.trim().length>0 && _myChart[chartId]!=null && _myChart[chartId]!="" && _myChart[chartId]!=undefined){
_myChart[chartId].dispose();//销毁存在的实例
}
_myChart[chartId] = echarts.init(echartsWarp);
var arrSeries = [];
//线性趋势
var data = [];
for (var i = 0; i < yearArray.length; i++) {
data.push([Number(yearArray[i]),Number(tasArray[i])]);
}
var myRegression = ecStat.regression('linear', data);
for(var i=0;i<myRegression.points.length;i++){
var point=myRegression.points[i];
point[1]=point[1].toFixed(2);
}
arrSeries.push({
name : '年平均值',
type : chartType,
// color : '#ff0000',
markLine : {
data : [{
name : '常年值',
yAxis : markLineValue
}]
},
smooth : false,
data : data
}
,{//线性变化趋势
name: '线性变化',
type: 'line',
color:'#001fff',
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dashed'
}
}
},
showSymbol: false,
smooth:true,
data: myRegression.points
});
var option = {
title : {
x : 'center',
textStyle : {
fontSize : 12,
fontWeight : 'bolder',
color : '#151589'
},
left:'left'
},
tooltip : {
trigger : 'axis'
},
legend: {
y:4,
itemGap:20,
selectedMode: 'multiple',
textStyle : {
fontSize : 16,
color : '#000000'
},
},
toolbox : {
show : true,
top : 0,
right : 20,
feature : {
saveAsImage : {
show : true,
iconStyle : {
borderColor : '#dd8f56',
},
name : imageName
}
}
},
grid : {
show:true,
left:64,
top:27,
right:50,
bottom:45,
borderColor:'#000100'
},
xAxis : {
show : true,
type : 'category',
name: '年份',
nameLocation: 'middle',
nameGap: 24,
nameTextStyle:{
fontSize:16
},
axisTick : {
inside : true
},
axisLabel : {
textStyle : {
color : '#000000',
fontSize: 16
}
},
splitLine : {
show : true,
lineStyle : {
color : '#eeeeee'
}
},
axisLine : {
lineStyle : {
color : '#000000',
width : 2,
type : 'solid'
}
}
},
yAxis : {
min : minTas,
max : maxTas,
name: axisName,
nameLocation: 'middle',
nameRotate: 90,
nameGap: 48,
axisLabel : {
textStyle : {
color : '#000000',
fontSize: 16
}
},
splitLine : {
show : true,
lineStyle : {
color : '#eeeeee'
}
},
type : 'value',
axisLine : {
lineStyle : {
color : '#000000',
width : 2,
type : 'solid'
}
}
},
series : arrSeries
};
_myChart[chartId].setOption(option);
}
效果如下: