ECharts開源來自百度商業前端數據可視化團隊,基於html5Canvas,是壹個純Javascript圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。ECharts(EnterpriseCharts商業產品圖表庫)提供商業產品常用圖表,底層基於ZRender(壹個全新的輕量級canvas類庫),創建了坐標系,圖例,提示,工具箱等基礎組件,並在此上構建出折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、餅圖(環形圖)、K線圖、地圖、力導向布局圖以及和弦圖,同時支持任意維度的堆積和多圖表混合展現。
如何用Echarts制作標準折線圖我們經常使用Echarts制作各種圖表,那麽如何運用Echarts制作標準折線圖呢?下面我給大家演示壹下。
01
首先打開SublimeText軟件,新建壹個HTML文檔,並在文檔中添加如下圖所示的HTML結構
02
接下來運用scripts標簽在HTML中引入echarts的庫文件,如下圖所示
03
然後我們在body標簽中創建壹個div區域用來存放折線圖,如下圖所示,註意給div設置高度
04
接下來我們通過echarts的init方法對剛才創建的div區域進行初始化,如下圖所示
05
然後我們設置折線圖的參數,包括X,Y坐標軸數據,折線圖標題等信息,如下圖所示
06
接下來在series參數中設置折線圖所需要的數據,如下圖所示,壹條折線配置壹個大括號
07
參數和數據設置完畢以後我們調用echarts的setOption方法將內容都填充進折線圖展示區域,如下圖所示
08
最後我們運行HTML文件,就可以看到如下圖所示的標準折線圖了,點擊頂部的折線標題可以隱藏或者顯示折線
2020-06-30Echarts折線圖顯示最大值最小值最值markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
最值虛線markLine:{
data:[
{type:'average',name:'
平均值
'},
{type:'max',name:'最大值'},
]
}
動態添加