安裝

npminstallecharts

引入

import * as echarts from "echarts";
export default {
  data() {
    return {
      dataX: [],
      dataY: [],
    };
  },
  created() {},
  methods: {
    setEcharts(option) {
      this.myChart.setOption(option);
      this.myChart1.setOption(option);
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("
 
main"));
     this.myChart1 = echarts.init(document.getElementById("main1"));
    setTimeout(() => {
      //模擬的資料請求
      this.dataX = ["leson", "lili", "lulu"];
      this.dataY = [5, 20, 36];
      var option = {
        title: {
          text: "2106班缺勤資料",
        },
        tooltip: {},
        xAxis: {
          data: 
 
this.dataX,
        },
        yAxis: {},
        series: [
          {
            name: "次數",
            type: "bar",
            barWidth: 5,
            data: this.dataY,
          },
        ],
      };
      this.setEcharts(option);
      // 使用剛指定的配置項和資料顯示圖表。
    }, 2000);
    // 指定圖表的配置項和資料
  },
};