前端vue项目如何引入echarts简单案例基本使用

MFG_666

已于 2022-02-16 13:25:19 修改

阅读量1.1k

点赞数

分类专栏： echarts 文章标签： echarts vue.js 前端

于 2022-02-16 13:24:25 首次发布

本文链接：https://blog.csdn.net/m0_49714202/article/details/122960410

版权

echarts 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue应用中集成ECharts，通过两种方式演示了如何在页面上创建和配置图表，包括直接使用echarts初始化和通过$echarts组件调用。适合前端开发者快速上手ECharts图表显示。

摘要由CSDN通过智能技术生成

首先全局安装依赖

npm install echarts --save

其次echarts引入到main.js中

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

第一种:直接用echarts

1.需要的页面引入echarts

import * as echarts from "echarts";

echarts.init()直接用

页面

<template>
  <div class="home">
    <div id="main" style="width: 800px; height: 410px"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("main"));
    var   option = {
      xAxis: {
        type: "category",
        data: ["A", "B", "C"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150],
          type: "line",
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>

第二种:直接this.$echarts

var myChart = this.$echarts.init(document.getElementById("main"));

页面:

<template>
  <div class="home">
    <div id="main" style="width: 800px; height: 410px"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("main"));
    var   option = {
      xAxis: {
        type: "category",
        data: ["A", "B", "C"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150],
          type: "line",
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>