js生成一个复杂的文化旅游大屏代码,要求有echarts图表、地图展示
时间: 2024-02-18 18:00:29 浏览: 24
以下是一个简单的示例代码,使用了HTML、CSS和JavaScript,可以生成一个文化旅游大屏:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文化旅游大屏</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="screen">
<div id="header">
<h1>文化旅游大屏</h1>
</div>
<div id="content">
<div id="map"></div>
<div id="chart"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
color: #000;
font-size: 2em;
font-family: Arial, sans-serif;
}
#screen {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#header {
margin-bottom: 2em;
}
#header h1 {
font-size: 4em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
}
#content {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 80vh;
}
#map {
width: 50%;
height: 100%;
}
#chart {
width: 50%;
height: 100%;
}
```
JavaScript:
```javascript
// 地图展示
var myChart = echarts.init(document.getElementById('map'));
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
myChart.setOption(option);
// 图表展示
var myChart2 = echarts.init(document.getElementById('chart'));
var option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2011年', '2012年', '2013年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['北京', '上海', '广州', '深圳', '杭州']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141]
},
{
name: '2013年',
type: 'bar',
data: [23438, 31000, 121594, 134141, 181962]
}
]
};
myChart2.setOption(option2);
```
这个示例中,HTML部分定义了一个id为"screen"的容器,包含一个id为"header"和一个id为"content"的子容器,JavaScript部分使用了ECharts库,实现了地图和图表的展示。CSS部分使用了灰白色背景、黑色字体、科技感的字体样式和布局,使得整个大屏看起来非常有文化旅游的感觉。您可以根据自己的需求修改其中的样式和内容。