Echarts数据可视化

已于 2022-04-12 17:03:15 修改
阅读量356 收藏
点赞数
分类专栏： 数据可视化 文章标签： css css3 html
于 2022-01-07 14:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FellAsleep/article/details/122364030
版权
博客探讨了Echarts在数据可视化中的应用，并详细讲解了CSS中的border-image属性和实现文本超出显示省略号的技巧，结合实例代码index.js和tubiao.js进行阐述。
摘要由CSDN通过智能技术生成
border-image:相关说明

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .box {
   
      width: 350px;
      height: 160px;
      background-color: #222;
      margin: 30px;
    }

    .box {
   
      /* *** 一定要在border-image之前就设置盒子的边框属性。 要有边框才可以使用边框背景图 */
      border: 20px solid #222;
      /* 边框背景图border-image复合属性 */
      border-image: url(./images/border.png) 55 40 25 130 stretch;
      /* 注意点1： 如果不规则图形， 盒子的边框宽度也要设置成不规则宽度 */
      border-width: 55px 40px 25px 130px;
      /* 注意点2： 如果给元素设置了border，则会把盒子宽高撑开
          默认 box-sizing: content-box 外扩盒子 = content + padding + border
          解决方案，设置内减盒子  box-sizing: border-box  总宽度不变，有了padding和border之后，盒子content会自动内减
          */
      box-sizing: border-box;
      /* 注意点3：设置内减盒子之后，由于content自动内减。影响盒子内容布局
          解决方案： 给盒子添加一个子元素，采用子绝父相定位来把内容撑开
          */
      position: relative;

    }

    .inner {
   
      /* 子绝父相 */
      position: absolute;
      left: -130px;
      top: -55px;
      right: -40px;
      bottom: -25px;
      padding: 20px 30px
    }

    .box2 {
   
      width: 400px;
      height: 300px;
    }

    .box3 {
   
      width: 500px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box box1">
    <div class="inner">
      111
    </div>
  </div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>

</html>
超出文本显示省略号:

        .box{
   
            width: 100px;
            height: 100px;
            background-color: pink;

            /* 1.设置文本不允许换行 */
            white-space: nowrap;
            /* 2.设置盒子内容溢出隐藏 */
            overflow: hidden;
            /* 3.设置溢出隐藏文字 */
            text-overflow: ellipsis;
        }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./fonts/icomoon.css" />
    <!-- 导入js文件 -->
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/index.js"></script>
    <!-- 导入echarts -->
    <script src="./js/echarts.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/tubiao.js"></script>
  </head>
  <body>
    <!-- 版心 -->
    <div class="container">
      <!-- 第一列 -->
      <div class="column">
        <!-- 1.数据概览 -->
        <div class="overview panel">
          <div class="inner">
            <div class="item">
              <h4>2,190</h4>
              <span
                ><i class="icon-dot" style="color: #006bff"></i> 设备总数</span
              >
            </div>
            <div class="item">
              <h4>190</h4>
              <span
                ><i class="icon-dot" style="color: #69cba3"></i> 季度新增</span
              >
            </div>
            <div class="item">
              <h4>3,001</h4>
              <span
                ><i class="icon-dot" style="color: #69cba3"></i> 运营设备</span
              >
            </div>
            <div class="item">
              <h4>108</h4>
              <span
                ><i class="icon-dot" style="color: #ed3f35"></i> 异常设备</span
              >
            </div>
          </div>
        </div>
        <!-- 2.设备监控 -->
        <div class="monitor panel">
          <div class="inner">
            <!-- 2.1 顶部tab栏 -->
            <div class="tabs">
              <a class="active" href="javascript:">故障设备监控</a>
              <a href="javascript:">异常设备监控</a>
            </div>
            <!-- 2.2 内容区域 -->
            <div class="content">
              <!-- 头部内容 -->
              <div class="head">
                <span>故障时间</span>
                <span>设备地址</span>
                <span>异常代码</span>
              </div>
              <!-- 轮播图窗口 -->
              <div class="carousel-view">
                <!-- 轮播盒子 -->
                <div class="carousel">
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>湖北省武汉市黄陂区黑马程序员206教室</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                  <div class="row">
                    <i class="icon-dot" style="color: skyblue"></i>
                    <span>20211202</span>
                    <span>北京市朝阳区</span>
                    <span>1000001</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 另一个content -->
            <div class="content" style="display: none">
                <!-- 头部内容 -->
                <div class="head">
                  <span>异常时间</span>
                  <span>设备地址</span>
                  <span>异常代码</span>
                </div>
                <!-- 轮播图窗口 -->
                <div class="carousel-view">
                  <!-- 轮播盒子 -->
                  <div class="carousel">
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class="row">
                      <i class="icon-dot" style="color: skyblue"></i>
                      <span>20211203</span>
                      <span>广东省深圳市宝安区</span>
                      <span>1000002</span>
                    </div>
                    <div class
最低0.47元/天 解锁文章
A-sleep
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts数据可视化显示
qq_35111794的博客
03-18 624
1、在head中，title下面引入脚本echarts.js文件； 2、做一个DOM容器.box在body中； 3、对box在head中设置width和height以及background-color； 4、初始化echarts实例对象； 5、指定配置项和数据； 在echarts“实例”中，设置“var=” 6、把配置项设置给echarts实例对象。在body中如下操作即可。 ...
8.2echarts展示数据
booker009的博客
01-08 146
Echarts快速使用。
ECharts数据可视化（案例）
nanxun201314的博客
12-03 1337
ECharts数据可视化案例
【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
孙叫兽的博客
04-03 1万+
Echats可视化大屏经典案例
关卡二：基于ECharts数据可视化项目
qq_64133626的博客
09-21 959
完成小米官网的开发应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...ECharts 数据可视化简介与基本使用。
echarts数据可视化作业
01-14
在本“ECharts数据可视化作业”中，我们将深入探讨ECharts的使用方法以及它在数据可视化的应用。 1. **ECharts基础概念** - **图表类型**：ECharts提供了多种图表类型，如柱状图（bar）、折线图（line）、饼图...
Echarts数据可视化通用模板
07-04
在这个"Echarts数据可视化通用模板"中，我们可以看到一系列针对不同应用场景的示例，包括但不限于大屏设计、物联网统计、运营监控、信用风控、销售分析、大数据展示以及空气污染指数的分析等。 首先，`e017-echarts...
基于ECharts数据可视化大屏案例源码
12-03
在“基于ECharts数据可视化大屏案例源码”中，我们可以学习到以下几个关键知识点： 1. **ECharts基础使用**：了解如何引入ECharts库，设置图表容器，以及初始化图表。这包括配置项的设置，如`title`、`legend`、`...
基于JavaScript的echarts数据可视化大屏设计源码
最新发布
03-28
**基于JavaScript的ECharts数据可视化大屏设计源码详解** 在大数据时代，数据可视化成为企业理解和展示业务数据的重要工具。ECharts，一个基于JavaScript的开源图表库，因其丰富的图表类型和强大的交互性，广泛应用...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
数据可视化-echart-pink
qq_46341900的博客
11-05 605
可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是 80px 插件-配置按钮—配置扩展
【Echarts】柱状图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息
小5聊的博客
03-11 8979
前面几篇文章在做一个数据统计图表的功能，对于图表第三方插件，接触比较多的是echarts， 由于隔了好长时间没怎么用这个插件，很多具体细节使用基本都忘了，因此本篇文章将回顾柱状图常见功能
Echarts大屏展示大数据可视化(附50套模板案例代码源码)
Crazy程序猿
05-26 1万+
不可否认大数据时代已经来临了，数据的收集、分析、展示，在商业应用上不可或缺，不管是给老板展示还是客户演示，有时起到至关重要的作用。 HTML+Echarts图表框架比较靠谱，稍微有点HTML基础，就能上手，效果也是非常不错的。同时整理了不少不错的模板源码，有需要的朋友可以根据项目需求二次修改，基本拿走就能用。
echarts实现知识图谱，生产项目
清澈明朗 积极向上
02-28 2007
通过使用echarts的关系图实现知识图谱展示和管理。
基于Echarts实现大屏数据可视化物虚拟数据统计
HTML网页设计
08-15 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
运用ECharts展示股票k线图
weixin_45368440的博客
10-15 3090
echarts与股票K线图，股票量化交易系统图表
echarts 关系图graph
热门推荐
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
ECharts实现数据可视化入门教程（超详细）
weixin_58091723的博客
09-04 521
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。通俗的理解：是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）
【vue3】通过echarts实现k线图
qq_44971635的博客
06-05 776
在vue3中通过echarts实现k线图
ECharts数据可视化
06-04
很高兴为您解答关于ECharts数据可视化的问题。ECharts是百度开源的一个数据可视化库，它支持多种类型的图表展示，例如折线图、柱状图、饼图等。ECharts提供了丰富的配置项，使得用户可以方便地定制自己想要的图表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值