媽媽不再用擔憂我用很差ECharts了
導讀
相信絕大多數從事前端開發工做的人來講，必定不會對ECharts感到陌生，ECharts其實就是一個圖表庫，實現數據的可視化開發，這裏引用一下官網對Echart的描述：
javascript
ECharts，一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。html
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關係數據可視化的關係圖、treemap、旭日圖，多維數據可視化的平行座標，還有用於 BI 的漏斗圖，儀表盤，而且支持圖與圖之間的混搭。
能夠說ECharts提供的功能大大知足了咱們在開發中的須要，最近在公司我也是負責前端可視化展現的部分，一樣選擇基於ECharts來進行開發，因此想寫一篇文章來爲那些沒有據說過ECharts或者只是據說過、沒有使用過ECharts的小夥伴提供一個基礎教程。文筆很差，你們多多見諒。
前端
引入ECharts
ECharts的引入方式主要分爲如下幾種：
java
1.從官網下載界面選擇你須要的版本下載，根據開發者功能和體積上的需求，咱們提供了不一樣打包的下載，若是你在體積上沒有要求，能夠直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。
複製代碼
2.經過 npm 獲取 echarts，npm install echarts --save
複製代碼
3.cdn 引入，你能夠在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。
複製代碼
繪製一個簡單的圖表
首先咱們新建一個HTML文件，爲ECharts準備一個具有寬高的DOMnpm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
複製代碼
而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。瀏覽器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
複製代碼
效果以下：bash
固然這也是最最最最基本的一個配置，實際開發中咱們會根據具體的需求去開發，好比咱們會對X軸、Y軸，tooptip、legend等一系列組件進行修改，下面我會對開發中常用的組件的配置進行一個介紹，幫助你們熟悉一下。
echarts
X軸
直角座標系 grid 中的 x 軸dom
1.xAxis.show | boolean
是否顯示X軸
複製代碼
2.xAxis.name | string
座標軸名稱
複製代碼
3.xAxis.nameLocation | string
座標軸名稱顯示位置
複製代碼
4.xAxis.nameTextStyle | Object
座標軸名稱的文字樣式
xAxis.nameTextStyle.color | string 顏色
xAxis.nameTextStyle.fontStyle | string 字體風格
xAxis.nameTextStyle.fontWeight | string 字體粗細
xAxis.nameTextStyle.fontSize | number 字體顏色
xAxis.nameTextStyle.align | string 文字水平對齊方式
xAxis.nameTextStyle.backgroundColor | string，Object 文字塊背景色
xAxis.nameTextStyle.borderColor | string 邊框顏色
...
複製代碼
5.xAxis.inverse | boolean
是否反轉
複製代碼
6.xAxis.minInterval | number
[defaule: 0]
自動計算的座標軸最小間隔大小，例如能夠設置成1保證座標軸分割刻度顯示成整數
複製代碼
7.xAxis.axisLine | Object
座標軸軸線相關設置
xAxis.axisLine.show | boolean 是否顯示軸線
xAxis.axisLine.lineStyle.color | string 設置軸線顏色
xAxis.axisLine.lineStyle.width | number 設置軸線寬度
複製代碼
8.xAxis.axisTick | Object
座標軸軸線相關設置
xAxis.axisTick.show | boolean 是否顯示刻度（就是一個個的小豎線）
複製代碼
9.xAxis.axisLabel | Object
座標軸軸線相關設置
xAxis.axisLabel.show | boolean 是否顯示刻度標籤
xAxis.axisLabel.color | string 設置刻度標籤顏色
複製代碼
下面就是一些簡單的配置ide
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
// show: false
name: 'x軸名稱',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'red'
}
},
axisLabel: {
color: 'green'
},
nameTextStyle: {
fontWeight: 500
}
}
複製代碼
效果以下，固然也能夠根據具體的項目需求進行修改。
Y軸
直角座標系 grid 中的 y 軸
Y軸的配置基本和X軸相差很少，這裏就不一一介紹了
yAxis: {
name: 'y軸名稱',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'red'
}
},
axisLabel: {
color: 'green'
},
nameTextStyle: {
fontWeight: 500
},
// minInterval: 1
}
複製代碼
效果以下：
圖例組件
圖例組件展示了不一樣系列的標記(symbol)，顏色和名字。能夠經過點擊圖例控制哪些系列不顯示
1.legend.type | string
圖例的類型。可選值：
'plain'：普通圖例。缺省就是普通圖例。
'scroll'：可滾動翻頁的圖例。當圖例數量較多時可使用。
複製代碼
2.legend.show | boolean
是否顯示圖例
複製代碼
3.legend.width/height | number
圖例的寬/高度
複製代碼
4.legend.itemGap | number
圖例之間的間隔
複製代碼
5.legend.orient | string
圖例列表的佈局朝向
可選：
'horizontal'
'vertical'
複製代碼
6.legend.itemWidth/itemHeight number | number
圖例標記的圖形寬度/高度
複製代碼
6.legend.textStyle | Object
圖例的公用文本樣式
複製代碼
legend: {
data: ['圖例1', '圖例2', '圖例3'],
show: true,
orient: 'vertical',
right: 10,
itemWidth: 20,
itemHeight: 20,
textStyle: {
color: function (params) {
let colorList = [
"#5C89FF", "#FFCB48"
];
return colorList[params.dataIndex];
},
fontSize: 12
}
}
複製代碼
效果以下
tooltip
提示框組件。
1.tooltip.show | boolean
是否顯示提示框
複製代碼
2.tooltip.triggerOn | string
觸發方式
提示框觸發的條件，可選：
1.'mousemove'
鼠標移動時觸發。
2.'click'
鼠標點擊時觸發。
3.'mousemove|click'
同時鼠標移動和點擊時觸發。
4.'none'
不在 'mousemove' 或 'click' 時觸發，用戶能夠經過 action.tooltip.showTip 和 action.tooltip.hideTip 來手動觸發和隱藏。也能夠經過 axisPointer.handle 來觸發或隱藏。
複製代碼
3.tooltip.backgroundColor | string
提示框浮層的背景顏色。
複製代碼
4.tooltip.borderColor | string
提示框浮層的邊框顏色。
複製代碼
5.tooltip.borderWidth | string
提示框浮層的邊框寬度。
複製代碼
6.tooltip.padding | number
提示框浮層的內邊距。
複製代碼
7.tooltip.textStyle | string
提示框浮層的文本樣式。
複製代碼
tooltip: {
backgroundColor: '#000000',
textStyle: {
color: 'yellow',
fontWeight: 500
},
formatter: '{a}中類別爲{b}的數值爲{c}'
}
複製代碼
效果以下
grid
直角座標系內繪圖網格
dataZoom
用於區域縮放，從而能自由關注細節的數據信息，或者概覽數據總體，或者去除離羣點的影響。
title
標題組件，包含主標題和副標題。
Events
在 ECharts 中主要經過 on 方法添加事件處理函數，該文檔描述了全部 ECharts 的事件列表。
在這裏就簡單舉一個例子,在代碼中添加一下代碼
this.myChart.on("click", (params) => {
console.log(params);
});
複製代碼
經過這簡單的幾行代碼，咱們就能夠實現獲取點擊的圖表的屬性
下面給你們看下實際項目中實際使用的一個例子
有興趣的小夥伴能夠嘗試去實現一下，其實ECharts的功能還有不少不少，這裏說的只不過是一些比較基礎的部分，你們能夠去官網好好研究一下，沒準會發現更加有意思的地方，到時候能夠分享給我哦，😀
綜上 就是我對於Echarts一點小看法，文中若有錯誤，歡迎在評論區指正，若是這篇文章幫助到了你，歡迎點贊👍和關注，😀。
小結
但願你閱讀本篇文章後能夠達到如下幾點：
1.瞭解Echarts究竟是什麼
2.能夠配置一個本身想要的圖表組件
複製代碼
推薦閱讀
參考
- 1. 媽媽不再用擔憂我使用git了
- 2. 媽媽不再用擔憂我不會webpack了2
- 3. 媽媽不再用擔憂我不會webpack了
- 4. 媽媽不再用擔憂我js跨域了。。
- 5. 媽媽不再擔憂我忘記Git密碼了
- 6. 有了 tldr，媽媽不再用擔憂我記不住命令了
- 7. TLDR --媽媽不再用擔憂咱們敲錯命令了
- 8. 機器學習PAI，媽媽不再用擔憂個人freestyle了
- 9. 前端跨域真Easy，媽媽不再用擔憂了
- 10. 媽媽不再用擔憂你不會使用線程池了（ThreadUtils）
- 更多相關文章...
- • Maven Web 應用 - Maven教程
- • XML 用途 - XML 教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • Composer 安裝與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。