Echarts（ Pie，Bar）數據可視化 條形圖，柱圖，餅圖、時間軸代碼 JS-NEW

實時代碼編輯：https://gallery.echartsjs.com/editor.html?c=xPPXo1AxvB&v=1

 

 

option ={
timeline: {
		axisType: "category",
		autoPlay: true,
		playInterval: 3000,
		lineStyle: {
			color: "#0fc8ca",
			width: 1
		},
		label: {
			color: "#a4cc5c"
		},
		checkpointStyle: {
			color: "#0fc8ca",
			borderColor: "#0fc8ca"
		},
		controlStyle: {
			color: "#a4cc5c",
			borderColor: "#a4cc5c"
		},
		itemStyle: {
			color: "#a4cc5c"
		},
		left: "6%",
		right: "6%",
		bottom: "0",
		emphasis: {
			checkpointStyle: {
				color: "#a4cc5c",
				borderColor: "#a4cc5c",
				borderWidth: 1
			}
		},
		data: ["2018-04", "2018-05", "2018-06", "2018-07", "2018-08", "2018-09", "2018-10", "2018-11", "2018-12", "2019-01", "2019-02", "2019-03"]
	},
options: [{
backgroundColor:"#001420",
		calculable: true,
		legend: {
			itemWidth: 25,
			itemHeight: 15,
			textStyle: {
				color: "#fff",
				fontSize: 15.1
			},
			data: ["進球", "丟球"],
			itemGap: 20,
			left: "13%",
			top: "2%"
		},
		grid: {
			tooltip: {
				trigger: "axis",
				axisPointer: {
					label: {
						show: true,
						formatter: function(params) {
							return params.value.replace('\\n', '')
						}
					},
					type: "shadow"
				},
				fontSize: 0.0
			},
			left: "8%",
			top: "12%",
			right: "5%",
			bottom: "20%"
		},
		xAxis: [{
			nameTextStyle: {
				color: "#0fc7c9",
				fontSize: 15.1,
				padding: [0, 30, 60, 0]
			},
			axisPointer: {
				type: "shadow"
			},
			type: "category",
			axisLine: {
				lineStyle: {
					color: "rgba(255, 255, 255, 0.1)",
					width: 1
				}
			},
			axisLabel: {
				show: true,
				interval: 0,
				rotate: -45,
				formatter: "{value}",
				textStyle: {
					color: "#0fc7c9",
					fontSize: 15.1
				}
			},
			splitLine: {
				show: false
			},
			data: ["紐約噴氣機","田納西泰坦","休斯頓德州人","印第安納波利斯小馬","傑克遜維爾美洲虎","丹佛野馬","堪薩斯城酋長","奧克蘭突襲者","洛杉磯閃電","巴爾的摩烏鴉","辛辛那提猛虎","克利夫蘭布朗","匹茲堡鋼人"]
		}],
		yAxis: [{
			nameTextStyle: {
				color: "#0fc8ca",
				fontSize: 15.1,
				padding: [0, 30, 10, 0]
			},
			type: "value",
			name: "進球數",
			axisLine: {
				lineStyle: {
					color: "rgba(255, 255, 255, 0.1)",
					width: 1
				}
			},
			axisLabel: {
				show: true,
				formatter: "{value}",
				textStyle: {
					color: "#0fc7c9",
					fontSize: 15.1
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: "rgba(255, 255, 255, 0.1)",
					width: 1
				}
			}
		}],
		series: [{
			color: "#0fc8ca",
			name: "助攻",
			type: "bar",
			itemStyle: {
				normal: {
					color: function() {
						return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#80e43c'
						}, {
							offset: 0.3,
							color: '#80e43c'
						}, {
							offset: 1,
							color: '#7bbe4d'
						}]);
					},
					shadowBlur: 10,
					shadowColor: "rgba(128,228,60,1)",
					shadowOffsetX: 0,
					shadowOffsetY: 0
				},
				emphasis: {
					shadowBlur: 15,
					shadowColor: "rgba(128,228,60,1)",
					shadowOffsetX: 0,
					shadowOffsetY: -10
				}
			},
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			color: "#a4cc5c",
			name: "主攻",
			type: "bar",
			itemStyle: {
				normal: {
					color: function() {
						return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#4ad3ff'
						}, {
							offset: 0.3,
							color: '#4ad3ff'
						}, {
							offset: 1,
							color: '#0aa2a3'
						}]);
					},
					shadowBlur: 10,
					shadowColor: "rgba(74,211,255,1)",
					shadowOffsetX: 0,
					shadowOffsetY: 0
				},
				emphasis: {
					shadowBlur: 15,
					shadowColor: "rgba(74,211,255,1)",
					shadowOffsetX: 0,
					shadowOffsetY: -10
				},
				label: {
					normal: {
						textStyle: {
							color: "#fff",
							fontSize: 15.1
						}
					}
				}
			},
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			center: ["73%", "15%"],
			radius: "15%",
			color: ["#4ad3ff", "#80e43c"],
			type: "pie",
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b} : {c} ({d}%)",
				fontSize: 0.0
			},
			z: 100,
			label: {
				normal: {
					formatter: "{b} :{d}%",
					textStyle: {
						fontSize: 15.1
					}
				}
			},
			data: [{
				value: 0,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 56, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 56,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 54, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 54,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 78, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 82,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 12, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 64,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [631, 0, 38, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 675,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [654, 0, 0, 50, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 704,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 37, 0, 0, 0, 0, 9, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 1, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 46,
				name: "進球率"
			}, {
				value: 10,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 10, 0, 6, 33, 0, 0, 0, 0, 0, 4, 0, 0]
		}, {
			type: "bar",
			data: [0, 10, 0, 18, 0, 0, 0, 0, 0, 0, 1, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 53,
				name: "進球率"
			}, {
				value: 58,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 0,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 0,
				name: "進球率"
			}, {
				value: 14,
				name: "丟球率"
			}]
		}]
	}, {
		series: [{
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "bar",
			data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
		}, {
			type: "pie",
			data: [{
				value: 0,
				name: "進球率"
			}, {
				value: 0,
				name: "丟球率"
			}]
		}]
	}]}