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

原创已于 2022-02-16 13:25:19 修改 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js #前端

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

echarts 专栏收录该内容

4 篇文章

订阅专栏

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

首先全局安装依赖

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>