vue2项目中使用echarts

• 首先下载依赖 npm install echarts
• 全局引入 在main.js中

import Vue from 'vue'
//全局引入echarts
import * as echarts from 'echarts';
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts

• 设定一个容器

<div style="width:300px;height:300px;" ref="echarts"></div>

• 在mounted生命周期中初始化echarts (因为这个生命周期钩子能访问到真实DOM)

mounted() {
    this.EchartsInit();
  },
  methods: {
    EchartsInit() {
      this.$echarts.init(this.$refs.echarts).setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      });
    },