當前位置:編程學習大全網 - 編程軟體 - 在vue項目中使用echarts制作3d柱狀圖

在vue項目中使用echarts制作3d柱狀圖

在上壹篇文章我們講到構建項目,這篇文章,我們就來講解壹下,在vue項目中使用echarts制作3d柱狀圖。

還請看我娓娓寫來。

1、第壹步當然還是進入妳所在項目的文件夾。

2、第二步使用npm安裝妳所需要用到的組件,

》使用以下命令安裝echarts組件

npm install echarts

》安裝好echarts後,還需要安裝echarts3d圖形所需的組件,echarts-gl。使用以下命令安裝即可。假設妳不需要制作3D的圖表,則不需要安裝。

npm install echarts-gl

安裝好了之後,妳就可以在妳的node_modules文件夾內找到echarts和echart-gl文件夾了。

而且在妳的package.json文件裏面也可以找到這個配置

那麽echarts和我們需要的echarts-gl就安裝好了,現在開始寫demo啦

3.我們需要在頁面的script中引用

4.寫壹個div裝echarts實例吧。

5、給這個實例設置壹個css樣式,給它設置寬高,這壹步很重要

6、實例出壹個柱狀圖吧。

妳可以寫壹個方法調用,妳這個實例的方法,然後就可以看到效果了。具體的設置建議看echarts官網的這個GL的屬性說明。

貼上最後的效果圖:

好了,今天的文章就告壹段落,如果您有好的建議,請在下方留言。歡迎訂閱我們哦~

  • 上一篇:summer英文怎麽讀
  • 下一篇:疫情期間如何開展創客教育課程
  • copyright 2024編程學習大全網