精华内容
下载资源
问答
  • 大屏项目
    2022-04-29 20:39:56

    前言

    最近公司有个大屏的需求,第一次做,踩了不少坑,同时也还有些疑问。
    希望能给需要的朋友避坑,也欢迎大佬指点!

    明确需求再决定适配方案

    大屏最最重要的就是适配问题,所以第一步我们需要先明确需求,根据不同需求再考虑最优的适配方案。
    一般有以下几种:

    16:9(1920*1080)
    16:9(3840*2160)
    16:10(1920*1200)
    21:9(3440*1440)
    

    一般设计稿是给1920*1080,也就是16:9
    第一种情况:如果只需要适配同比例,eg. 16:9,最简单的适配方案就是scale。主要代码如下:

    ScreenAdapter.vue
    
    <template>
        <div class="screen-adapter" id="screen-adapter">
            <div class="content-wrap" :style="style">
                <slot />
            </div>
        </div>
    </template>
    <script>
    export default {
        name: 'screenAdapter',
        //参数注入
        props: {
            width: { // 设计图尺寸宽
                type: Number,
                default: 1920
            },
            height: {
                type: Number,
                default: 1080
            }
        },
        data() {
            return {
                style: {
                    width: `${this.width}px`,
                    height: `${this.height}px`,
                    transform: 'scale(1)', // 默认不缩放,垂直水平居中
                }
            }
        },
        mounted() {
            this.setScale();
            this.onresize = this.debounce(() => this.setScale(), 100);
            window.addEventListener('resize', this.onresize);
        },
        methods: {
            debounce: (fn, t) => {
                const delay = t || 500
                let timer
                return function () {
                    const args = arguments
                    if (timer) {
                        clearTimeout(timer)
                    }
                    const context = this
                    timer = setTimeout(() => {
                        timer = null
                        fn.apply(context, args)
                    }, delay)
                }
            },
            // 获取放大缩小比例
            getScale() {
                const w = window.innerWidth / this.width;
                const h = window.innerHeight / this.height;
                return w < h ? w : h;
            },
            // 设置比例
            setScale() {
                this.style.transform = `scale(${this.getScale()})`;
            }
        },
        destroyed() {
            window.removeEventListener('resize', this.onresize)
        }
    }
    </script>
    <style lang="less" scoped>
    .screen-adapter {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        transition: all 0.3s;
        position: relative;
        background: url('../../../assets/img/screen-bg.jpg') 100% 100%;
        .content-wrap {
            transform-origin: 0 0;
        }
    }
    </style>
    
    

    在大屏页面,把screen-adapter包在在外层使用即可。是不是很简单?(一定注意是同比例的哦,如果需要适配不同比例,请继续往下看)
    第二种情况:适配不同比例。我采用的是vw,vh,rem及媒体查询。主要代码如下:

    src/assets/styles/utils.less
    
    // 默认设计稿的宽度
    @designWidth: 1920;
    // 默认设计稿的高度
    @designHeight: 1080;
    
    // px转vw的函数
    .pxToVW (@px, @attr: width) {
        @vw: (@px / @designWidth) * 100;
        @{attr}: ~"@{vw}vw";
    }
    // px转vh的函数
    .pxToVH (@px, @attr: height) {
        @vh: (@px / @designHeight) * 100;
        @{attr}: ~"@{vh}vh";
    }
    
    vue.config.js
    
    css: {
            loaderOptions: {
                less: {
                    .......
                    // 全局配置utils.less,详细配置参考vue-cli官网
                    prependData: '@import "@/assets/styles/utils.less";'
                }
            }
        },
    

    做好以上配置后,重启项目,就可以使用了,示例如下:

    .pxToVH(156, height); // 156是设计稿的px值,第二个参数是属性;VH默认属性是’height’;这样就把156px转成了以vh为单位的值。

    .pxToVW(156, width); // 同上
    另外需要注意的是,字体的设置是根据页面根元素的大小改变而改变的,所以字体设置rem的同时需要设置媒体查询。

    到这里基本上通过这次大屏项目总结的经验基本就说完了。但是也有些疑问,比如:
    border-radius: 8px; 这个px怎么转?转成什么值更合适呢?
    欢迎大佬来指正!!!

    更多相关内容
  • 课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-外卖业务数据可视化大屏源码,课程设计大作业可视化大屏项目-...
  • vue 数据可视化大屏 分辨率 115202160 可调整为 76801440 缩放1.5倍查看 Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build ...
  • Vue3/ECharts5数据可视化(大屏展示)项目案例源码,一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化(大屏展示)项目。此项目使用'.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,全局...
  • 可视化大屏项目

    千次阅读 2022-04-23 18:46:25
    戳这里看项目展示 采用工具:python,echarts,mysql,flask。 本文适合初学者使用,但是要具备一定的python、前端、数据库知识。 一、数据爬取 1.数据爬取 1.1主函数处理 建立while循环可以使程序多次运行,可以在...


    前言

    戳这里看项目展示
    采用工具:python,echarts,mysql,flask。
    本文适合初学者使用,但是要具备一定的python、前端、数据库知识。

    一、数据爬取

    1.数据爬取

    1.1主函数处理

    1. 建立while循环可以使程序多次运行,可以在我们的控制下停止。
    2. 输入work,nums关键字,其中work是我们需要爬取岗位的关键字,nums是待爬取的页数。
    3. 建立for page in range(1, nums + 1)循环,对翻页进行处理。
    4. 将将work,nums添加到url中。
       while True:
            key = int(input("请输入0或1,1开始执行,0退出程序:"))
            if key == 1:
                work = input("请输入你要爬取的岗位:")
                nums = int(input("请输入要爬取的页数:"))
                for page in range(1, nums + 1):  # 翻页处理,因为待爬取网站url是从1开始,所以前面是1,又因循环是前闭后开所以num要加1
                    url = "https://search.51job.com/list/000000,000000,0000,00,9,99," + work + ",2,{}.html?lang=c&postchannel=0000&workyear=99&cotype=99&degreefrom=99&jobterm=99&companysize=99&ord_field=0&dibiaoid=0&line=&welfare=".format(
                        page)
                    print(url)  # 打印出我们要爬取的url
                    html = getHTMLText(url)
                    mydb_all(job(html))
    
            else:
                print('bye!')
                break
    
    

    1.2网页提取

    def getHTMLText(url):
        try:
            headers = {
                "User-Agent": "" ,
                'Cookie': ""       }
            r = requests.get(url, headers=headers, timeout=40)
            #print(r.text)
            return r.text
        except:
            return ""
    

    1.3相关信息提取

    在这里插入图片描述

    这是前面爬取的信息,同时我们需要的信息在“nwindow.SEARCH_RESULT =”中,因此采用正则方式对其进行提取。

    r = re.findall('window.__SEARCH_RESULT__ = (.*?)</script>', html, re.S)  # 提取所需要的信息
    

    对所得数据进行拼接和数据转换

    string = ''.join(r)  # 进行拼接
    infodict = json.loads(string)  # 将格式转化为json
    

    进一步对信息进行详细提取;

    result = infodict['engine_jds']  # 提取engine_jds标签下的内容
    #print(result)
    data_dict = []
    data_area=[]
    for i in result:  # 建立循环对数据进行进一步提取
    

    各个标签信息提取:

      r = re.findall('window.__SEARCH_RESULT__ = (.*?)</script>', html, re.S)  # 提取所需要的信息
        string = ''.join(r)  # 进行拼接
        infodict = json.loads(string)  # 将格式转化为json
        result = infodict['engine_jds']  # 提取engine_jds标签下的内容
        #print(result)
        data_dict = []
        data_area=[]
        for i in result:  # 建立循环对数据进行进一步提取ti
            ti = i['issuedate'][:10]
            job_name = i['job_name']  # 工作名称
            job_name = re.sub(u"(.*?)|\(.*?\)", "", job_name)  # 消除工作名括号
            company_name = i['company_name']  # 公司名称
            companytype_text = i['companytype_text']  # 公司类型(民营,合资,上市。。。)
            companytype_text = re.sub(u"(.*?)|\(.*?\)", "", companytype_text)  #消除括号
            if companytype_text == "创业公司":
                companytype_text = "民营公司"
            elif companytype_text == "外企代表处":
                companytype_text = "外资"
            elif companytype_text == "合资":
                companytype_text = "外资"
            elif companytype_text == "非营利组织":
                companytype_text = "民营公司"
    
            money = i['providesalary_text']  # 薪资标准
            if money:
                if str(money) == 'None':
                     pass
                elif money[-3:] == '万/月':
                    money = money.replace('万/月', '-万/月')
                    x =money.split('-')
                    money = (float(x[0]) + float(x[1])) * 10000 / 2
                elif money[-3:] == '千/月':
                    money = money.replace('千/月', '-千/月')
                    x = money.split('-')
                    money = (float(x[0]) + float(x[1])) * 1000 / 2
                elif money[-3:] == '万/年':
                    money = money.replace('万/年', '-万/年')
                    x = money.split('-')
                    money = (float(x[0]) + float(x[1])) / 2 * 10000 / 12
                else:
                    break
                money = ('%.2f' % money)
    
            leve = ''  # 给工资分等级
            if money:
                if 0 < float(money) < 10000:
                    leve = 'level_1'
                elif 10000<= float(money) < 15000:
                    leve = 'level_2'
                elif 15000 <= float(money) < 20000:
                    leve = 'level_3'
                elif 20000 <= float(money) < 25000:
                    leve = 'level_4'
                elif 25000 <= float(money):
                    leve = 'level_5'
    
    
            attribute = i['attribute_text'][2]  # 学历要求
            if attribute:
                if attribute == "本科":
                    attribute = attribute
                elif attribute == "大专":
                    attribute = attribute
                elif attribute == "硕士":
                    attribute = attribute
                elif attribute == "博士":
                    attribute = attribute
                else:
                    break
    
    
            workexperience = i['attribute_text'][1]
    
            jobwelf = i['jobwelf']  # 公司福利
    
            workarea_text = i['workarea_text'].split('-')[0]  # 工作地点
    

    1.4数据保存

    data_all.append([job_name,ti, company_name, area, companytype_text, money,leve, attribute, workexperience, jobwelf])
    cxn = pymysql.connect(host="127.0.0.1",
                              user="root",
                              password="123",
                              db="51job",
                              port=3309, # 端口号因为我的3306端口占用因此使用3309端口
                              charset="utf8")
        cur = cxn.cursor()
        value = data_dict
        sql = "insert into job(job,ti,company,country,companytype,money,leve,attribut,workexperience,jobwelf) VALUES(%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
        for v in value:
            cur.execute(sql,v)
        cxn.commit()
    

    到这里爬虫篇结束!!1

    二、数据可视化

    1.前端布局

    我们将一张整张大屏分成了6个区域:可以点这里去查看

    <div id="title">51job工作分析</div>
    <div id="l1">我是左1</div>
    <div id="l2">我是左2</div>
    <div id="c1">我是中1</div>
    <div id="c2">我是中2</div>
    <div id="r1">我是右1</div>
    <div id="r2">我是右2</div>
    

    在这里插入图片描述

    2.图表设计

    2.1 学历与岗位

    2.1.1数据获取

    此处展示学历与岗位之间的信息

    • 首先从数据库中提取相应的数据
     sql = "select attribut, count(country) as area from job GROUP BY attribut "
    
    • 然后将数据进行处理,得到我们所需要的数据格式,同时将数据格式转化为josn格式。
    data = utils.get_l1_data()
    edu= []
    num = []
    for k, v in data:
      edu.append(k)
      num.append(int(v))
    return jsonify({"edu": edu, "num": num})
    
    

    2.1.2 ajax数据交互

    • 之前在项目中用到ajax,是前端的技术,但是感觉作为后端开发者,对它的掌握还是很有必要的。
    • ajax全称为Asynchronous JavaScript And XML,就是异步的JS和XML。特点是可以在浏览器中向服务器发送异步请求,最大的优势就是无刷新获取数据。

    什么是同步请求?(false)

    同步请求是指当前发出请求后,浏览器什么都不能做,
    必须得等到请求完成返回数据之后,才会执行后续的代码,
    相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。
    也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,``
    

    什么是异步请求?(默认:true)

    默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,
    Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。
    一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,
    无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
    
    
    function get_l1_data() {
        $.ajax({
            url: "/l1",
            success: function (data) {
                ec_left1_option.xAxis.data=data.edu;
                ec_left1_option.series[0].data=data.num;
                ec_left1.setOption(ec_left1_option);
            }
        })
    }
    

    2.1.3图形绘制

    • ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
    • 我们引入我们所需要option,就可以绘制出我们需要的图表
    var ec_left1 = echarts.init(document.getElementById('l1'),"dark");
    var ec_left1_option = {
       //标题样式
       title : {
           text : "学历与岗位",
           textStyle : {
               color : 'white',
           },
           left : 'left'
       },
         color: ['#3398DB'],
           tooltip: {
               trigger: 'axis',
               axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                   type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
               }
    
           },
       xAxis: {
           type: 'category',
           data: []
       },
       yAxis: {
           type: 'value',
       	show: true
       },
       series: [{
           data: [],
           type: 'bar',
       	barMaxWidth:"50%"
       }]
    };
    ec_left1.setOption(ec_left1_option)
    

    在这里插入图片描述

    2.2中国地图绘制

    在这里插入图片描述

    • 首先我们需要导入China.js。
    • 依旧需要写入相应的依赖。
     var ec_center = echarts.init(document.getElementById('c2'), "dark");
    var mydata = []
    var ec_center_option = {
        title: {
            text: '岗位分布地图',
            subtext: '',
            x: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        //左侧小导航图标
    
        visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8,
            },
            splitList: [{ start: 1,end: 9 },
                {start: 10, end: 49 },
    			{ start: 50, end: 99 },
                { start: 100, end: 999 },
            ],//这设置是数据分等级
            color: ['#00ffff','#00eeee', '#98f5ff', '#bbffff',]
        },
    
        //配置属性
        series: [{
            name: '岗位数',
            type: 'map',
            mapType: 'china',
            roam: true, //拖动和缩放
            itemStyle: {
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#009fe8', //区域边框颜色
                    areaColor: "#f8f8ff", //区域颜色
                },
                emphasis: { //鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#fff",
                }
            },
            label: {
                normal: {
                    show: true, //省份名称
                    fontSize: 8,
                },
                emphasis: {
                    show: true,
                    fontSize: 8,
                }
            },
            data:[] //mydata //数据
        }]
    };
    ec_center.setOption(ec_center_option)
    

    注意:

    • 在爬取前面爬取数据中有很多的城市地名都是县级或者地级市这样的,因此我们需要将这些城市名统一到省级行政单位。只让我们的数据中只有重庆、湖北这样省级的格式。
    • 同时小伙伴需要注意数据爬取的时候并不是会爬取到全国的所有的省级单位都有数据,所以我在数据库建立一张表只存全国的身份名称,然后采用两张表联合查询,将没有爬取到的省份的值返回为0.如果没有值返回的话我们绘制的地图当鼠标滑过就不会有值显示只会有个省份名。
    [{'name': '北京', 'value': 9}, 
    {'name': '天津', 'value': 0}, 
    {'name': '黑龙江', 'value': 0}, 
    {'name': '辽宁', 'value': 0},
    {'name': '吉林', 'value': 0}, 
    {'name': '内蒙古', 'value': 0}, 
    {'name': '河北', 'value': 0},
    {'name': '河南', 'value': 1},
    {'name': '山东', 'value': 0},
    {'name': '山西', 'value': 0},
    {'name': '陕西', 'value': 0}, 
    {'name': '安徽', 'value': 6}, 
    {'name': '江苏', 'value': 4}, 
    {'name': '浙江', 'value': 3}, 
    {'name': '福建', 'value': 1}, 
    {'name': '广东', 'value': 56}, 
    {'name': '广西', 'value': 0}, 
    {'name': '湖南', 'value': 1}, 
    {'name': '湖北', 'value': 20}, 
    {'name': '重庆', 'value': 5},
    {'name': '贵州', 'value': 0}, 
    {'name': '云南', 'value': 0}, 
    {'name': '四川', 'value': 16},
    {'name': '甘肃', 'value': 0}, 
    {'name': '宁夏', 'value': 0}, 
    {'name': '西藏', 'value': 0}, 
    {'name': '新疆', 'value': 0},
    {'name': '海南', 'value': 0}, 
    {'name': '澳门', 'value': 0},
    {'name': '香港', 'value': 0},
    {'name': '台湾', 'value': 0}, 
    {'name': '上海', 'value': 41},
    {'name': '江西', 'value': 0},
    {'name': '青海', 'value': 0}]
    
    • 数据获取
      这里是统计省份出现的次数,两张表联合查询就可以将没爬取到的省份返回值为0.
    sql = "SELECT a.country, COUNT(b.country) AS instnum FROM city a LEFT JOIN job b ON a.country = b.country GROUP BY a.country;"   
    

    这里查询到的数据格式一个元组格式,还需进一步将数据转化为json格式同时满足我们所需要的格式。

    def get_c2_data():
        res = []
        for tup in utils.get_c2_data():
            # print(tup)
            res.append({"name":tup[0],"value":int(tup[1])})
        print(res)
        return jsonify({"data":res})
    

    后面的处理和前面折线图的数据交互异曲同工,这里就不在赘述。

    2.3滚动字幕设计

     <div id="risk_wrapper">
        <div id="risk_wrapper_li1">
             <ul>
             </ul>
         </div>
         <div id="risk_wrapper_li2"></div>
     </div>
    
    function start_roll() {
        var speed = 20; // 可自行设置文字滚动的速度
        var wrapper = document.getElementById('risk_wrapper');
        var li1 = document.getElementById('risk_wrapper_li1');
        var li2 = document.getElementById('risk_wrapper_li2');
        li2.innerHTML = li1.innerHTML //克隆内容
        function Marquee() {
            if (li2.offsetHeight - wrapper.scrollTop <= 0) //当滚动至demo1与demo2交界时
                wrapper.scrollTop -= li1.offsetHeight //demo跳到最顶端
            else {
                wrapper.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left
            }
        }
        var MyMar = setInterval(Marquee, speed) //设置定时器
        wrapper.onmouseover = function () {
            clearInterval(MyMar)    //鼠标移上时清除定时器达到滚动停止的目的
        }
        wrapper.onmouseout = function () {
            MyMar = setInterval(Marquee, speed)  //鼠标移开时重设定时器
        }
    }
    

    总结

    • 需要源码的小伙伴,有积分可以点击下载
    • 有问题可以留在评论区,我会尽力帮大家解决。
    • 这里提供csv版的链接:https://pan.baidu.com/s/1i7zjB1fEQCu7fkYXHlAR0Q
      提取码:s1r6
    展开全文
  • 综合信息展示大屏项目解决方案,提供具体的大屏项目建设方案
  • 数据可视化系统课程作业基于vue+echarts自己写一个数据可视化大屏项目源码。 启动项目 需要提前安装好 nodejs 与 npm,下载项目后在项目主目录下运行 npm/cnpm install 拉取依赖包。安装完依赖包之后然后使用 vue-...
  • 大屏项目屏幕自适应

    2021-09-16 14:01:04
    大屏项目难免遇到不同尺寸展示页面,此方案可设置不同尺寸的页面 解决方案: 核心方案是给你的页面设置不同尺寸宽高,然后根据当前浏览器页面的宽高设置缩放,从而来实现不同尺寸的缩放 截图展示: 查看...

    项目场景:

    大屏可视化项目屏幕自适应方案1

    需求描述:

    大屏项目难免遇到不同尺寸展示页面,此方案可设置不同尺寸的页面


    解决方案:

    核心方案是给你的页面设置不同尺寸宽高,然后根据当前浏览器页面的宽高设置缩放,从而来实现不同尺寸的缩放

    截图展示:

    正常情况下的页面

    对应尺寸下展示
    查看项目地址:https://xiaoli18093193677.github.io/screenAdaptation/dist/

    展开全文
  • 基于python实现实时获取国内疫情数据,大屏数据可视化报表展示项目源码。 文件内容如下: 1.sql脚本导入 2.spider.py爬取数据存入/更新数据库信息 3.app.py主启动程序 内附代码注释,日常学习,期末作业,高校毕业...
  • 写这篇文的初衷是为了记录一下,用react+ts搭建一个大屏项目的过程,并且记录通过flexbile进行适配的一些基础配置。 React + Typescript搭建项目,并实现屏幕适配 安装 // npm 方式 npm install -g create-react-...

    写这篇文的初衷是为了记录一下,用react+ts搭建一个大屏项目的过程,并且记录通过flexbile进行适配的一些基础配置。

    React + Typescript搭建项目,并实现屏幕适配

    安装

    // npm 方式
    npm install -g create-react-app
    // 如果很久之前安装过,建议卸载重新安装 npm uninstall -g create-react-app
    

    新建项目

    npx create-react-app my-app --template typescript
    

    flexible + rem实现适配

    1. 安装插件

    npm i lib-flexible --save
    
    npm i postcss-px2rem --save
    
    1.1 配置
    1.1.1配置meta标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    
    1.1.2 导入flexible文件

    在项目入口文件index.tsx中引入lib-flexible

    import 'lib-flexible';
    

    编辑器会报错"react无法找到模块“lib-flexible”的声明文件"。解决方案:在src目录下添加declaration.d.ts,对模块进行声明

    declare module 'lib-flexible';
    
    1.1.3 配置flexible文件

    由于react未暴露webpack文件。有两种方法

    1. 通过npm run eject命令可以将隐藏的wabpack文件暴露出来,但此方法不可逆
    2. 通过 react-app-rewired 插件来覆盖配置文件
    npm install react-app-rewired customize-cra -s
    

    更改package.json文件

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-app-rewired eject"
      },
    

    在根目录新建config-override.js文件

    const { override, addPostcssPlugins} = require('customize-cra');
    
    module.exports = override(
      addPostcssPlugins(
          [require("postcss-px2rem-exclude")
              (
                  {
                      remUnit: 75, //设计图大小
                      remPrecision: 2, //只转换到两位小数
                      exclude: /node_modules/i //插件不需要转rem
                  }
              )
          ]
      ),
    );
    

    修改flexible.js源文件

    function refreshRem(){
            var width = docEl.getBoundingClientRect().width;
            // 根据项目配置适配范围
            if (width / dpr < 1980) {
                width = 1980 * dpr;
            } else if (width / dpr > 5760) {
                width = 5760 * dpr;
            }
            // 原项目3840,设置成48等份。1rem等于80px
            var rem = width / 48;
            docEl.style.fontSize = rem + 'px';
            flexible.rem = win.rem = rem;
        }
    

    修改webpack中的rem转换配置remUnit:80

    1.1.4 安装并配置less
    npm install less less-loader -s
    

    React + typescript 配置别名

    1.在config-overrides.js中配置

    const { override, addWebpackAlias } = require('customize-cra');
    const path = require("path");
    
    module.exports = override(
      addWebpackAlias({
        '@' : path.resolve(__dirname, "./src"),
        '@components' : path.resolve(__dirname, "./src/components"),
        '@pages' : path.resolve(__dirname, "./src/pages"),
        '@utils' : path.resolve(__dirname, "./src/utils"),
        '@assets' : path.resolve(__dirname, "./src/assets"),
        '@app' : path.resolve(__dirname, "./src/app"),
      }),
    );
    

    2.创建tsconfig.extend.json文件

    {
      "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "@/*": ["src/*"],
          "@api/*": ["src/api/*"],
          "@app/*": ["src/app/*"],
          "@assets/*": ["src/assets/*"],
          "@components/*": ["src/components/*"],
          "@utils/*": ["src/utils/*"]
        }
      }
    }
    

    3.配置tsconfig.json

    {
    <!---->在此处增加extends选项
      "extends": "./tsconfig.extend.json",
      "compilerOptions": {
        "target": "es5",
        "lib": [
          "dom",
          "dom.iterable",
          "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
      },
      "include": [
        "src"
      ]
    }
    

    webpack配置原理

    override() 方法,是一个高阶函数,接受可变数量的参数,每个参数都是签名为 const fn = (oldConfig) => newConfig 的函数;同时会返回一个新的函数,这个函数的签名也是 const fn = (oldConfig) => newConfig。

    override() 会在内部依次调用传入的参数函数,把前一个函数返回的 newConfig 作为后一个函数的 oldConfig 参数,得到最终的 webpack config。

    function override(fns) {
      return function (oriConfig) {
        let finalConfig = oriConfig
        for (const fn of fns) {
          finalConfig = fn(finalConfig)
        }
        return finalConfig
      }
    }
    

    Create React App 入门及 webpack 配置
    customize-cra

    react处理网络请求——axios

    1. 创建并配置axios
    import axios from "axios";
    
    // 设置基础地址
    const devBaseUrl = "http://172.16.3.9:20101"
    // const proBaseUrl = ""
    
    // TODO: 正式部署的时候,要设置接口地址
    
    const publicIp = process.env.NODE_ENV === 'development' ? devBaseUrl : devBaseUrl;
    // const divisionCode = '510000_2_0001';
    
    const service = axios.create({
      // baseURL: process.env.BASE_URL,
      baseURL: publicIp,
      timeout: 12000
    })
    
    service.defaults.headers.post['Content-Type'] = 'application/json'
    // 请求拦截器
    service.interceptors.request.use(config => {
      let divisionCode = localStorage.getItem('divisionCode');
      config.params ={...config.params, ...{divisionCode}};
      return config;
    }, error => Promise.reject(error));
    
    // 响应拦截器
    service.interceptors.response.use(
      (response) => {
        if (response.status === 200) {     // 返回200,请求成功
          return Promise.resolve(response.data)
        } else {
          // message.error('响应超时')
          return Promise.reject(response.data.message)
        }
      },
      (error) => {
        // message.error('请求超时, 请刷新重试')
        return Promise.reject('请求超时, 请刷新重试')
      }
    )
    
    export default service
    
    1. 封装网络请求
    import service from './request';
    
    export const httpGet = (url: string, params?: any, config = {}) => {
      return new Promise((resolve, reject) => {
        service({
          method: 'get',
          url,
          params,
          ...config
        }).then(response => {
          resolve(response);
        }).catch(error => {
          reject(error);
        })
      })
    }
    
    export const httpPost = ((url: string, data?: any, config = {}) => {
      return new Promise((resolve, reject) => {
        service({
          method: 'post',
          url,
          data,
          ...config,
        }).then(response => {
          resolve(response);
        }).catch(error => {
          reject(error);
        })
      })
    })
    
    展开全文
  • 制作可视化大屏,最便捷有效的方式是使用DataV、帆软等报表工具,而本示例项目则使用ECharts自行开发。 项目案例 - 上市公司全景概览 地图数据可视化 - 基于ECharts Geo 3D图表展示 - 基于ECharts GL 热力图展示 - ...
  • 某省教育厅大屏项目案例.pptx
  • 可视化大屏项目适配 vue

    千次阅读 2021-11-18 10:59:22
    0. 新建 vue 项目项目目录如下 1. src / assets 文件下创建一个新的文件夹 css, css 文件夹下新建一个base.css文件用于定义全局样式 html, body, #app { padding: 0; margin: 0; height: 100%; min-width: ...
  • 这两年数据可视化大屏成为了各家公司的网红,老板动不动开口就要“酷炫大屏”,大屏的应用场景确实很多,不仅能实时监控重点...作为一个接触可视化大屏项目4年多的老技术,做了过大大小小十几个大屏项目,给大家科普一.
  • 大华中小型大屏项目解决方案.doc
  • 大屏项目,显示到电视上后,丢失部分内容 环境介绍 电视分辨率是 3840x2160 的,电脑 HDMI 线连接电视,将电视作为唯一的显示输出。 项目是大屏项目,作了基于 1920x1080 的缩放处理。 现象 现场将项目显示到电视上...
  • 淮北师范大学网络监控大屏项目.doc
  • 综合分析平台 大屏项目源码
  • 可视化大屏项目心得

    万次阅读 2021-05-16 11:23:50
    可视化面板介绍 ​ 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。...项目疑难 1.柱状图颜色渐变 seri
  • 淮北师范大学网络监控大屏项目.pdf
  • Smartchart是数据可视化,大屏,移动报表,WEB应用的微代码开发平台 简单, 敏捷, 高效, 通用化, 高度可定制化, 让你的项目瞬间档次提升 完全真正打通前后端, 支持图形数据联动,筛选,钻取, 支持几乎常见的...
  • AR互动大屏项目实战

    千次阅读 2019-06-22 13:36:30
    3恐龙博物馆项目需求.mp4 4项目设计.mp4 5资源需求(模型流程及外包标准).mp4 6模型动画导入(动画流程及外包标准).mp4 7项目场景搭建 (简易手段拍照并使用PS制作全景天空盒).mp4 8ARSDK操作(EasyAR的操作).mp4 9...
  • 现在需求要适配三块不同分辨率的大屏,是用自适应单位来写方便点还是写三套样式
  • 欢迎关注方志朋的博客,回复”666“获面试宝典大家好,今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目;# 简介这个是一个开源的一个BI平台,酷炫大屏展示,能随时随地掌控业务动态,...
  • vue大屏项目开发框架dataV

    千次阅读 2021-07-13 14:13:08
    在我们使用框架开发项目的时候,会发现各种不同种类的框架可以帮我们提高开发效率,比如我们的element,iview,mint-ui,vant等等,当然,大屏也是有框架的,就是我们要说的dataV. 官网地址:vue入口 react 入口 ...
  • 监控系统大屏项目解决方案.doc
  • 大屏项目做自适应

    千次阅读 2019-06-26 09:31:29
    通过缩放屏幕来达到自适应的效果,按照ui图实际大小来做 function resetScreenSize (dw, dh) { let init = ()=> { let _el = document.getElementById('app'); let hScale = window.innerHeight / (dh || ...
  • 大华中小型大屏项目解决方案.zip
  • 高德地图+echarts 大屏项目

    千次阅读 2021-03-07 18:47:35
    高德地图+echarts 马拉松大屏项目概述 概述 开发了一个高德地图视角实时更新的项目demo,先看视频效果 代码后续在补上来,最近忙~

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,906
精华内容 11,162
关键字:

大屏项目