使用vue做柱状echarts报表

最新推荐文章于 2025-03-18 23:46:59 发布

码农Movinbricks

最新推荐文章于 2025-03-18 23:46:59 发布

阅读量3.1k

点赞数 2

分类专栏： vue 文章标签：使用vue做柱状echarts报表

本文链接：https://blog.youkuaiyun.com/w1316022737/article/details/97792734

版权

本文介绍了如何使用Vue结合Echarts创建柱状报表。通过后端返回的数据，详细展示了从模板到脚本的实现步骤，包括在Vue组件中设置模板和脚本代码，以及在export default和获取数据的方法中进行的具体操作。最终，成功生成了柱状报表。

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

柱状报表
成果展示：

① 后端返回如下数据（female和male每个都有95个数据。从00:00开始每一刻钟对应一个数据）：
在这里插入图片描述
② 使用vue，在template标签中写如下代码

<div id="chartmainbar" style="width:1000px; height:600px; display:none"></div>

③ 在script标签中写如下代码

import echarts from 'echarts'

③ export default中如下

props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '80%'
    }
 }

data() {
  return {
    list: null,
    male: [],
    female: [],
  }
}

mounted() {
 this.drawLine1(this.male, this.female);
},

④ 在获取值的那个方法中加入如下：

this.drawLine1(this.male, this.female);

⑤ 加入如下方法：

drawLine1() {
 const chartmainbar = echarts.init(document.getElementById('chartmainbar'))
 chartmainbar.setOpti

最低0.47元/天解锁文章