如今前端开发越来越火，的业务离不开图表的制作，目前echarts是一个不错的图表制作插件，下面来介绍一下如何制作一个面积折线图
工具/原料
eclipse
方法/步骤
1
首先打开使用的开发工具eclipse
3
在所在项目的webapp目录下创建对应的js与html文件，如图
4
编写js代码与html代码，截图部分代码，详细代码如下HTML：
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
最终运行项目，输入访问路径，折现面积图完成
注意事项
希望对你有所帮助
上一篇：scala的环境变量设置