在Vue中使用Echart圖表庫。【全網最簡單】

使用npm安裝echart

npm install echarts --save

然後在使用的頁面上直接import

import echarts from "echarts";

在頁面放一個圖表渲染的容器

<div id="chart1" style="width:100%;height:376px;background:#fff"></div>

在頁面mounted方法中，找個這個id，然後初始化。

this.teacherChart = echarts.init(document.getElementById("chart1"));

然後配置圖表要顯示的內容

 this.teacherChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {}
          }
        ]
      });

刷新瀏覽器，就顯示出來圖表了。

 

 一個月前我還是Angular粉，現在覺得Vue真香

---

 

有問題歡迎加入QQ羣一起討論 羣號: 545594312

也可以掃一掃進羣