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

学习介绍

学习须要这几个方面，必须有这些根底能力学习这些
1.html,css,js
2.百度Echarts
3.Vue
官网地址：https://echarts.apache.org/examples/zh/index.html

装置以及初体验

装置：cnpm i echarts -S

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

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

<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(document.querySelector('.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>