echarts大屏

wyzqhhhh

已于 2024-03-03 16:02:27 修改

阅读量854

点赞数 16

文章标签： echarts 前端 javascript

于 2024-01-13 23:58:15 首次发布

本文链接：https://blog.csdn.net/wyzqhhhh/article/details/135576226

版权

1.echarts大屏

ECharts 大屏通常指的是使用百度开源的图表库 ECharts 来创建的数据可视化大屏展示。这样的大屏通常用于展示大量数据、趋势、指标等信息，以便用户能够更直观地理解和分析数据。这些大屏可以在监控室、数据中心、企业大厅等场景中使用，帮助用户实时监测业务状况、做出决策，并提供交互性的功能。

我公司就是展示乘客在那几个时间段进行打车比较多，打车后被取消的派单车型的数量，司机在哪里接单多一些这种数据。

具体来说，ECharts 是一个基于 JavaScript 的开源图表库，它支持多种图表类型，包括折线图、柱状图、饼图、散点图等。使用 ECharts，开发者可以轻松地在网页上创建各种交互式、可定制的图表，并通过这些图表展示复杂的数据关系。

在创建 ECharts 大屏时，开发者通常会选择合适的图表类型、设计布局，配置图表样式和交互行为，以及与后端数据源进行交互，实现实时更新和动态展示数据。这样的大屏展示不仅可以提供全面的数据概览，还能够使数据更易于理解和解释。

总的来说，ECharts 大屏是利用 ECharts 图表库创建的、用于数据可视化的大屏展示，用于展示和分析大量的数据信息。

一、页面布局

1.页面总体布局，先将界面分成header（头部）和container(内容)两个部分，头部显示标题和当前时间，container(内容)显示可视化的echarts图表

2.container(内容)部分采用百分比布局，填充除去头部高度的剩余空间，用height:calc(100vh - 80px)来设置高度的。

calc() 函数： calc() 是 CSS 中的计算函数，它允许你在样式表中执行数学运算。在这个例子中，它用于计算元素的高度。
100vh 单位： vh 表示视口高度的百分比。一个 vh 等于视口高度的1%。因此，100vh 表示整个视口的高度。

100vh: 使用 100vh 作为高度单位确保元素的高度占据整个视口高度。这对于创建全屏或与视口高度相关的元素非常有用，因为它会自动适应不同屏幕尺寸。
calc(100vh - 80px): 这一部分实际上是在计算视口高度减去80像素。这样的计算通常用于在视口内留出一些空间，例如页脚、页眉等。这确保元素的高度是动态计算的，适应不同视口大小，并在视口高度变化时自动调整。

考虑到移动设备和不同尺寸的屏幕，使用 vh 单位可以更好地适应不同的屏幕高度。这种做法可以提高响应性，使得元素在各种设备上都能够合适地占据视口高度，并减去指定的像素值，以保持整体设计的平衡。

<html>
<head>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  

<style>
	.contains{
        background:#000a2d;
        height:100%;width:100%;
        font-size:12px;
        margin:0px;
        padding:0px;}
	.header{ 
       height:80px;
       background:red;
       margin:0px;
       padding:0px;}
	.header .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:2.8rem;align-items: center;height: 100%;}
	.time{margin-right: 10px;font-size: 1.8rem;margin-top: -4rem;color: #fff;float: right;}
	.time .label{font-weight:300}
	.container{
        height:calc(100vh - 80px);
        width:100%;
        color:#fff;
        text-align:center;
        font-size:30px;}
.item_left,.item_center,.item_right{height:100%;}
.item_left{background:green;}
.item_center{background:gray;}
.item_right{background:blue;}

</style>
</head>
<body class="contains">
	<div class="header">
		<div class = "title" >数据可视化-Echarts</div>
		<div class = "time" >当前时间：<label>2020-05-27 08:36:58</label></div>
	</div>
	<div class="container">
        <div class="container">
			<div class="row">
				<div class="col-md-4 item_left">
					一列
				</div>
				<div class="col-md-4 item_center">
					二列
				</div>
				<div class="col-md-4 item_right">
					三列
				</div>
			</div>
		</div>
    </div>
</body>
</html>

3.利用bootstrap栅格化布局，将container(内容)部分分成三列

4.将第一列分成三行，其他列的布局实现类似。

5.添加边框效果后，整体布局效果图


  <body class="contains">
    <div class="header">
      <div class="title">数据可视化-Echarts</div>
      <div class="time">当前时间：<label>2020-05-27 08:36:58</label></div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-4 item_left">
          <div class="c1">
            <div class="industryChartDiv">
              <div class="border" id="industryChart"></div>
            </div>
            <div class="changeChartDiv">
              <div class="border" id="changeChart"></div>
            </div>
            <div class="ageChartDiv">
              <div class="border" id="ageChart"></div>
            </div>
          </div>
        </div>
        <div class="col-md-4 item_center">
          <div class="c2">
            <div class="totalInfoDiv" id="totalInfoChart"></div>
            <div class="moveMapDiv" id="moveMapChart"></div>
          </div>
        </div>
        <div class="col-md-4 item_right">
          <div class="c3">
            <div class="border" id="powerChart"></div>
            <div class="border" id="playChart"></div>
            <div class="border" id="areaChart"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 
    我在每个 border 元素上添加了一个唯一的 ID（例如，industryChart、changeChart 等）。
    然后，你需要在页面底部引入 ECharts 库，
    并为每个图表元素初始化 ECharts 实例，通过配置项配置相应的图表。
  -->
    <!-- 在这里引入 ECharts 配置脚本 -->
    <script src="./echarts图表.js"></script>
  </body>

二、可视化echarts图表部分

- 确保 ECharts 库正确引入：
  - 确保你的ECharts库文件（echarts.min.js）的路径正确，可以在浏览器中检查控制台错误，看是否有关于ECharts的加载错误。
- 等待DOM加载完成后再初始化图表：
  - 确保在HTML文档的<body>标签末尾引入你的ECharts配置脚本，以确保DOM加载完成后再初始化图表。

我们首先在 head 部分引入了 ECharts 库，然后在 body 中创建了一个 div 元素作为图表容器（id 为 'industryChart'），并在 body 底部的 script 标签中进行了图表的初始化和配置。你需要根据实际情况修改容器的宽度、高度、以及配置项中的数据和类型等信息。确保图表容器的 ID 和初始化脚本中的 ID 一致。如果你有多个图表，需要为每个图表容器和初始化脚本分别设置不同的 ID。

// 初始化各个图表
var industryChart = echarts.init(document.getElementById('industryChart'));
var changeChart = echarts.init(document.getElementById('changeChart'));
var ageChart = echarts.init(document.getElementById('ageChart'));
//类似于这种

// 示例配置，具体根据你的需求修改
var industryOption = {
    title: {
        text: '行业数据图表'
      },
      xAxis: {
        type: 'category',
        data: ['类别1', '类别2', '类别3', '类别4', '类别5']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70],
        type: 'bar'
      }]
};

// 给各个图表设置配置项
industryChart.setOption(industryOption);
changeChart.setOption(changeOption);