Echarts如何实现多图表缩放和自适应?附源码

简介: Echarts如何实现多图表缩放和自适应?附源码

主题:智慧社区可视化大屏

开发技术:

 Echarts+html+css+js

支持平台:

 dw,vscode,webstorm,idea,Hbuilderx等

源码:文末附

如需定制开发大屏,可在公众号内联系作者

体效果

a4a8fe9f2e00d9513281f47f52efaa6b.png

部分js代码


<div class="top_box_right">
  <div class="p2_rT">
    <span class="j_1"></span>
    <span class="j_2"></span>
    <span class="j_3"></span>
    <span class="j_4"></span>
    <div class="title"><img src="img/page2/icon3.png" />社区概览</div>
    <div class="data_sqgl">
      <div class="data_box">
        <font class="font shenlan" face="font01">10025</font><span>人</span>
        <div class="data_title2">社区实有人口</div>
      </div>
      <div class="data_box">
        <font class="font zise" face="font01">8962</font><span>个</span>
        <div class="data_title2">户籍人口总数</div>
      </div>
    </div>
    <span class="line"></span>
    <div class="data_sqgl">
      <div class="data_box">
        <font class="font qianlan" face="font01">10025</font><span>人</span>
        <div class="data_title2">暂住证未办理人数</div>
      </div>
      <div class="data_box">
        <font class="font huangse" face="font01">8962</font><span>个</span>
        <div class="data_title2">持有暂住证人数</div>
      </div>
    </div>
    <ul class="home_data2">
      <li class="home_data_one">
        <div class="home_data_num">
          <font class="font1 shenlan" face="font01">456</font>
          <span></span>
        </div>
        <div class="home_data_name">流动人口</div>
      </li>
    </ul>
    <ul class="home_data2">
      <li class="home_data_two">
        <div class="home_data_num">
          <font class="font1 qianlan" face="font01">456</font>
          <span></span>
        </div>
        <div class="home_data_name">特殊人群</div>
      </li>
    </ul>
  </div>
</div>

部分CSS代码


/*中间*/
.center_bottom{  margin-top: 1.2rem;  width: 100%;
  height: 340px;  border: #1a3f72 solid 2px;
  background: rgba(41,85,252,.2);  position: relative;
  box-sizing: border-box;}
.main_right{  width: 23.7%;  height: 100%;  float: right;}
.right_top{  width: 100%;  height: 200px;
  border: #1a3f72 solid 2px;  background: rgba(41,85,252,.2);
  position: relative;  box-sizing: border-box;}
.right_bottom{  margin-top: 1.2rem;
  width: 100%;  height: 740px;  border: #1a3f72 solid 2px;
  background: rgba(41,85,252,.2);  position: relative;
  box-sizing: border-box;}
.top_box{  width: 100%;  height: 730px;}
.top_box_left{  width: 50%;  height: 100%;
  border: #1a3f72 solid 2px;  background: rgba(41,85,252,.2);
  position: relative;  box-sizing: border-box;  float: left;}

.top_box_center{  width: 22.7%;  height: 100%;
  float: left;  margin: 0 1.5rem 0 1.5rem;}
.p2_cT{
  width: 100%;    height: 49.5%;    border: #1a3f72 solid 2px;
    background: rgba(41,85,252,.2);    position: relative;
    box-sizing: border-box;    margin-bottom: 25px;}
.p2_cB{  width: 100%;  height: 46.9%;
  border: #1a3f72 solid 2px;
  background: rgba(41,85,252,.2);
    position: relative;  box-sizing: border-box;}
.top_box_right{  width: 24.7%;  height: 100%;  float: left;}
.p2_rT{  width: 100%;  height: 75.2%;  border: #1a3f72 solid 2px;
  background: rgba(41,85,252,.2);  position: relative;
  box-sizing: border-box;  margin-bottom: 25px;}

想要源码的小伙伴们,请关注公众号Echarts技术专家,点击获取资源。

相关文章
|
10天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
2月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
198 1
微信小程序使用echarts图表(ec-canvas)
|
2月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现智慧门店可视化大屏!!附源码!!
Echarts+JS实现智慧门店可视化大屏!!附源码!!
|
2月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
|
2月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
2月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】大客户银行可视化大屏(附源码一键复制)
【Echarts大屏】大客户银行可视化大屏(附源码一键复制)
|
2月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】智慧图书馆可视化大屏(附源码一键复制)
【Echarts大屏】智慧图书馆可视化大屏(附源码一键复制)
|
2月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】数字化茶叶可视化大屏(附源码一键复制)
【Echarts大屏】数字化茶叶可视化大屏(附源码一键复制)
|
2月前
|
前端开发 JavaScript 新能源
【Echarts大屏】新能源汽车大屏(附源码一键复制)
【Echarts大屏】新能源汽车大屏(附源码一键复制)
|
2月前
|
前端开发 JavaScript
【Echarts大屏】数字化图书馆大屏(附源码一键复制)
【Echarts大屏】数字化图书馆大屏(附源码一键复制)

热门文章

最新文章

下一篇
无影云桌面