vue使用echarts插件画柱状图，并实现两个柱状图的切换

需求：页面中有两个柱状图，通过局部导航切换查看
思路：
1、先实现柱状图基本的样式效果
2、创建两个子路由，将两个条形图分别放进子路由中
3、通过在页面切换子路由

一、参考的别人的代码

https://blog.csdn.net/Cynthia_Yue27/article/details/81434493

别人的效果图

二、我的代码

安装以及在main.js引入

npm install echarts -S
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

html部分

<div id="main" style="width: 100%;height:6.5rem"></div>

js数部分（写在mounted中，或抽象出函数在mounted中调用）

 var myChart = this.$echarts.init(document.getElementById('main'))
  var option = {
   
    xAxis: {
   // x轴
      type: 'category',
      data: ['关注', '邀请', '发布', '刷新'], // x轴的数据
      splitLine: {
   show: false}, // 去除网格分割线
      axisLine: {
   // 坐标线
        lineStyle: {
   width: '0'}
      },
      axisTick: {
   show: false}, // 不显示刻度线
      axisLabel: {
   
        textStyle: {
   color: 'black', fontSize: 16} // 坐标值的具体的颜色
      },
      splitLine: {
   show: false}// 去掉分割线
    },
    backgroundColor: 'rgba(255, 255, 255, 0)', // 背景色
    yAxis: {
   
      // name: '单位：次', // 轴的名字，默认位置在y轴上方显示
      max