如何用echarts创建一个面积折线图

1、首先打开使用的开发工具eclipse

2、使用requirejs配置echart和相关使用插件，比如jQuery，bootstrap等

3、在所在项目的webapp目录下创建对应的js与html文件，如图

4、编写js代码与html代码，截图部分代码，详细代码如下HTML：<div id="carArea" class="main_m足毂忍珩id_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、最终运行项目，输入访问路径，折现面积图完成