fastmock 模拟数据 echarts 可视化实例

最新推荐文章于 2023-05-28 06:15:00 发布

biubiubiu666666

最新推荐文章于 2023-05-28 06:15:00 发布

阅读量205

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_42129224/article/details/116493283

版权

本文详细介绍了如何利用FastMock生成模拟数据，并结合ECharts进行数据可视化。首先，通过FastMock设置接口返回动态模拟数据，然后在前端项目中引入ECharts库，配置图表参数，将模拟数据绑定到ECharts图表上，实现动态数据展示。最后展示了具体的数据可视化效果和代码示例。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .content {
        border: 1px solid rgb(117, 193, 251);
        width: 110vh;
        height: 90vh;
        margin: 10px auto;
        padding: 10px;
    }
    
    .title h3 {
        margin-left: 2em;
        position: relative;
        width: 8em;
        height: 2.5em;
        line-height: 2.5em;
        background-color: rgb(117, 193, 251);
        color: #fff;
        text-align: center;
    }
    
    .title h3:before {
        content: "";
        position: absolute;
        top: 0;
        left: -1em;
        width: 0;
        height: 0;
        border-top: 1.25em solid transparent;
        border-right: 1em solid rgb(117, 193, 251);
        border-bottom: 1.25em solid transparent;
    }
    
    .title h3:after {
        content: "";
        position: absolute;
        top: 0;
        right: -1em;
        width: 0;
        height: 0;
        border-bottom: 1.25em solid transparent;
        border-left: 1em solid rgb(117, 193, 251);
        border-top: 1.25em solid transparent;
    }
    
    .proportion,
    .charges {
        margin-bottom: 10px;
    }
    
    #proportion-chart1,
    #proportion-chart2 {
        display: inline-block;
        width: 35%;
        height: 30vh;
    }
    
    #Pselect {
        display: inline-block;
        width: 25%;
        height: 30vh;
        vertical-align: top;
    }
    
    #Pselect select {
        display: block;
        width: 6em;
        height: 2em;
        margin: 6vh auto;
        text-align: center;
        text-align-last: center;
        outline: none;
        border: 1px solid #277de2;
    }
    
    .charges select {
        display: inline-block;
        vertical-align: top;
        width: 6em;
        height: 2em;
        text-align: center;
        text-align-last: center;
        outline: none;
        border: 1px solid #277de2;
    }

最低0.47元/天解锁文章

biubiubiu666666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
fastmock 模拟数据 echarts 可视化实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl.
复制链接

扫一扫