Vue.js案例 —— 课程管理系统三（Echars组件实现图表展示数据）

一、Echars组件介绍

Echarts组件就是JavaScript的图表库。使用折线图、饼图、柱状图来展示页面数据。

使用Echarts插件

1、安装

npm install echarts --save

2、使用

1. 引入echarts插件

   import echarts from 'echarts'
   

2. 提供一个具备大小的容器（div）

   <div id="main" style="width: 600px;height:400px;"></div>
   

3. 初始化echarts实例

   echarts.init()
   

4. 指定图表的配置项和数据，必须是：对象

   var option = {
        
   	 title: {
        
   	     text: '第一个 ECharts 实例'
   	 },
   	 tooltip: {
        },
   	 legend: {
        
   	     data:['销量']
   	 },
   	 xAxis: {
        
   	     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
   	 },
   	 yAxis: {
        },
   	 series: [{
        
   	     name: '销量',
   	     type: 'bar',
   	     data: [5, 20, 36, 10, 10, 20]
   	 }]
   };
   

5. 使用刚指定的配置项和数据显示图表。

   echart.setOption(this.option)
   

二、装一个Echarts组件处理数据展示图表

通过实例，饼图和折线图、柱状图有一点区别。主要在参数和数据绑定上。饼图并没有X和Y轴的坐标。
xAxis: X轴
yAxis: Y轴
series: 系列列表。 每一个系列通过type来决定自己的类型

封装echarts组件
观察官网文档： 考虑组件需要的基本参数，
参数筛选：分为父组件传递的参数和自身的参数
完善组件样式： 找实例中的配置项，或者文档中对应的配置项，优化组件样式
细节优化，图表的自适应处理。

<template>
	  <!-- 为ECharts准备一个具备大小（宽高）的Dom 
		  ref添加属性元素，
	  -->