Echarts的简单学习

学习介绍

学习需要这几个东西
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

引入：import 'lib-flexible/flexible'（在main.js）
https://segmentfault.com/a/1190000037430973

<template>
    <div id="app">
        <div class="a1"></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;
        }
    }
}

---

第三节 公共面板

创建一个class，名字叫做panel（快速记忆：潘饿了）
这个是公用的！所以不用插到哪个标签里。直接单独出来进行引入
还是那句话！字体响应式有问题就是lib-flexible的74行自己调

<div class="panel bar">
    <h2>柱形图</h2>
    <div class="chart">

    </div>
</div>

    .panel {
        height: 3.875rem;
        background: url(./assets/line.png);
        background-size: 100% 100%;
        padding: 0 0.1875rem 0.5rem;
        margin-bottom: 0.1875rem;
        position: relative;

        h2 {
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                color: #fff;
                font-size: 0.25rem;
                font-weight: 400;
        }

        .chart {
            height: 3rem;
            background-color: #42B983;
        }
    }

---

第四节 柱形图初体验

首先为大家介绍几个知名的可视化库
第一个：Echarts：百度的，简单易上手。
第二个：D3评分最高，但是上手难
第三个：Highcharts国外的库，
第四个：antV蚂蚁金服全新一代数据可视化，特别好看

---

第三个节 简单的说明

其实上节课就是把做的东西放到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: {...},