学习总结3.15

<template>

<div>

<header>

    <h1>数据可视化 </h1>

    </header>

    <section class="container">

        <section class="itemLeft">

                <ItemPage> 

                     <ItemOne/> 

                </ItemPage >

                <ItemPage> 

                    <ItemTwo/> 

                </ItemPage >

        </section>

        <section class="itemCenter">

            <h2>地图展示</h2>

             </section>

        <section class="itemRight">

             <ItemPage> 

                 <ItemThree/> 

             </ItemPage >

             <ItemPage> 

                <ItemFour/>

             </ItemPage >

        </section>

    </section>

    </div> 

    </template>

    <script >

          import ItemPage from "@/components/itemPage.vue"

 

 

        import ItemOne from "@/components/itemOne.vue"

         import ItemTwo from "@/components/itemTwo.vue"

         import ItemThree from "/src/components/itmeThree.vue"

         import ItemFour from "@/components/itemFour.vue"

    

        import {inject} from "vue"

        export default{

            components:{

                 ItemPage,ItemOne,ItemTwo,ItemThree,ItemFour

            },

            setup(){

                let $echarts=inject("echarts")

                 let $http=inject("axios")

                console.log($echarts)

                 console.log($axios)

            }

          

     }

 

    </script>

 <style lang="less" >

          header{

            height: 1rem;

            width: 100%;

            background-color: rgba(0,0,255,.2) ;

            h1{

                 font-size: 0.375 rem;

                 color:#fff;

                 text-align: center;

                  line-height:1rem;

            }

        }

        .container{

            min-width: 1200px;

            max-width: 2048px;

            margin: 0 auto;

            padding: 0.125rem 0.125rem 0;

            background-color: rgba(0,1,255,0.1);

            display: flex;

            .itemLeft,.itemRight{