ECHARTS的基本使用:柱狀圖、折線圖、餅圖等
Echarts 是由百度團隊打造的一款純 Javascript 的圖表庫,官網下載路徑如下:
Echarts的特性:
豐富的圖表型別:
常用的有折線圖,柱狀圖,散點圖,餅圖,盒形圖,用於地理資料視覺化的地圖,熱力圖,線圖等多個座標系的支援
直角座標系(catesian,同 grid)、極座標系(polar)、地理座標系(geo)移動端的優化
按需打包,體積縮小為 ECharts 2 的 40%深度的互動式資料探索
支援在資料的各種座標軸、維度進行資料過濾、縮放,以及在更多的圖中採用這些元件
使用Echarts:
1、引入echarts.min.js, 這個檔案是需要官網下載的。469KB左右
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 檔案 -->
<script src="echarts.min.js"></script>
</header>
</html>
2、定義一個div容器,用於存放你的圖表,要設定ID。
<div id="cjj" style="width: 800px;height:800px;"></div>
3、初始化echarts例項
var myChart = echarts.init(document.getElementById('cjj'));
4、指定圖表的配置項和資料,即設定option
a)title:標題元件
b)tooltip:提示框元件
c)legend:圖例元件,展現了不同系列的標記(symbol),顏色和名字
d)xAxis:直角座標系 grid 中的 x 軸,單個 grid 元件最多隻能放上下兩個 x 軸。
e)yAxis:直角座標系 grid 中的 y 軸,單個 grid 元件最多隻能放左右兩個 y 軸。
f)series:系列列表。每個系列通過 type 決定自己的圖表型別。
series[i]-line ——-折線圖
series[i]-bar ——-柱狀圖
series[i]-pie ——-餅圖
series[i]-scatter—–散點圖
series[i]-effectScatter—-帶有漣漪特效動畫的散點(氣泡)圖
series[i]-radar——雷達圖
series[i]-treemap—Treemap 是一種常見的表達『層級資料』『樹狀資料』的視覺化形式。
series[i]-boxplot—-Boxplot 中文可以稱為『箱形圖』、『盒須圖』、『盒式圖』、『盒狀圖』、『箱線圖』
series[i]-candlestick —Candlestick 即我們常說的 K線圖
series[i]-heatmap—–熱力圖
series[i]-map—-地圖主要用於地理區域資料的視覺化,配合 visualMap 元件用於展示不同區域的人口分佈密度等資料。
series[i]-parallel—–平行座標系的系列。
series[i]-lines——–線圖
series[i]-graph——-關係圖
series[i]-gauge——-儀表盤
var option = {
title: {
text: 'ECharts 簡單柱狀圖'
},
tooltip: {},
legend: {
data:['粉絲數']
},
xAxis: {
data: ["安迪","樊勝美","關關","曲筱筱","邱瑩瑩"]
},
yAxis: {},
series: [{
name: '粉絲數',
type: 'bar',
data: [40, 19, 15, 18, 9]
}]
};
5、 使用指定的配置項和資料顯示圖表。
myChart.setOption(option);
這樣,你就可以在瀏覽器上看到一個柱狀圖出來啦。
滑鼠懸浮可以看到X軸和Y軸對應的資料
柱狀圖和折線圖可以很好的切換:只需要改一下series.type:line
如果是餅圖的話,就不要X Y 軸了。 type: ‘pie’,
並且data的資料需要換成
data:
[ {value:40, name:'安迪'},
{value:19, name:'樊勝美'},
{value:15, name:'關關'},
{value:18, name:'曲筱筱'},
{value:9, name:'邱瑩瑩'}]
如圖所示:
看到這裡,是不是覺得echarts真的是太好用又漂亮了,對吧?~這只是入門級的,後面需要結合地圖展示視覺化資料。期待吧~6月再見。7月,我來了。