目录
2，在webcontent下创建一个js文件夹，然后将js文件复制进去。
1，创建dynamic web project
在连接好Tomcat之后，在eclipse中新建一个dynamic web project
填好项目名称之后选择finish即可。然后在Servers下右键选择add and remove,
随后选择已创建的项目，点击add将其添加到Tomcat中。
在Window中选择show view，右键选择project explorer。
打开后在project explorer下找到刚刚创建的项目，单击鼠标，
在下方出现的第一个的位置点击右键。
注：这里由于一些原因把之前创建的mychartsdemo1改成了mychartsdemo1
2，在webcontent下创建一个js文件夹，然后将js文件复制进去。
在webcontent下创建HTML文件。
点击next输入名称点击finish即可。
3，代码实现
打开echarts官网，找到想要的示例图，点进去。这里以折线图为例。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置标题</title>
<!--导入js文件 -->
<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
<!--设置一个容器，画出来的图就展示在上面 -->
<div id="main" style="width:800px;height:400px"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));//main和div中的id对应
//从官网copy过来的代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//data后面的数据可改，也可以使用json文件中的数据
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
//data后面的数据可改，也可以使用json文件中的数据
type: 'line',
symbol: 'triangle',
symbolSize: 20,
lineStyle: {
color: '#5470C6',
width: 4,
type: 'dashed'
},
itemStyle: {
borderWidth: 3,
borderColor: '#EE6666',
color: 'yellow'
}
}
]
};
//必不可少！！！
myChart.setOption(option);
</script>
</body>
</html>
点击servers下的Tomcat右键选择start，然后再打开浏览器输入
http://localhost:8080/项目名/HTML文件名.html
点击回车即可得到结果。
同理可以得到饼图，柱状图等图表。仅需修改一下代码中的type即可。（柱状图为bar,饼图为pie）。这里就不一一赘述。
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
