学习介绍

学习须要这几个货色
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: {...},