Vue中Echarts使用---条形图

HTML代码

  <div id="chartStrip" style="width: 100%;height:250px;"></div>复制

JS代码

data() {
    return {
      stripMonth:[]
    }
  },
created() {
    this.getstrip()
  },
  mounted() {
    this.getstrip()
  },
  methods: {
	getchartStrip(){
      this.chartStrip = this.$echarts.init(document.getElementById("chartStrip"));
      this.chartStrip.setOption({
        // 鼠标经过展示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#eb5b55'],
        xAxis: {
          type: 'value'
        },
        // 位置
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        // y轴数据
        yAxis: {
          type: 'category',
          data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
          // data:this.getYData
        },
        series: [
          {
            type: 'bar',
            stack: '总量',
            label: {
              // show: true,
              position: 'inside'
            },
            // 数据
            data: ['20', '10', '15', '18', '5', '22']
            // data: this.getXData
          },
        ]
      });
    },
    getstrip(){
      gradeMonth().then(response=>{
        console.log('response====>',response)
        this.stripMonth = response.data.data
        var getXData = [];
        var getYData = [];
        //先进行赋值
        this.stripMonth.trendList.borrowCount = getXData
        this.stripMonth.trendList.gradeName = getYData
        console.log('this.stripMonth.trendList.borrowCount===>',this.stripMonth.trendList.borrowCount)
      })
    },
    // 初始化echarts
    drawCharts() {
      this.drawPieChart();
      this.getchartStrip()
    },
  }复制