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

95 阅读 0 评论 63 点赞

我是靠谱客的博主明理发箍，最近开发中收集的这篇文章主要介绍前端vue项目如何引入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>