通过百度开源echarts图标插件用一个div动态生成多个echarts图表-CSDN博客

1、首先新建一个html文件，书写基本html语法，然后新建一个div 并且命名id为ebox

2、引入JQuery图表插件开源js库文件下载地址Download jQuery | jQuery

3、引入echarts图表插件开源js库文件下载地址ECharts

4、书写jquery和echarts 脚本

注：这里只写了一个数据源，所以数据都是一样的，可以ajax动态取数据

5、效果展示

images

6、Ajax代码开放

//ajxa 代码是返回的json字符串，里面涉及了json字符串通过变量去取

$.ajax( {

    type : "post",

        async : false, //异步执行

url : 后台地址

data :par,

dataType : "json", //返回数据形式为json

success : function(result) {

if (result) {

for(var i=0; i< Number(result.number); i++){

var ds = "data"+i;

var ns = "name"+i;

$("#ebox").append('<div style="margin-left:40%;"><strong>'+result.nameMap[ns]+'</strong></div><div style="width:100%; height:200px; " id="ecr'+i+'"></div>');

noption.series[0].name = result.nameMap[ns];

var newY = new Array();

var nowH = new Date().getHours();

for(var j=0; j< result.data[ds][0].listValue.length; j++){

if(j < Number(nowH)){

newY[j] = result.data[ds][0].listValue[j];

}

}

noption.series[0].data = newY;//result.data[ds][0].listValue;

console.log(noption.series[0].name+"========="+noption.series[0].data);

echarts.init(document.getElementById("ecr"+i)).setOption(noption);

}

}

},

error : function(errorMsg) {

alert("图2表请求数据失败!");

}

});