我是靠谱客的博主 明理发箍,这篇文章主要介绍前端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";
  1. 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>

最后

以上就是明理发箍最近收集整理的关于前端vue项目如何引入echarts简单案例基本使用的全部内容,更多相关前端vue项目如何引入echarts简单案例基本使用内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(52)

评论列表共有 0 条评论

立即
投稿
返回
顶部