在上一篇文章我們講到構(gòu)建項目量瓜,這篇文章打毛,我們就來講解一下柿赊,在vue項目中使用echarts制作3d柱狀圖俩功。
還請看我娓娓寫來幻枉。
1、第一步當然還是進入你所在項目的文件夾诡蜓。
2熬甫、第二步使用npm安裝你所需要用到的組件,
》使用以下命令安裝echarts組件
npm install echarts
》安裝好echarts后蔓罚,還需要安裝echarts3d圖形所需的組件椿肩,echarts-gl。使用以下命令安裝即可豺谈。假設你不需要制作3D的圖表郑象,則不需要安裝。
npm install echarts-gl
安裝好了之后茬末,你就可以在你的node_modules文件夾內(nèi)找到echarts和echart-gl文件夾了厂榛。
組件文件夾
而且在你的package.json文件里面也可以找到這個配置
package.json
那么echarts和我們需要的echarts-gl就安裝好了盖矫,現(xiàn)在開始寫demo啦
3.我們需要在頁面的script中引用
引入相關依賴
4.寫一個div裝echarts實例吧。
寫一個dom元素裝echarts實例
5击奶、給這個實例設置一個css樣式辈双,給它設置寬高,這一步很重要
6柜砾、實例出一個柱狀圖吧湃望。
實例一個echarts
你可以寫一個方法調(diào)用,你這個實例的方法痰驱,然后就可以看到效果了证芭。具體的設置建議看echarts官網(wǎng)的這個GL的屬性說明。
貼上最后的效果圖:
效果圖
好了担映,今天的文章就告一段落檩帐,如果您有好的建議,請在下方留言另萤。歡迎訂閱我們哦~