echart动态加载数据

最新推荐文章于 2023-11-17 17:48:34 发布

b150030

最新推荐文章于 2023-11-17 17:48:34 发布

阅读量111

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/ZHANGKAIXUAN/p/6612844.html

版权

<!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 
  > 
 
  < 
  script  
  type 
  = 
  "text/javascript" 
  > 
 
  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>