vue中使用echart绘制柱状图、折现图、饼状图

echarts有几个主要的字段，title、legend、xAxis、 yAxis、tooltip、series。

title

图表的标题

legend

用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图。

xAxis

配置x轴数据、样式、名称

 yAxis

配置y轴数据、样式、名称

tooltip

鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)

series

y轴数据，设置每个数据的名称、样式

1.柱状图

(后续补充：series中data为负，柱状图为负）

<div class="echart" id="byrsBar" :style="{ float: 'left', width: '80%', height: '400px'  }"></div>

mounted () {
this.getByrsEcharts()
}

methods: {
 // 毕业人数
 getByrsEcharts () {
   const option = {
     // 标题
     title: {
       text: '毕业人数柱状图'
     },
    // 鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)
     tooltip: {},
    // 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图
     legend: {
       data: ['毕业人数']
     },
     // 配置x轴数据、样式、名称
     xAxi