echarts 基本使用

2021-06-24 11:29:57 字數 797 閱讀 5727

最近專案中要做圖形報表,要求使用echarts實現,圖形報表有很多中實現之前也接觸過,但echarts還是頭一次聽說,正好可以趁這個機會好好學習一下它。

之前不知道就不知道啦,現在知道了就了不得了,一下子喜歡上了echarts,今後專案中要是讓做報表我肯定首選echarts在沒有強制要求的前提下。主要是echarts太完美了:1,開源軟體,無私的為我們提供漂亮的圖形介面;2,使用簡單,默默的為我們封裝了重要的js,只要會引用就會使用echarts;3,種類多,echarts為我們提供了各種圖示,其中最具象徵的就是地圖了;4,相容性好,基於html5動畫渲染超棒。

官網上的demo中夾雜著很多我們用不到的東西,想使用餅狀圖就得從demo中把不用的去掉,劈植斬葉留下最原始的功能實現。這樣畢竟比較費時,我就在裁剪後的**中加以總結於是乎新的使用教程如下所示:

echarts餅狀圖實現步驟:

1,在簡單的html中引入js檔案

2,為圖形準備容器

就是在html中新增乙個div給定id,圖表就會顯示在div中。

3,模組匯入js

4,新增顯示資料

5,執行程式顯示結果

以上是餅狀圖的實現步驟,柱狀圖散點圖跟這個類似就是引用js時餅狀圖是pie,柱狀圖是bar,對應的option裡面的資料不同,程式的架子是一樣的。。

echarts基本使用

官網 參考 安裝 cnpm install echarts s全域性引入 引入echarts import echarts from echarts vue.prototype.echarts echarts使用 export default methods tooltip xaxis yaxis ...

關於ECharts框架的基本使用

第三部建立乙個容器,設定寬高並且設定屬性。實際 var mychart echarts.init document.getelementbyid main 指定圖表的配置項和資料 var option tooltip xaxis yaxis 資料 series 線的顏色和小圓圈的顏色 itemsty...

ECHARTS基本用法

echarts的特性如下 好了,下面直接上使用 1.先引入echarts.min.js檔案。2.定義乙個容器div,存放圖表 注意 要設定id 容器的寬 高 3.初始化echarts例項物件 var mychart echarts.init document.getelementbyid main ...