05-echarts大屏簡單flex佈局與插入圖表
阿新 • • 發佈：2022-05-31
目錄
1. 佈局一
1. 準備工作
1. 新建專案資料夾、專案檔案、下載js檔案
2. 安裝相關外掛
2. flex佈局
1. index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/css/index.css"> </head> <body> <header> <h1>資料分析大屏</h1> </header> <div class="title"> <div class="p"></div> <div class="p"></div> <div class="p"></div> <div class="p"></div> <div class="p"></div> </div> <div class="mainbox"> <div class="pen"> <div class="pen1"></div> <div class="pen2"></div> </div> <div class="pen"> <div class="pen3"></div> <div class="pen4"></div> </div> <div class="pen"> <div class="pen5"></div> <div class="pen6"></div> </div> </div> <script src="js/echarts.js"></script> <script src="js/flexible.js"></script> <script src="js/jquery-3.3.1.js4"></script> <script src="js/index.js"></script> </body> </html>
2. index.less
header { text-align: center; } .title { display: flex; padding: 5px; .p { border: 1px solid gray; height: .5rem; margin: 3px; flex: 1; text-align: center; line-height: .5rem; font-size: .375rem; } } .mainbox { display: flex; .pen { padding: 3px; flex: 1; .pen1, .pen2, .pen3, .pen4, .pen5, .pen6 { margin: 3px; border: 1px solid; height: 300px; } } }
3. 插入圖表
1. index.js
(function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen1')); // 指定圖表的配置項和資料 var option = { title: { text: '東北地區' }, tooltip: { trigger: 'axis' }, legend: {}, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, // restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: '白天最高', type: 'line', data: [1,- 1,- 1,6,8,11,11], markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } }, { name: '晚間最高', type: 'line', data: [-7,-6,-6,-4,2,3,1,], markPoint: { data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] }, markLine: { data: [ { type: 'average', name: 'Avg' }, [ { symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { position: 'start', formatter: 'Max' }, type: 'max', name: '最高點' } ] ] } } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })(); (function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen2')); // 指定圖表的配置項和資料 var option = { }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })(); (function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen4')); // 指定圖表的配置項和資料 var option = { }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })(); (function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen3')); // 指定圖表的配置項和資料 var option = { }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })(); (function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen5')); // 指定圖表的配置項和資料 var option = { }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })(); (function () { // 1例項化物件 var myChart = echarts.init(document.querySelector('.pen .pen6')); // 指定圖表的配置項和資料 var option = { }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); })();
執行效果：
2. 載入js檔案
var myChart = echarts.init(document.getElementById('box'));
myChart.setOption({
}
);
3. 非同步載入資料的js檔案
var myChart = echarts.init(document.getElementById('box'));
$getJSON("data/data.json").done(function (data){
myChart.setOption({
}
);
});
佈局二
1. index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index2.css">
</head>
<body>
<div class="header">
<h1>佈局二</h1>
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="mainbox">
<div class="column">
<div id="left1">11</div>
<div id="left2">12</div>
<div id="left3">13</div>
</div>
<div class="column">
<div id="center1">11</div>
</div>
<div class="column">
<div id="right1">31</div>
<div id="right2">32</div>
<div id="right3">33</div>
</div>
</div>
<script src="js/echarts.js"></script>
<script src="js/index2.js"></script>
</body>
</html>
2. index3.less
.header {
h1{
text-align: center;
}
}
.boxes {
display: flex;
.box{
flex: 1;
height: 3.75rem;
border: 1px solid black;
margin: 3px;
}
}
.mainbox {
display: flex;
.column{
flex: 1;
height: 56.25rem;
margin: 3px;
&:nth-child(2) {
border: black 1px solid;
height: 56.25rem;
#center1{
height: 56.25rem;
}
}
#left1,#left2,#left3,#right1,#right2,#right3{
border: black 1px solid;
height: 18.75rem;
}
}
}
3. index.js
var myChart = echarts.init(document.getElementById('left1'));
myChart.setOption({
title: {
text: '東北地區'
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
// restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2月20日', '2月21日', '2月22日', '2月23日', '2月24日', '2月25日', '2月26日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '白天最高',
type: 'line',
data: [1,- 1,- 1,6,8,11,11],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: '晚間最高',
type: 'line',
data: [-7,-6,-6,-4,2,3,1,],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '90%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高點'
}
]
]
}
}
]
}
);
var myChart = echarts.init(document.getElementById('center1'));
myChart.setOption({
}
);
var myChart = echarts.init(document.getElementById('right3'));
myChart.setOption({
}
);
執行結果：