本代码只是一个示例代码，其内容和数据均为本人随便写的
效果图
<!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/bg06.png);
}
.top h2 {
width: 100%;
height: 60px;
text-align: center;
padding-top: 5px;
color: white;
font-size: 40px;
background: url(img/header-left.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:30px;
}
#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 mychart2 = echarts.init(document.getElementById('left-bottom'));
setInterval(() => {
mychart2.clear();
mychart2.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"
}
],
});
},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>
扫一扫
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
