柱狀圖
{
title:{//標(biāo)題
text:'標(biāo)題',
left: '40%'
},
tooltip: {//鼠標(biāo)懸浮提示數(shù)據(jù)
trigger:'axis'
},
legend: {//圖例說明
orient: 'vertical',
x:'right',
y:'center'
},
xAxis: {//X軸
data: ['羊肉串', '牛肉串', '雞翅', '羊腰子'],
name:'X軸標(biāo)題'
},
yAxis: {//Y軸
name:'Y軸標(biāo)題'
},
series: [//系列 圖表數(shù)據(jù)
{
data:[15, 23, 24, 18,],
type: 'bar',//柱狀圖
name:'3月'
},
]
}
餅圖
{
title: {//標(biāo)題
text: '訪問來源',
x:'50%',
},
tooltip: {//提示
trigger: 'item'
},
legend: {//圖例說明
orient: 'vertical',
x:'right',
y:'center'
},
series: [//系列數(shù)據(jù)
{
type: 'pie',
data: [
{
value: 335,
name: '直接訪問'
},
{
value: 310,
name: '郵件營銷'
},
{
value: 234,
name: '聯(lián)盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
}
折線圖
{
title:{//標(biāo)題
text:'標(biāo)題',
left: '40%'
},
tooltip: {//鼠標(biāo)懸浮提示數(shù)據(jù)
trigger:'axis'
},
legend: {//圖例說明
orient: 'vertical',
x:'right',
y:'center'
},
xAxis: {//X軸
data: ['1月', '2月', '3月', '4月'],
name:'X軸標(biāo)題'
},
yAxis: {//Y軸
name:'Y軸標(biāo)題'
},
series: [//系列 圖表數(shù)據(jù)
{
data:[15, 23, 24, 18,],
type: 'line',//折線圖
name:'恒大',
//smooth: true //平滑曲線
},
]
}
散點圖
{
title: { //標(biāo)題
text: '散點圖'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
name:'x軸'
},
yAxis: {
name:'y軸'
},
series: {//系列數(shù)據(jù)
data: [
[-10.0, 8.04],
[12, 6.95],
[15, 1],
],
type: 'scatter'//類型 散點圖
}
}
儀表盤圖
{
title: { //標(biāo)題
text: '儀表盤'
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'gauge',
data: [
{
value: 50,
name: '進(jìn)度'
}
]
}
]
}
雷達(dá)圖
{
title: {//標(biāo)題
text: '雷達(dá)圖'
},
tooltip: {//提示
trigger: 'item'
},
radar: {//雷達(dá)圖邊界
indicator: [
{ name: '攻擊', max: 100 },
{ name: '防御', max: 100 },
{ name: '控制', max: 100 },
{ name: '距離', max: 100 },
{ name: '連接', max: 100 },
{ name: '輔助', max: 100 }
]
},
series: [//系列數(shù)據(jù)
{
type: 'radar',
data: [
{
value: [88, 60, 33, 99, 20, 59],
name: '李白'
}
]
}
]
}
動態(tài)加載圖表數(shù)據(jù)
數(shù)據(jù)庫表初始化:
DROP TABLE IF EXISTS score;
DROP TABLE IF EXISTS student;
CREATE TABLE student
(
studentNo INT PRIMARY KEY auto_increment,
studentName VARCHAR(30)
);
CREATE TABLE score
(
scoreNo INT PRIMARY KEY auto_increment,
studentNo INT,
courseName VARCHAR(10),
score INT,
FOREIGN KEY (studentNo) REFERENCES student (studentNo)
);
INSERT INTO student(studentName)
VALUES ('苗晴允'),('小胖胖'),('付禧月');
INSERT INTO score(studentNo,courseName,score)
VALUES (1,'數(shù)據(jù)庫',FLOOR(RAND()* 100)),
(1,'JavaSE',FLOOR(RAND()* 100)),
(1,'web前端',FLOOR(RAND()* 100)),
(1,'框架',FLOOR(RAND()* 100)),
(2,'數(shù)據(jù)庫',FLOOR(RAND()* 100)),
(2,'JavaSE',FLOOR(RAND()* 100)),
(2,'web前端',FLOOR(RAND()* 100)),
(2,'框架',FLOOR(RAND()* 100)),
(3,'數(shù)據(jù)庫',FLOOR(RAND()* 100)),
(3,'JavaSE',FLOOR(RAND()* 100)),
(3,'web前端',FLOOR(RAND()* 100)),
(3,'框架',FLOOR(RAND()* 100));
