echarts-柱状图--vue

柱状图效果： 

<div class="echart">
    <div id="chartmainbar"></div>
</div>

optionbar:{
          color: ['#0079FE'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisTick: {
                      alignWithLabel: true
                  },
                  axisTick: {           //去掉坐标轴刻线
                    show: false
                  },
                  axisLabel:{                 //---坐标轴 标签
                    show:true,                  //---是否显示
                    inside:false,               //---是否朝内
                    rotate:0,                   //---旋转角度  
                    margin: 5,                  //---刻度标签与轴线之间的距离
                    color:'#6B6B6B',              //---默认取轴线的颜色
                  },
                  axisLine:{                  //---坐标轴 轴线
                    show:true,                  //---是否显示
                    lineStyle:{
                        color:'#F6F6F6',
                        width:1,
                        type:'solid',
                    },
                  },
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  axisTick: {           //去掉坐标轴刻线
                    show: false
                  },
                  splitLine: {
                      show: true,
                      lineStyle:{
                        color: ['#F6F6F6'],
                        width: 1,
                        type: 'solid'
                    }
              　　},
                  axisLabel:{                 //---坐标轴 标签
                    show:true,                  //---是否显示
                    inside:false,               //---是否朝内
                    rotate:0,                   //---旋转角度  
                    margin: 5,                  //---刻度标签与轴线之间的距离
                    color:'#6B6B6B',              //---默认取轴线的颜色
                  },
                  axisLine:{                  //---坐标轴 轴线
                    show:false,                  //---是否显示
                  },

              }
          ],
          series: [
              {
                  name: '直接访问',
                  type: 'bar',
                  barWidth: '60%',
                  data: [10, 52, 200, 334, 390, 330, 220]
              }
          ]
        }

适配： 

methods:{
   drawLine: function(){
        //基于准本好的DOM，初始化echarts实例
        let chartmainbar = this.$echarts.init(document.getElementById("chartmainbar"));

        //绘制图表
        chartmainbar.setOption(this.optionbar);

    },
  },
  mounted(){
    this.drawLine()
        this.resizeEcharts = () => {
          this.$echarts.init(document.getElementById("chartmainbar")).resize();
        }
        window.addEventListener("resize", this.resizeEcharts);
  },

.echart{
      margin: 0 auto;
       #chartmainbar{
        width: 90%!important;
        height:230px!important;
        margin: 0 auto;
        margin-bottom: 10px;
      }
    }