<script src="~/Scripts/NewEcharts/echarts.js"></script> <script type="text/javascript"> var myChart; $(function () { load(); }); function load() { require.config({ paths: { //echarts: '../Scripts/Echartsjs' echarts: '../Scripts/NewEcharts' } }); require( [ 'echarts', 'echarts/chart/bar' //'echarts/chart/line' //'echarts/chart/map' ], DrawEchart ); } function DrawEchart(ec) { //--- 折柱 --- myChart = ec.init(document.getElementById('EchartsDiv')); //图表显示提示信息 myChart.showLoading({ text: "图表数据正在努力加载..." }); //定义图表 var option = { tooltip: { trigger: 'axis' }, //color: '#66B3FF', animation: false, addDataAnimation: false, calculable: true, xAxis: [ { type: 'value', boundaryGap: [0, 0.01] } ], yAxis: [ { splitLine: { show: false },//分隔线 //splitArea: { show: false },//分隔区域 type: 'category', // data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'] data:[] } ], series: [ { name: '资源使用情况', color: '#66B3FF ', type: 'bar', // data: [18203, 23489, 29034, 104970, 131744, 630230] data:[] } ] }; //通过Ajax获取数据 $.ajax({ type: "post", async: false, //同步执行 url: "/Report/GetVMUsedInfo", dataType: "json", //返回数据形式为json data: {rnd:Math.random()}, success: function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 option.yAxis[0].data = result.yAxis; option.series[0].data = result.series; myChart.hideLoading(); myChart.setOption(option); } }, error: function(errorMsg) { alert("图表请求数据失败啦!"); } }); //myChart.hideLoading(); //myChart.setOption(option); } </script>
返回用的是 json数据;
后台使用的Asp.net MVC,使用了匿名类(主要是为了方便),
var newObj = new { yAxis =result.Data.DanweiList, series= result.Data.ApplyVMEventList }; return Json(newObj, JsonRequestBehavior.AllowGet);