如何在 Vue 项目中使用 ECharts

关注

原创最新推荐文章于 2025-06-25 21:28:02 发布 560 阅读 AI 写同款· GEO 优化 ›

如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云在 Vue 搭建的后台管理工具里添加炫酷的图表，是所有数据展示类后台必备的功能，本教程手把手教大家如何在 Vue 中加入 Echarts ，一个基于 JavaScript 的开源可视化图表库，Echarts 涵盖了常见的数据图表类型。当然，如果你对前端不是很熟悉，又想快速搭建数据图表看板，那么推荐使用卡拉云，卡拉云是新一代低代码卡发工具，无需懂任何前端技术，仅需拖拽即可快速生成「数据图表」，1 分钟搭建属于你自己的数据图表展示管理后台。详见本文文末。阅读详情

先看效果：

1. 安装Echats

npm install echarts --save

2. 项目入口文件main.js中引入Echarts

// 引入echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

例子：

<template>
  <div id="personDetail" ref="personDetail"></div>
</template>
<script>
export default {
  mounted(){

    let myChart = this.$echarts.init(this.$refs.personDetail);
    let option = {
      title: {
        // text: "折线图堆叠",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["步数", "卡路里", "距离"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "步数",
          type: "line",
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "卡路里",
          type: "line",
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "距离",
          type: "line",
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
        }
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#personDetail {
  height: 528px;
}
</style>

Echarts折线图属性设置大全：

Echarts折线图属性设置大全