<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.0.min.js"></script> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 100%;height: 400px"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 $(function () { ////控件大小自适应 //pageSize(); ////轮播时间间隔设定 //$('.carousel').carousel({ // //interval: 60000, // interval: 2000, // pause: false //}); setInterval("Show()", 5000); }); function Show() { var myChart = echarts.init(document.getElementById('main')); $.ajax({ url: "PaintView.ashx?method=getBar", datatype: 'json', type: "Post", contentType: "application/json; charset=utf-8", async: false, success: function (result) { if (result) { //var objlist = JSON.parse(result); var objlist = eval('(' + result + ')'); myChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['保险杠', '门槛'] }, color: ['#2899F4', '#00FF00'], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: objlist.h1 }, yAxis: { type: 'value' }, series: [ { name: '保险杠', type: 'bar', stack: '总量', label: { normal: { show: true }, }, data: objlist.c1 }, { name: '门槛', type: 'bar', stack: '总量', label: { normal: { show: true } }, data: objlist.c2 } ] }); } } }); } </script> </body> </html>