一、注意获取div的设置的id
二、注意第二步中动态获取数据的数组的命名
三、option的命名
四、每一个大数据图表的命名注意对应
效果：HTML： <!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script src="js/zztoption.js" type="text/javascript" charset="utf-8"></script></head><body><div id="zzt" style="width: 500px;height: 500px;float: left;background-color: aquamarine;"></div><div id="dzzt" style="width: 500px;height: 500px;float: left;background-color: aquamarine;"></div><div id="djzzt" style="width: 500px;height: 500px;float: left;background-color: aquamarine;"></div><div id="djdzzt" style="width: 500px;height: 500px;float: left;background-color: aquamarine;"></div></body><script type="text/javascript">//一、声明divvar zztCharts = echarts.init(document.getElementById("zzt"));var dzztCharts = echarts.init(document.getElementById("dzzt"));var djzztCharts = echarts.init(document.getElementById("djzzt"));var djdzztCharts = echarts.init(document.getElementById("djdzzt"));//二、动态获取图标的数据/* 1、柱状图动态获取开始*/const zztxAxisData = [];const zztseriesData = [];$.get("json/动态单柱状图.json",function(d){ for (var i = 0; i < d.length; i++) { zztxAxisData.push(d[i].time); zztseriesData.push(d[i].value); } zztoption.xAxis.data = zztxAxisData; zztoption.series[0].data = zztseriesData; zztCharts.setOption(zztoption);})/* 1、柱状图动态获取结束*//* 2、多柱状图动态获取开始*/const dzztlegendData = [];const dzztxAxisData = [];const dzztbData = [];const dzztgData = [];$.get("json/动态多柱状图.json",function(d){for (var i = 0; i < d.length; i++) {dzztlegendData.push(d[i].name);}for(var i = 0; i < d[0].value.length; i++){dzztxAxisData.push(d[0].value[i].bname);dzztbData.push(d[0].value[i].num);dzztgData.push(d[1].value[i].num);}dzztoption.legend.data = dzztlegendData;dzztoption.xAxis.data = dzztxAxisData;dzztoption.series[0].data = dzztbData;dzztoption.series[1].data = dzztgData;dzztCharts.setOption(dzztoption);})/* 2、多柱状图动态获取结束*//* 3、堆积柱状图动态获取开始*/const djzztlegendData = [];const djzztxAxisData = [];const djzztqyData = [];const djzztryData = [];const djzztydhhData = [];const djzztddData = [];$.get("json/动态单堆积柱状图.json",function(d){for (var i = 0; i < d.length; i++) {djzztlegendData.push(d[i].type)}for (var i = 0; i < d[0].value.length; i++) {djzztxAxisData.push(d[0].value[i].bname);djzztqyData.push(d[0].value[i].bnum);djzztryData.push(d[1].value[i].bnum);djzztydhhData.push(d[2].value[i].bnum);djzztddData.push(d[3].value[i].bnum);}// 10.50 之前 组长检查堆积柱状图的实现// 10.50 讲解多堆积柱状图的实现// 11.00djzztoption.series[0].data = djzztqyData;djzztoption.series[1].data = djzztryData;djzztoption.series[2].data = djzztydhhData;djzztoption.series[3].data = djzztddData;djzztoption.xAxis.data = djzztxAxisData;djzztoption.legend.data = djzztlegendData;djzztCharts.setOption(djzztoption);})/* 3、堆积柱状图动态获取结束*//* 4、堆积多柱状图动态获取开始*/const djdzztlegendData = [];const djdzztxAxisData = [];const djdzztqyData = [];const djdzztcyData = [];const djdzztydhhData = [];const djdzztddData = [];const djdzztbnum = [];const djdzztgnum = [];$.get("json/动态多堆积柱状图.json", function(d) {for(var i = 0; i < d.length; i++) {for(var j = 0; j < d[i].typevalue.length; j++) {djdzztlegendData.push(d[i].typevalue[j].type);}}// 燃油类型for(var i = 0; i < d[0].typevalue[0].value.length; i++) {djdzztxAxisData.push(d[0].typevalue[0].value[i].bname);djdzztqyData.push(d[0].typevalue[0].value[i].num);djdzztcyData.push(d[0].typevalue[1].value[i].num);djdzztydhhData.push(d[0].typevalue[2].value[i].num);djdzztddData.push(d[0].typevalue[3].value[i].num);} // 男女比例for(var i = 0; i < d[1].typevalue[0].value.length; i++) {djdzztbnum.push(d[1].typevalue[0].value[i].num);djdzztgnum.push(d[1].typevalue[1].value[i].num);}djdzztoption.series[0].data = djdzztqyData;djdzztoption.series[1].data = djdzztcyData;djdzztoption.series[2].data = djdzztydhhData;djdzztoption.series[3].data = djdzztddData;djdzztoption.series[4].data = djdzztbnum;djdzztoption.series[5].data = djdzztgnum;djdzztoption.legend.data = djdzztlegendData;djdzztoption.xAxis.data = djdzztxAxisData;djdzztCharts.setOption(djdzztoption);})/* 4、堆积多柱状图动态获取结束*/</script></html> JavaScript： //三、图标的详细设置/* 1、柱状图option 开始*/var zztoption = {grid: {width: "60%",height: "60%"},xAxis: {type: "category",data: []},yAxis: {type: "value"},series: [{type: "bar",data: []}]};/* 1、柱状图option 结束*//* 2、多柱状图option 开始*/var dzztoption = {legend: {data: []},xAxis: {type: "category",data: []},yAxis: {type: "value"},series: [{type: "bar",name: "男",data: []},{type: "bar",name: "女",data: []}]};/* 2、多柱状图option 结束*//* 3、堆积柱状图option 开始*/var djzztoption = {legend: {data: []},xAxis: {type: "category",data: []},yAxis: {type: "value"},series: [{type: "bar",name: "汽油",stack: "燃油类型",data: []},{type: "bar",name: "柴油",stack: "燃油类型",data: []},{type: "bar",name: "油电混合",stack: "燃油类型",data: []},{type: "bar",name: "电动",stack: "燃油类型",data: []}]};/* 3、堆积柱状图option 结束*//* 4、堆积多柱状图option 开始*/var djdzztoption = {legend: {data: []},xAxis: {type: "category",data: []},yAxis: {type: "value"},series: [{type: "bar",name: "汽油",stack: "燃油类型",data: [12, 23, 12]},{type: "bar",name: "柴油",stack: "燃油类型",data: [15, 26, 11]},{type: "bar",name: "油电混合",stack: "燃油类型",data: [18, 28, 18]},{type: "bar",name: "电动",stack: "燃油类型",data: [19, 27, 19]},{type: "bar",name: "女生",stack: "男女比例",data: [11, 12, 17]},{type: "bar",name: "男生",stack: "男女比例",data: [21, 22, 27]}]};/* 4、堆积多柱状图option 结束*/