H5数据可视化(项目搭建及页面布局)

最新推荐文章于 2024-09-28 13:57:28 发布

逆袭的菜鸟X

最新推荐文章于 2024-09-28 13:57:28 发布

阅读量3.1k

点赞数 2

分类专栏：我的前端

本文链接：https://blog.csdn.net/weixin_36445197/article/details/105325279

版权

我的前端专栏收录该内容

87 篇文章 5 订阅

订阅专栏

1、引入flexible.js进行布局

在项目中引入flexible.js，具体的flexible的使用网上有很多小伙伴们可以自行查询，具体作用就是让我们的项目自适应设备宽度。

<script src="./flexible.js"></script>

源码

$(document).ready(function () {
  var myChart = echarts.init(document.getElementById("container-one-content"));
  // 123456热线
  var option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["17/1", "17/2", "17/3", "17/4", "17/5", "17/6", "17/7", "17/8", "17/9", "17/10", "17/11", "17/12", "17/13", "17/14"],
      axisLine: {
        lineStyle: {
          color: "#03A9F4"
        }
      }
    },
    yAxis: [
      {
        name: "单位/件",
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#03A9F4"
          }
        },
        splitLine: {
          //网格线
          show: false
        }
      },
      {
        type: "value",
        min: 0,
        max: 1000,
        axisLine: {
          lineStyle: {
            color: "#03A9F4"
          }
        },
        splitLine: {
          //网格线
          show: false
        },
        axisLabel: {
          show: true,
          formatter: function (value, index) {
            return value / 25;
          },
          show: true,
          color: "#03A9F4",
          fontSize: 13
        }
      }
    ],
    series: [
      {
        data: [820, 932, 901, 2234, 1290, 1330, 1320, 1100, 2590, 1870, 2400, 1500, 1133, 888],
        type: "line",
        areaStyle: {
          color: "green"
        },
        lineStyle: {
          color: "#4CAF50"
        }
      }
    ],
    dataZoom: [
      {
        id: 'dataZoomX',
        type: 'inside',
        xAxisIndex: [0],
        filterMode: 'none',
        start: 0,
        end: 50
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);



  var myChart2 = echarts.init(document.getElementById("container-one-content2"));
  // 123456热线
  var option2 = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      data: ['咨询', '求助', '建议', '感谢', '投诉', "举报"]
    },
    series: [
      {
        name: '问题类型',
        type: 'pie',
        radius: ['20%', '30%'],
        center: ["50%", "40%"], 
        avoidLabelOverlap: false,
        label: {
          position: "outside"
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 27, name: '建议' },
          { value: 3, name: '感谢' },
          { value: 48, name: '咨询' },
          { value: 1, name: '投诉' },
          { value: 20, name: '求助' },
          { value: 1, name: '举报' }
        ]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option2);


});

在这里我修改部分上述源码把默认宽度分为24份

假设我们的设计稿宽度为1920px，那么我们1rem=80px,为了减少布局中的计算我们直接使用vscode插件完成自动计算：
1、vscode搜索下载插件cssrem
2、更改默认配置如下：

2、引入vscode插件自动编译less文件

1、vscode搜索插件Easy LESS 在这里插入图片描述

2、Command+p搜索settiong.json加入如下配置

    "less.compile": {
        "compress": false, 
        "sourceMap": false, 
        "out": "${workspaceRoot}/css/"
    },

这样我们保存less文件后会在上面配置的目录下自动生成css文件

3、引入Echart和Jquery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

4、搭建项目

index.html

<!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>数据可视化</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="header">
        <H1>标题</H1>
    </div>
    <div class="content">this is content</div>
    <script src="./flexible.js"></script>
    <script>
        $(document).ready(function() {

        });
    </script>
</body>

</html>

index.less

* {
  padding: 0;
  margin: 0;
}
body {
    background: url("../image/bac.jpg") no-repeat top center;
    min-width: 1024px;
    max-width: 1920px;
}
.header {
    line-height: 2;
    border-bottom: 1px white solid;
    H1 {
        text-align:  center;
        color:  white;
    }
}
.content {
    margin-top: .125rem;
    background-color: rgba(255, 255, 255, 0.1);
    height: 6.25rem;
}