前言
公司要求完成一個簡單的報表系統(tǒng)，因此我使用的是比較多人使用的eCharts灶轰，然后在vue的打包項目中使用羡洁，最終實現(xiàn)柱狀圖、折線圖和餅狀圖的顯示苛蒲。該文章中所講的是在vue中導(dǎo)入和使用eCharts卤橄，所講的內(nèi)容也皆為淺顯易懂的內(nèi)容，盡管不涉及特別新或者特別復(fù)雜的內(nèi)容臂外，但是適合需求的項目才是好項目窟扑，因而簡單基礎(chǔ)的內(nèi)容更應(yīng)該被提及喇颁。
完成后的效果圖
準備工作：
安裝依賴：
? ? jquery依賴：npm install jquery -s
? ? echarts依賴：npm install echarts -s
查看ECharts的demo代碼：
本文章以圖二柱狀圖作為例子：
? ? ????忽略第一行代碼。我們可以看到整個代碼中只有一個option的json數(shù)據(jù)嚎货，里面包含了數(shù)據(jù)橘霎、樣式和內(nèi)容顯示選項選擇等。那么殖属，接下來我們開始編寫代碼姐叁。
編寫代碼：
1.引入echarts對象：
? ? 鑒于準備工作中已經(jīng)通過npm安裝了echarts依賴，所以可以直接在vue文件中使用代碼import echarts from “echarts”引入echarts對象洗显，如圖：
2.創(chuàng)建一個DOM對象外潜，將echarts對象在該DOM對象上實例化：
????創(chuàng)建一個div，通過ref來給該div注冊引用信息（即給該div元素賦予一個索引名稱挠唆，然后可以通過該索引名稱訪問該元素）处窥，如圖：
? ? 在script中創(chuàng)建初始化函數(shù)initChart（自定義名稱），用于在元素上實例化echarts對象损搬，將echarts對象在該div元素上顯示碧库，使用的是echarts中的函數(shù)方法init，如圖：
? ? 然后this.chart就是實例化后的echarts對象巧勤，使用setOption方法修改該組件中變量嵌灰，選擇自己需要顯示的數(shù)據(jù)和樣式，如圖：
