IDEA中用echart写出中国疫情分析情况(含地图非动态)

最新推荐文章于 2024-05-11 18:29:48 发布

仇振杰

最新推荐文章于 2024-05-11 18:29:48 发布

阅读量2k

点赞数

分类专栏：中国疫情可视化文章标签：数据可视化 echarts

本文链接：https://blog.csdn.net/weixin_46238738/article/details/111198551

版权

1.操作步骤

先建立一个大的容器
写出头部
背景
本体分成三部分分别写柱形图地图折线图

html中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="LX.css">

</head>
<header>
    <h1>全球疫情情况统计</h1>
</header>
<body>
<section class=".mainbox">

    <div class="colunm">
        <div class="panel bar">
            <h2>全球疫情top5</h2>
            <div class="chart"><
        </div>
    </div>
    </div>


    <div class="colunm">
        <div class="panel map">
        <h2>中国疫情图疫情情况</h2>
            <div class="chart">
        </div>
            <div class="no-hd">
                <ul>
                    <li>感染人数:64154412</li>
                    <li>治愈人数:44130293</li>
                </ul>
            </div>
        </div>
    </div>


    <div class="colunm">
        <div class="panel line">
        <h2>中国疫情变化</h2>
            <div class="chart">
    </div>
    </div>
    </div>


</section>
<script src="../js/echarts.min.js"></script> 
<script src="LX.js"></script>

less(css)中的代码一定要使用less去渲染 css无法进行渲染html的代码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: url("../images/bg.jpg");
}

header{
  position: relative;
  background: url("../images/head_bg.png");
  background-size: 100% 100%;
  height: 5.25rem;
}

h1{
  font-size: 23px;
  color: white;
  line-height: 56px;
  text-align: center;
}

.\.mainbox {
  display: flex;
  margin: 0 auto;
  padding: 25px 25px 0;
  height: 101px;
}
.colunm{
  flex: 3;
}

.colunm:nth-child(2){
  flex: 5;
}

.panel{
  height: 550px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url("../images/line(1).png");
  padding: 0

最低0.47元/天解锁文章

仇振杰

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
IDEA中用echart写出中国疫情分析情况(含地图非动态)

1.操作步骤先建立一个大的容器写出头部背景本体分成三部分分别写柱形图地图折线图html中的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="LX.css"></head><header&
复制链接

扫一扫