多类型动态条形大数据图表存放在一个HTML中

多类型动态条形大数据图表存放在一个HTML中 注意：

一、注意获取div的设置的id

二、注意第二步中动态获取数据的数组的命名

三、option的命名

四、每一个大数据图表的命名注意对应

效果：

 

HTML：

Javascript：

//三、图标的详细设置

var zztoption = {
	grid: {
		width: "60%",
		height: "60%"
	},
	xAxis: {
		type: "category",
		data: []
	},
	yAxis: {
		type: "value"
	},
	series: [{
		type: "bar",
		data: []
	}]
};



var dzztoption = {
	legend: {
		data: []
	},
	xAxis: {
		type: "category",
		data: []
	},
	yAxis: {
		type: "value"
	},
	series: [{
			type: "bar",
			name: "男",
			data: []
		},
		{
			type: "bar",
			name: "女",
			data: []
		}
	]
};



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: []
		}
	]
};



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]
		}
	]
};