1.进入echarts官网后,可以点击下载,进入下载页面,该页面有3种下载方式。推荐:
在这个页面下载github源码,可以下载整个zip,也可以进入页面后,进入dist目录,下载自己需要的echarts.js或者echarts.min.js
(https://www.bootcdn.cn/echarts/4.6.0/这个有echart各版本的云js标签,选择合适js,拷贝js引入就行,需要联网,建议自己下载本地文件)
----当然最方便的下载是复制打开这个链接:https://download.csdn.net/download/hachi_rt/12435752
2.如果下载的整个源码,以java的web项目为例,可以将整个文件夹拷贝到webroot目录下,本文仅拷贝dist目录下的echarts.js到webroot的js目录下
然后在需要使用echarts的页面引入这个js,注意,页面在web-INF下面,要访问webROOT的文件,引入方式为:
3.以官网实例动态时间轴为例:
在body创建容器位置,然后将实例的源码完整拷贝到js中,访问页面,会发现,并没有如意料中运行成功,报错: series.type should be specified.
此时,只需添加一句话解决,因为定时器这是定时器刷新页面的时候使用setOption,还需要:
添加后运行访问页面:
漂亮,完整实现!
附:
官网资源下载页面:https://www.echartsjs.com/zh/download.html
github开源下载源码页面:https://github.com/apache/incubator-echarts
动态时间轴为例:https://www.echartsjs.com/examples/zh/editor.html?c=dynamic-data2
js完整代码:
<head>
<base href="<%=basePath%>">
<title>实时在线</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
};
myChart.setOption(option);
setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
series: [{
data: data
}]
});
}, 1000);
</script>