1、首先打开使用的开发工具eclipse
2、使用requirejs配置echart和相关使用插件，比如jQuery，bootstrap等
3、在所在项目的webapp目录下创建对应的js与html文件，如图
4、编写js代码与html代码，截图部分代码，详细代码如下
HTML：<div id="carArea" class="main_mid_top"></div>
JS：
function loadCarArea(){
echarts.init(document.getElementById('carArea')).setOption({
title : {
text: '车辆进出趋势',
subtext: '',
x : 'left',
textStyle:{
fontWeight:'normal',
color: '#06FFFF',
fontSize:16
}
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']}
}
},
calculable : true,
xAxis : {
type : 'category',
axisLabel:{
show:true,
interval : 0,
textStyle:{
color:'#fff',
fontSize:'10'
}
},
axisLine:{
lineStyle:{
color:'#fff',
width:0.5
}
},
data : ['3:00','6:00','9:00','12:00','15:00','18:00','21:00','24:00'],
},
yAxis :{
type : 'value',
axisLine:{
lineStyle:{
color:'#fff',
width:0.5
}
}
},
series : [
{
name:'车辆',
type:'line',
smooth:true,
itemStyle: {
normal: {
color: '#B3E4A1'
}
},
areaStyle: {
normal: {
opacity: 0.5
}
},
data:[10, 12, 21, 100, 260, 300, 200,60]
}
]
})
}
5、最终运行项目，输入访问路径，折现面积图完成
