echart动态加载数据
Posted ZHANGKAIXUAN
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echart动态加载数据相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="js/dist/echarts.js"></script> <script src="Scripts/jquery-2.1.4.min.js"></script> var uri = ‘api/echart_test‘ // 路径配置 require.config({ paths:{ echarts: ‘js/dist‘ } }); // 使用 require( [ ‘echarts‘, ‘echarts/chart/bar‘, ‘echarts/chart/line‘, ‘echarts/chart/map‘ // 使用柱状图就加载bar模块，按需加载 ], drewEcharts ); function drewEcharts(ec) { // 基于准备好的dom，初始化echarts图表 myChart = ec.init(document.getElementById(‘main‘)); var option = { tooltip: { show: true }, legend: { data:[‘销量‘] }, xAxis : [ { type : ‘category‘, data : (function(){ var arr=[]; $.ajax({ type : "get", async : false, //同步执行 url : uri, data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } }, error : function(errorMsg) { alert("error"); myChart.hideLoading(); } }) return arr; })() } ], yAxis : [ { type : ‘value‘ } ], series : [ { "name":"销量", "type": uri, "data":(function(){ var arr=[]; $.ajax({ type : "get", async : false, //同步执行 url : uri, data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("error!"); myChart.hideLoading(); } }) return arr; })() } ] }; // 为echarts对象加载数据 myChart.setOption(option); } </script>以上是关于echart动态加载数据的主要内容，如果未能解决你的问题，请参考以下文章