ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，这里初步显示柱状图
1.下载echarts插件，官网:https://echarts.baidu.com/index.html,这里使用bootstrap框架
2.前端页面
html代码
<div class="col-lg-12"> <h3 class="page-header">我的关心</h3> </div> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body"> <div id="main" style="width: 600px;height: 400px;"></div> </div> </div> </div> </div> <script> function loadOneColumn() { var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: [] }, toolbox: { show: true, feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ["我的关心"] } ], yAxis: [ { type: 'value', data: [] } ], series: [ { name: '销售金额', type: 'bar', data: [] }, { name: '入账金额', type: 'bar', data: [] },{ name: '超期金额', type: 'bar', data: [] }, { name: '超期天数', type: 'bar', data: [] },{ name: '技术成本', type: 'bar', data: [] }, { name: '项目得分', type: 'bar', data: [] }, ] }); myChart.showLoading(); var service = []; var count1 = [];//销售金额 var count2= [];//入账金额 var count3 = [];//超期金额 var count4 = [];//超期天数 var count5 = [];//技术成本 var count6 = [];//项目得分 $.ajax({ type: 'get', url: './sales/acc_query2.action', dataType: 'json', success: function (result) { $.each(result.rows, function (index, item) { //后端传过来的数据 count1.push(item.count1); count2.push(item.count2); count3.push(item.count3); count4.push(item.count4); count5.push(item.count5); count6.push(item.count6); }); myChart.hideLoading(); myChart.setOption({ legend: { // data: service }, xAxis: { // data: service }, series: [ { name: '销售金额', data: count1 }, { name: '入账金额', data: count2 }, { name: '超期金额', data: count3 }, { name: '超期天数', data: count4 }, { name: '技术成本', data: count5 }, { name: '项目得分', data: count6 } ] }); }, error: function (errorMsg) { alert("图表请求数据失败!"); myChart.hideLoading(); } }); } ; loadOneColumn(); </script> </body>3.柱状图表页面显示
