Vue中使用echarts

@[Hgiao] (Vue中使用echarts )

第一步：目錄下使用命令列，初始化工程的 npm 環境並安裝 echarts（這裡前提是您已經安裝了 npm）：

//npm
 npm install echarts --save

第二步：Html

// html
<template>
  <div  style="width: 600px; height: 400px">
    <div ref="tu" style="width: 600px; height: 400px"></div>
  </div>
</template>`

第三步：scipt

//
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      options: [],
    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      echarts.init(this.$refs.tu).setOption(
      //以下內容可以在https://echarts.apache.org/examples/zh/index.html
      //裡面選取你想要的型別，貼上即可
      {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
          },
        ],
      }
      
      );
    },
  },
};
</script>