ECharts项目小结~

最新推荐文章于 2023-06-14 20:22:43 发布

ToptimisticX

最新推荐文章于 2023-06-14 20:22:43 发布

阅读量362

点赞数 1

分类专栏：笔记文章标签： css 可视化 js html javascript

本文链接：https://blog.csdn.net/qq_45918426/article/details/117231401

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

项目主页效果
页面布局
- flex三栏布局
- 每个图表的大小设置
图表设计
- 设计步骤
- 点击图表跳转

项目主页效果

在这里插入图片描述

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>数据可视化</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <header onclick="window.location.href= 'index.html'; return false ">
    <h1>信息工程学院毕业生就业统计</h1>
    <div class="showTime"></div>
    <!-- 计时器 -->
    <script>......省略
    <script>
    </header>
  <!-- 页面主体部分 -->
  <section class="mainbox">
  <div class="column">......省略
  <div>
  <div class="column">......省略
  <div>
  <div class="column">......省略
  <div>
  <section>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <!-- 先引入jquery -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
  <script src="js/echarts-map-henan.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script src="js/index.js"></script>
  <script src="js/socket_service.js"></script>
</body>
</html>
</script>

页面布局

flex三栏布局

CSS配置

.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

设置主页面display: flex(弹性盒模型)，并且设置最大最小宽度，即可实现一行多个div。
设置column {flex:3}
column: nth-child(2) {flex:5}
即可实现三列div元素比例为3 : 5 : 3

每个图表的大小设置

CSS配置

.mainbox .panel .chart {
  height: 3.25rem;
}

设置每个图表所存放div的高度即可实现一列多个图表平均分配在主页上。
(rem为相对大小即根据页面px的大小计算出的单位)

图表设计

设计步骤

步骤一
现在页面内放置一个DIV用来放图表，然后设置该DIV的id或者class。
步骤二
通过这个DIV的id或者class来初始化一个Echarts对象。

var myChart1 = echarts.init(document.querySelector(".bar .chart"));

步骤三
配置option。

var option = {......省略}。

步骤四
将配置好的option指定给Echarts对象。

myChart1.setOption(option);

点击图表跳转

myChart1.on('click', function (params) {
  document.cookie = params.dataIndex;
  window.location.href = '我是子页面的链接如xxx.html';
});

使用cookie存放点击位置的下标，即可在子页面使用cookie获得该信息，从而显示不同数据。

(function () {
  //得到父页面中cookie获取到的位置信息
  var jsonstr = document.cookie.split(';')[0];
  $.get("http://127.0.0.1:8888/api/case0", function (ret, status) {
    var job = []
    var number = []
    var maxn = 0;
    //通过位置信息选择不同的数据
    for (var i = 0; i < ret[jsonstr].length; i++) {
      var name = ret[jsonstr][i].name
      var num = ret[jsonstr][i].number
      if (maxn < num) maxn = num
      job.push(name)
      number.push(num)
    }
    var mCharts1 = echarts.init(document.getElementById("div1"))
    var option1 = {......省略
    };
    mCharts1.setOption(option1)
  });
})();

ToptimisticX

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ECharts项目小结~

文章目录项目主页效果页面布局flex三栏布局每个图表的大小设置图表设计设计步骤点击图表跳转项目主页效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>数据可视化</titl
复制链接

扫一扫