如何在 Vue 项目中使用 ECharts

最新推荐文章于 2025-05-22 17:38:23 发布

原创最新推荐文章于 2025-05-22 17:38:23 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ECharts

Vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

ECharts

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并使用Echarts绘制折线图，并提供了完整的代码实例，包括配置项说明及样式设置。

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

先看效果：

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折线图属性设置大全