echart动态加载数据

2024-10-20 08:25:51

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>ECharts</title>

</head>

<body>

<div id="main" style="height:400px"></div>

<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>

最新文章

热门文章