vue echarts 绘制柱形图

1.下载echarts插件
2.main.js引入
import * as echarts from ‘echarts’
Vue.prototype.$echarts = echarts
3.创建放柱状图的组件

<template>
    <!--负载情况-->
    <div :style="{ padding: '0 0 15px 15px',borderBottom:'25px solid #f0f2f5' }">
        <div ref="echartestOne"  :style="{width:'100%',height:'700px'}" >
        </div>
    </div>
</template>
 
<script>
  import echarts from 'echarts'
    export default {
      name: "NodeIndexDialog",
      props: {
        data:{
          type: Array,
        },
        datax:{
          type: Array,
        },
        datay:{
          type: Array,
        },
      },
      data(){
        return {
        
        }
      },
      mounted(){
        console.log('mounted()');
          this.$nextTick(function () {
             this.drawLine();
          });
 
      },
      methods:{
       drawLine(){
         let myChart = echarts.init(this.$refs.echartestOne);
         let option = {
            tooltip: {
              trigger:'axis',
              axisPointer:{            // 坐标轴指示器，坐标轴触发有效
                type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left:'3%',
              right:'4%',
              bottom:'3%',
              containLabel: true
            },
				    xAxis: {
				        type: 'category',
				        data: this.datax,
                axisLabel:{
                  interval:0,  //设置这里
                  formatter:function(value){
                    return value.split("").join("\n")
                  },
                  textStyle:{
                    fontSize:14,
                  }
                },
				    },
				    yAxis: {
				      type: 'value'
				    },
				    series: [{
				      data: this.datay,
				      type: 'bar',
				      itemStyle:{
                normal:{
                  color:'#1890ff'
                }
              },
              barWidth:'35',			//---柱形宽度
              barCategoryGap:'20%',		//---柱形间距
				    }]
				};
				myChart.setOption(option);
        //让图表自适应
        window.addEventListener("resize",function(){
          myChart.resize()  // myChart 是实例对象
        })
       },
     
      }
    }
</script>
 
<style scoped>
 
</style>