05-echarts大屏简单flex布局与插入图表
目录
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({
}
);
});
注意：！！！！
引入的js文件一定要在jQuery.js的后面！！！！！
布局二
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({
}
);
运行结果：
浙公网安备 33010602011771号