代码收藏家 使用Echarts制作数据大屏（期末可视化作业版）
上学期期末的可视化作业做了个数据可视化大屏一直计划着上传到我的学习笔记中，让有需要的人不用像我一样去找教程一步一步学习了才做的出来。
运行结果如图所示：
新建一个HTML项目，在其中利用HTML的div标签和id选择器以及类选择器等进行网页搭建，并且通过CSS的样式设置把页面布局成以下结构并通过CSS属性对页面进行加工渲染。布局如下所示：
在网页搭建布局完成之后，通过外链式的方法引入了JavaScript文件，如为了绘制图表而调用的echarts.min.js, 图5绘制中国地图的时候调用的china.js等，并且通过嵌入式JavaScript代码编写来完成图表的绘画。为了使图表一直处于动画绘制的状态，调用setIntervel()定时器函数来控制，使其在6000ms后重新绘制图表，并且每间隔这个时间就重绘一次，为了防止图表停止动画，在每次调用绘制图表函数之前先清除图表，再调用带有定时器和动画的函数重绘图表；所以此时数据大屏首先是图1的绘制，等图1绘制第二次时其他图表才出现并且开始它们的第一次绘表操作；图5是地图图表没有给它添加相应的数据使其可以动画化，所以它只绘制一次不参与重绘操作。图1比所有图都要多绘制一次的原因是代码顺序的书写。图1使用的是先书写option代码再调用mychart.setOption(option)函数绘制图表；其他图则是在mycharts.setOption()的括号内直接书写，所以图1第一次绘制是它本身自带的动画属性。
生成图表使用了一些ECharts的配置项参数，如option图表的配置项和数据内容、数值系列的颜色列表color、图表动画animation、图表标题title、提示框tooltip、图例legend、工具箱toolbox、数据视图dataView、设置图表的显示效果series、以及坐标轴axis；在信息可视化数据大屏中我使用到的图表有bar条形图/柱状图、scatter散点图、pie饼图、map地图、line折线图等。
图1是用柱状图bar生成的
图2是饼图pie
图3是柱形图bar和折线图line组合而成的一个组合图像
图4是利用china.js文件绘制的中国地图map
图5是各种类粮食亩/公斤单产产量的散点图scatter
图6是用折线图line绘制的
以上就是这个信息可视化数据大屏的理论支撑以及设计说明。数据大屏代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2023全国粮食产量数据化大屏</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.w {
width: 2000px;
height: 910px;
margin: 0 auto;
background: url(img/0-bg.png);
}
.top h2 {
width: 100%;
height: 60px;
text-align: center;
padding-top: 5px;
color: white;
font-size: 40px;
background: url(img/1-大标题.png) 50%;
}
.all {
position: relative;
width: 100%;
height: 800px;
}
.left {
position: absolute;
left: 0;
top: 10px;
width: 33%;
height: 800px;
}
#left-top,
#right-top,
#center-top {
margin-top: 20px;
}
#left-bottom,
#center-bottom,
#right-bottom {
margin-top: 30px;
}
.center {
position: absolute;
left: 700px;
top: 10px;
width: 33%;
height: 800px;
}
.right {
position: absolute;
left: 1400px;
top: 10px;
width: 33%;
height: 800px;
}
</style>
<script src="js/echarts.min.js"></script>
<script src="js/jQuery.min.js"></script>
<script src="js/china.js"></script>
</head>
<body>
<div class="w">
<div class="top">
<h2>2023全国粮食产量数据化大屏</h2>
</div>
<div class="all">
<div class="left">
<div id="left-top" style="width: 600px; height: 400px;"></div>
<div id="left-bottom" style="width: 600px; height: 400px;"></div>
</div>
<nav></nav>
<div class="center">
<div id="center-top" style="width: 600px; height: 400px;"></div>
<div id="center-bottom" style="width: 600px; height: 400px;"></div>
</div>
<div class="right">
<div id="right-top" style="width: 600px; height: 400px;"></div>
<div id="right-bottom" style="width: 600px; height: 400px;"></div>
</div>
</div>
</div>
<script type="text/javascript">
//第一个图
var myChart1 = echarts.init(document.getElementById('left-top'));
option = {
title: {
text: "2017-2023全国粮食的播种面积、单位面积产量以及总产量柱状图",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '7%'
},
tooltip: {},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "20%",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
},
yAxis: {
type: 'value'
},
series: [{
name: '粮食播种面积（千公顷）',
data: [112220, 117037, 116064, 116768, 117632, 118332, 118969],
type: 'bar',
color: "#cabbe9",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: '粮食单位面积产量（公斤/公顷）',
data: [5506, 5621, 5720, 5734, 5805, 5802, 5845],
type: 'bar',
color: "#ffcef3"
},
{
name: '粮食总产量（万吨）',
data: [61791, 65789, 66384, 66949, 68285, 68653, 69541],
type: 'bar',
color: "#a1eafb"
}
],
};
myChart1.setOption(option);
setInterval(() => {
myChart1.clear();
myChart1.setOption(option);
}, 6000);
//第二个图
var myCharts2 = echarts.init(document.getElementById('left-bottom'));
setInterval(() => {
myCharts2.clear();
myCharts2.setOption({
title: {
text: "2023各类粮食产量分季节以及品种饼图显示",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '12%',
},
tooltip: {},
toolbox: {
show: true,
left: 'right',
orient: 'vertical',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "20%",
left: '7%',
right: '7%',
bottom: '7%',
containLabel: true
},
series: [{
name: "2023分季节粮食总产量（亿斤）",
type: "pie",
radius: ['40%', '70%'],
data: [{
value: 2923,
name: "夏季粮食产量（亿斤）",
itemStyle: {
color: "#B6B8F0"
}
},
{
value: 10418.4,
name: "秋季粮食产量（亿斤）",
itemStyle: {
color: "#b0e7ea"
}
}, {
value: 566.7,
name: "早稻产量（亿斤）",
itemStyle: {
color: "#DEA9B5"
}
},
],
top: "30%",
left: "0",
right: "50%",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: "2023分品种粮食总产量（亿斤）",
type: "pie",
radius: [0, '30%'],
data: [{
value: 4132.1,
name: "谷物粮食产量（亿斤）",
itemStyle: {
color: "#b0e7ea"
}
},
{
value: 416.8,
name: "豆类粮食产量（亿斤）",
itemStyle: {
color: "#7c5e8c"
}
},
{
value: 602.8,
name: "薯类产量（亿斤）",
itemStyle: {
color: "#fb9795"
}
},
],
top: "30%",
left: "50%",
right: "0%",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: "2023品种具体分类粮食总产量（亿斤）",
type: "pie",
radius: ['40%', '80%'],
itemStyle: {
borderRadius: 10,
borderWidth: 2
},
data: [{
value: 4132.1,
name: "稻谷粮食产量（亿斤）",
itemStyle: {
color: "#EAABFF"
}
},
{
value: 2731.8,
name: "小麦粮食产量（亿斤）",
itemStyle: {
color: "#C4FFBD"
}
}, {
value: 5776.8,
name: "玉米粮食产量（亿斤）",
itemStyle: {
color: "#FFADAD"
}
}, {
value: 416.8,
name: "豆类粮食产量（亿斤）",
itemStyle: {
color: "#FFEFA8"
}
}, {
value: 602.8,
name: "薯类产量（亿斤）",
itemStyle: {
color: "#ADD1FF"
}
},
],
top: "30%",
left: "50%",
right: "0%",
animationDuration: 5000,
animationEasing: "linear"
}
]
});
}, 6000);
//第三 个图
var myCharts3 = echarts.init(document.getElementById('center-top'));
setInterval(() => {
myCharts3.clear();
myCharts3.setOption({
title: {
text: "2023各农作物的播种面积和单产的变化",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '7%'
},
tooltip: {},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "20%",
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['稻谷', '小麦', '玉米', '大豆','薯类' ],
axisNameTextStyle: {
color: "white"
}
},
yAxis: {
type: 'value'
},
series: [{
name: '各农作物播种面积（万亩）较2022年变化',
data: [-751.6,163.2,1723.2,345.1,-206.0],
type: 'bar',
color: "#cabbe9",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: '各农作物播种面积变化后的单产（千亩/公斤）',
data: [3800,-5000,6400,700,8800],
color: "white",
type: 'line'
}
],
});
}, 6000);
//第四个图
var myCharts4 = echarts.init(document.getElementById('center-bottom'));
setInterval(() => {
myCharts4.clear();
myCharts4.setOption({
title: {
text: "2023全国各个地区播种面积(千公顷)情况",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '7%'
},
tooltip: {},
toolbox: {
show: true,
left: 'right',
orient: 'vertical',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "2%",
left: '7%',
right: '4%',
bottom: '1%',
containLabel: true
},
visualMap: {
min: 0,
max: 15000,
left: 'left',
top: 'center',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
series: [{
name: '2023全国各个地区播种面积(千公顷)情况',
type: 'map',
mapType: 'china',
roam: false, // 禁止缩放和拖动
label: {
show: true
},
data: [{
name: '北京',
value: 89.5
},
{
name: '天津',
value: 390
},
{
name: '河北',
value: 6455.2
},
{
name: '山西',
value: 3161
},
{
name: '内蒙古',
value: 6984.7
},
{
name: '辽宁',
value: 3578.4
},
{
name: '吉林',
value: 5825.6
},
{
name: '黑龙江',
value: 14743.1
},
{
name: '上海',
value: 127.2
},
{
name: '江苏',
value: 5458.9
},
{
name: '浙江',
value: 1024.7
},
{
name: '安徽',
value: 7334.5
},
{
name: '福建',
value: 841.1
},
{
name: '江西',
value: 3774.3
},
{
name: '山东',
value: 8387.9
},
{
name: '河南',
value: 10785.3
},
{
name: '湖北',
value: 4707
},
{
name: '湖南',
value: 4763.5
},
{
name: '广东',
value: 2229.5
},
{
name: '广西',
value: 2834.7
},
{
name: '海南',
value: 273.6
},
{
name: '重庆',
value: 2025.9
},
{
name: '四川',
value: 6404.4
},
{
name: '贵州',
value: 2773.8
},
{
name: '云南',
value: 4243.2
},
{
name: '西藏',
value: 194.6
},
{
name: '陕西',
value: 3023
},
{
name: '甘肃',
value: 2710.9
},
{
name: '青海',
value: 304.9
},
{
name: '宁夏',
value: 639.9
},
{
name: '新疆',
value: 2824.8
},
]
}]
});
}, 6000);
//第五个图
var myCharts5 = echarts.init(document.getElementById('right-top'));
setInterval(() => {
myCharts5.clear();
myCharts5.setOption({
title: {
text: "2023各类粮食的亩产（公斤/亩）的散点图显示",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '10%'
},
tooltip: {},
toolbox: {
show: true,
left: 'right',
orient: 'vertical',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "27%",
left: '7%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['谷物', '豆类', '薯类', '稻谷', '小麦', '玉米', '大豆'],
},
yAxis: {
type: "value",
},
series: [{
name: '粮食亩产（公斤/亩）',
data: [427.9, 132.5, 285.1, 475.8, 385.4, 435.5, 132.7],
type: 'scatter',
color: "#AE89FE",
animationDuration: 5000,
animationEasing: "linear"
}]
});
}, 6000);
//第六个图
var myCharts6 = echarts.init(document.getElementById('right-bottom'));
setInterval(() => {
myCharts6.clear();
myCharts6.setOption({
title: {
text: "较去年各农作物的面积、亩产以及总产的增长情况（%）",
left: "center",
textStyle: {
color: "white",
fontSize: 20
}
},
legend: {
top: '7%'
},
tooltip: {},
toolbox: {
show: true,
left: 'right',
orient: 'vertical',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
top: "17%",
left: '7%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['稻谷', '小麦', '玉米', '大豆', '薯类'],
},
yAxis: {
type: "value",
},
series: [{
name: '播种面积',
data: [-1.7, 0.5, 2.7, 2.2, 1.9],
type: 'line',
color: "#D47277",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: '亩产',
data: [0.8, -1.3, 1.5, 0.5, 3.2],
type: 'line',
color: "#ffcef3",
animationDuration: 5000,
animationEasing: "linear"
},
{
name: '总产量',
data: [-0.9, -0.8, 4.2, 2.8, 1.2],
type: 'line',
color: "#a1eafb",
animationDuration: 5000,
animationEasing: "linear"
},
],
});
}, 6000);
</script>
</body>
</html>作者：JUANのWEB
