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...