ECHARTS基本用法

2021-07-30 10:51:40 字數 1015 閱讀 8834

echarts的特性如下:

好了,下面直接上使用**

1.先引入echarts.min.js檔案。

2.定義乙個容器div,存放圖表

注意:要設定id、容器的寬、高

3.初始化echarts例項物件

var mychart = echarts.init(document.getelementbyid('main'));
4.指定圖表的配置項和資料,即設定option

var option = ,

tooltip: {},

legend: ,

xaxis: ,

yaxis: {},

series:

};

5.使用剛指定的配置項和資料顯示圖表

mychart.setoption(option);
這樣乙個柱狀圖就出來了

如果要換成折線圖,將series中的type換成line

這樣折線圖就出來了。

在如果要換成餅狀圖的話,x和y軸就不需要了,不過依舊要換series中的type:pie;

當然,到這還沒有完,還要變data的資料

data:[,,,,,]
ok,餅狀圖出來嘍。

是不是感覺echarts很方便呢?不過它確實很方便,只不過這都是最基本,最簡單的。以後慢慢加深吧,期待吧!!

echarts 基本使用

最近專案中要做圖形報表,要求使用echarts實現,圖形報表有很多中實現之前也接觸過,但echarts還是頭一次聽說,正好可以趁這個機會好好學習一下它。之前不知道就不知道啦,現在知道了就了不得了,一下子喜歡上了echarts,今後專案中要是讓做報表我肯定首選echarts在沒有強制要求的前提下。主要...

echarts基本使用

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

echarts的基本配置

option 生成的和頂部的間距 grid 圖例 legend b formatter function name any 提示框 tooltip formatter function params axispointer global false 預設為 false x軸 xaxis axisla...