下面以服务统计需求为例，介绍echarts的简单使用。
需求简介：按小时统计每天24小时的服务调用波动情况。
首先在百度图表官方网站下载echarts.min.js文件，根据自身情况选择合适的js下载。 echarts官网
在jsp中引入echarts.min.js文件
//注意引入时要加入合适的字符编码，否则浏览器可能不兼容 <script src="/njs/plugins/echarts.min.js" charset="utf-8"></script>在jsp文件body标签中加入如下代码：
<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px;height:400px;margin:10px 80px"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var values = []; //将后台传来的list数据集合赋给values，作为图表展示的数据基础 <% List list = (List)request.getAttribute("data"); if(list!=null) { for(int i=0;i<list.size();i++) { %> values.push(<%=list.get(i)%>); <% } } %> function randomData() { for(var i=0;i<10;i++) { values[i] = Math.round(Math.random()*100); } return values; } option = { title: { text: '服务波动情况', textStyle: { fontWeight: 'normal', //标题颜色 color: '#408829' } }, tooltip: { trigger: 'axis', axisPointer: { animation: false } }, xAxis: { type: 'category', data : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23], splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '调用次数', type: 'line', showSymbol: false, hoverAnimation: false, data: values }] }; myChart.setOption(option); </script>最终展示结果：
