使用vue做柱状echarts报表

最新推荐文章于 2025-07-10 20:06:27 发布

原创

最新推荐文章于 2025-07-10 20:06:27 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#使用vue做柱状echarts报表

本文介绍了如何使用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: [],
  }
}