使用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
也可以掃一掃進羣