Vue中Echarts使用---条形图

最新推荐文章于 2025-03-14 08:30:00 发布

Best_北诗

最新推荐文章于 2025-03-14 08:30:00 发布

阅读量452

点赞数

文章标签： vue.js echarts javascript

本文链接：https://blog.youkuaiyun.com/m0_48607837/article/details/131984024

版权

文章展示了如何在HTML中设置图表容器，并用JS（Vue）结合Echarts库创建一个条形图。数据获取通过`gradeMonth`函数，然后在`getchartStrip`方法中初始化并设置Echarts选项，包括tooltip、x轴、y轴以及系列数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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()
    },
  }