关于可视化: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>