乐趣区

关于可视化:Echarts的简单学习

jiezi

学习介绍

学习须要这几个货色
1.flexible.js
2.rem
3.css 中的 flex 布局
4.less
5. 百度的 echarts 官网地址：

起步 装置以及初体验

装置：cnpm i echarts -S

而后:
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在 main.js 中引入
prototype 用了这个，当前任意页面间接 this.$echarts 就行了

这里留神的事，肯定要用 lib-flexible 才行！不然上来 rem 调节半天挑不进去。

https://segmentfault.com/a/1190000037430973

<template>
    <div id="app">
        <div class="a1" style="height: 500px; width: 400px;"></div>
    </div>
</template>


<script>
  export default {data() {...},
      mounted() { this.ck() }  // 进来就显示
      methods: {ck() {var a = this.$echarts.init(this.$refs.a1);
                      
                    var b = {
                         xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                            type:'category'
                         },
                         yAxis: {type:'value'},
                         series: [{
                            type: 'bar',
                            data: [99, 20, 36, 10, 10, 20]
                         }]
                      };

                      // a 显示 b 做好的货色
                      a.setOption(b);
        }
      }
  }
</script>

第一节 创立顶部

第一步：设置一个顶部，增加两个！一个大题目，一个工夫

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

<script>
    import newTime from "./components/showTime.vue"
    export default{data(){return{...}
        },
        components:{newTime}
    }
</script>


<template>
    <div class="showtime">
        {{times | filtime}}
    </div>
</template>

<script>
    export default {data() {
            return {times: ""}
        },
        methods: {showTime() {setInterval(() => {this.times = new Date()
                }, 1000)
            }
        },
        filters: {filtime() {var dt = new Date()
                var y = dt.getFullYear()
                var x = dt.getMonth() + 1
                var r = dt.getDate()
                var s = dt.getHours()
                var f = dt.getMinutes()
                var m = dt.getSeconds()

                function xTime(i) {if (i < 10) {return "0" + i}
                    return i
                }

                s = xTime(s)
                f = xTime(f)
                m = xTime(m)


                return `${y}-${x}-${r} / ${s}:${f}:${m}`
            }
        },
        mounted() {this.showTime()
        }
    }
</script>

<style>
    .showtime {
        position: absolute;
        right: 0.375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: #fff;
        top: 0;
        color: #fff;    
    }
</style>

第二节 整体盒子散布

就是把下方残余的作为盒子！而后分为三部，两边的为 3！两头的为 5 

<section class="main-box">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
</section>
.main-box{
    min-width: 1024px;
    max-width: 1920px;
    height: 300px;
    background: #fff;
    padding: 0.125rem 0.125rem;
    display: flex;
    .column{
        flex: 3;
        &:nth-child(2){
            flex:5;
            background: #000;
            color: #000000;
        }
    }
}

第二节 简略的阐明

其实上节课就是把做的货色放到 a，而 b 的外面货色却不明确

首先是
var a = this.$echarts.init(this.$refs.a1);
a 外面装着 以后 echarts 的货色放到（获取你的 ref）

var b = {xAxis: {},
    yAxis: {},
    series: []};

b 外面问了一句横轴怎么啊，纵轴怎么啊，你要哪种效果图啊！饼状图还是树状图啊还是 ……..

最初 a 的外面装着选好的内容
a.setOption(b)
mounted 加载后主动查看 ck 这个事件

第三节 通用配置

第一个 就是效果图的题目，如果你感觉多余，那就用 css。如果懒得做，那就用这一句话来形容，而后帮你创立（外面有加粗边框等）

title:
{
    text:'宇宙最帅',
    top:0,
    left:300 
},
xAxis: {...},
yAxis: {...},

退出移动版