Installation and use of Echarts in Vue2

• Installation: cnpm install echarts --save
• Use: introduced in main.js

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

Usage details

<template>
  <div>
    <Header></Header>
    <!-- 准备具有宽高的容器 -->
    <div id="chart" style="width: 600px; height: 400px" ref="chart"></div>
    <!-- 销量 -->
    <div id="chart2" style="width: 600px; height: 400px" ref="chart2"></div>
  </div>
</template>

<script>
import Header from "../../components/header/header.vue";
//引入数据
import option1 from "./sales.js"
import option2 from "./sales2.js"
export default {
  components: { Header },
  name: "echarts01",
  data() {
    return {
      chart: null,
    };
  }, //图表实例
  mounted() {
    this.init();
    this.init2();
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  methods: {
    init() {
      console.log(this.$Echarts);
      //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart);
      this.chart.setOption(option1);
    },
    init2(){
        //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart2);
      this.chart.setOption(option2);
    }
  },
};
</script>

<style></style>

sale.js

const option2 = {
  title: {
    text: "销售情况",
    left: 0,
  },
  xAxis: {
    type: "category",
    data: ["产品1", "产品2", "产品3", "产品4", "产品5", "产品6", "产品7"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
    },
  ],
};

export default option2;