目錄
- 基本使用
- 通用配置
- 柱狀圖
- 折線圖
- 散點圖
- 直角坐標系中的常用配置
- 餅圖
- 地圖
- 雷達圖
- 儀表盤
- 顯示相關
- 主題
- 調色盤
- 調色盤
- 顏色漸變
- 樣式
- 自適應
- 影片的使用
- 互動API
- 全域echarts物件常用方法
- echartsInstance物件常用方法
基本使用
- 引入echarts.js檔案
- 準備一個呈現圖表的盒子
- 初始化echarts實體物件
- 準備配置項（柱形圖、餅圖、折線圖等）
- 將配置項設定給echaers實體物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入檔案 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 2. 準備盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 3. 初始化echarts實體物件
var myChart = echarts.init(document.querySelector('div'));
// 4. 準備配置項（上官網復制代碼）
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// x軸
xAxis: [{
// 類目軸
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
// y軸
yAxis: [{
// 數值軸
type: 'value'
}],
// 系列串列
series: [{
name: '直接訪問',
// 圖表型別
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
// 將配置項給echarts實體物件
myChart.setOption(option);
</script>
</body>
</html>
結果：
官方檔案：https://echarts.apache.org/zh/option.html#title
通用配置
- 標題：title
- 提示：tooltip
提示框組件，用于配置滑鼠滑過或點擊圖表時的顯示框，
- 工具按鈕：toolbox
ECharts提供的工具列
- 圖例：legend
圖例，用于篩選系列，需要和series配合使用，
legend中的data值需要和series陣列中某組資料的name值一致，
柱狀圖
描述分類資料，呈現每一個分類中有多少，
var option = {
color: ['#3398DB'],
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接訪問',
type: 'bar',
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
常見效果
- 標記：
- 最大值，最小值
- 平均值
- 顯示
-
數值設定：label
-
柱寬度：barWidth
-
橫向柱狀圖：
-
折線圖
常用來分析資料隨時間的變化趨勢，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入檔案 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 2. 準備盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 3. 初始化echarts實體物件
var myChart = echarts.init(document.querySelector('div'));
// 4. 準備配置項
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [300, 632, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 將配置項給echarts實體物件
myChart.setOption(option);
</script>
</body>
</html>
- 標記：
- 最大值、最小值、平均值（同柱狀圖）
- 標注區間：markArea
- 線條控制
- 線條平滑：smooth
- 線條樣式：lineStyle
- 線條平滑：smooth
- 填充風格：areaStyle
- 緊挨邊緣 boundaryGap
- 縮放：脫離0值比例 scale
- 堆疊圖 stack
交叉重疊情況：
第二個圖形堆疊到第一個圖形上：
散點圖
可以幫助推斷變數之間的相關性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入檔案 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 2. 準備盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 3. 初始化echarts實體物件
var myChart = echarts.init(document.querySelector('div'));
// 4. 準備配置項
var option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
// 二維陣列
// 實際開發中可能需要對原始資料操作，可以通過回圈獲取想要資料，并生成一個新的二維陣列
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
// 將配置項給echarts實體物件
myChart.setOption(option);
</script>
</body>
</html>
- 氣泡圖效果
-
散點的大小不同 : symbolSize
-
散點的顏色不同: itemStyle.color
-
- 漣漪影片效果: type:effectScatter
直角坐標系中的常用配置
直角坐標系圖表：柱狀圖、折線圖、散點圖
- 網格：grid
用來控制直角坐標系的布局和大小，
- 坐標軸：axis
- 坐標軸型別 type：
value：數值軸，自動從目標資料中讀取資料，
category：類目軸，該型別必須通過data設定類目資料， - 顯示位置：position
xAxis：可取值為 top 或 bottom，
yAxis：可取值為 left 或 right，
- 坐標軸型別 type：
- 區域縮放：dataZoom
dataZoom：用于區域縮放，對資料范圍過濾；是一個陣列，意味著可以配置多個區域縮放器，- 型別：type
slide：滑塊
inside：內置，依靠滑鼠滾輪或者雙指縮放
- 指明產生作用的軸
xAxisIndex：設定縮放組件控制的是哪個x軸，一般寫0即可，
yAxisIndex：設定縮放組件控制的是哪個y軸，一般寫0即可，
- 指明初始狀態的縮放情況
start：資料視窗范圍的起始百分比，
end：資料視窗范圍的結束百分比，
- 型別：type
餅圖
可快速了解不同分類資料的占比情況，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入檔案 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<!-- 2. 準備盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 3. 初始化echarts實體物件
var myChart = echarts.init(document.querySelector('div'));
// 4. 準備配置項
var option = {
series: [{
name: '訪問來源',
type: 'pie',
data: [{
value: 335,
name: '直接訪問'
}, {
value: 310,
name: '郵件營銷'
}, {
value: 234,
name: '聯盟廣告'
}, {
value: 1548,
name: '搜索引擎'
}]
}]
};
// 將配置項給echarts實體物件
myChart.setOption(option);
</script>
</body>
</html>
- 顯示數值 label.formatter
- 圓環 radius
- 南丁格爾圖 roseType
餅圖的每一個區域半徑是不同的，
radius：扇區圓心角展現資料的百分比，半徑展現資料的大小，
area：所有扇區圓心角相同，僅通過半徑展現資料大小，
- 選中效果 selectedMode
地圖
可從宏觀的角度快速看出不同地理位置上資料的差異，
- 百度地圖API
需要申請百度地圖a - 矢量地圖
- 需要準備矢量地圖資料
- ，將檔案引入到專案中
- 使用Ajax獲取json檔案中的資料
$.get('china.json', function(chinaJson)()) - 在回呼函式中往echarts全域物件注冊地圖json資料
echarts.registerMap('chinaMap', chinaJson); - 在geo下設定
type: 'map'
map: 'chinaMap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.querySelector('div'));
// 獲取地圖矢量資料
$.get('./map/china.json', function(ret) {
// console.log(ret);
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap'
}
};
myChart.setOption(option);
})
</script>
</body>
</html>
- 拖動縮放 ream
- 名稱顯示 label
- 初始縮放比例 zoom
- 地圖中心點 center
雷達圖
可用來分析多個維度的資料與標準資料的對比情況，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.querySelector('div'));
var option = {
// 雷達
radar: {
// 定義各個維度的最大值
indicator: [{
name: '銷售（sales）',
max: 6500
}, {
name: '管理（Administration）',
max: 16000
}, {
name: '資訊技術（Information Techology）',
max: 30000
}, {
name: '客服（Customer Support）',
max: 38000
}, {
name: '研發（Development）',
max: 52000
}, {
name: '市場（Marketing）',
max: 25000
}]
},
series: [{
name: '預算 vs 開銷（Budget vs spending）',
// 設定；型別為雷達
type: 'radar',
// areaStyle: {normal: {}},
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預算分配（Allocated Budget）'
}, {
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實際開銷（Actual Spending）'
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
常用配置：
儀表盤
主要用在進度把控資料范圍的監測，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.min.js"></script>
<script src="./jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.querySelector('div'));
var option = {
series: [{
// 儀表盤
type: 'gauge',
data: [{
value: 50,
}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
- 數值范圍: max, min
- 多個指標
- 多個指標顏色差異
顯示相關
主題
- 內置主題
- ECharts中默認設定了兩套主題：light和dark
- 在初始化物件方法中可以指明：
var myChart = echarts.init(dom, 'light')
- 自定義主題
- 在主題編輯器中編輯主題
- 下載主題（js檔案）
- 引入主題js檔案
- 在init中使用主題
網址：https://echarts.apache.org/zh/theme-builder.html
調色盤
調色盤
它是一組顏色，圖形、系列會自動從中選擇顏色，
-
主題調色盤
如：在引入的itcast中就設定好了主題顏色，
-
全域調色盤
-
區域調色盤
會覆寫全域調色盤，
調色盤遵循就近原則，
顏色漸變
- 線性漸變
- 徑向漸變
樣式
- 直接樣式
itemStyle、textStyle、lineStyle、areaStyle、label
- 高亮樣式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label，
自適應
瀏覽器大小發生變化時，圖表也能隨之匹配變化，
可以配合回應式布使用：
window.addEventListener('resize', function() {
myChart.resize();
})
影片的使用
加載影片：
ECharts已經內置好了加載資料的影片，我們只需要在合適的時機顯示或隱藏即可，
- 顯示加載影片(獲取資料成功之前)：
myChart.showLoading() - 隱藏加載影片(獲取資料成功之后)：
myChart.hideLoading()
增量影片 myChart.setOption：
-
可以實作在同一個圖表中點擊按鈕進行資料修改、新增等操作，
-
setOption可以設定多次，新舊option是相互整合的關系，
-
設定新option的時候只需要考慮變化的部分，
影片項配置
- 開啟影片：animation: true（默認)
- 影片時長：animationDuration: 5000 (以毫秒為單位; 支持回呼函式)
- 緩動影片：animationEasing: ‘bounceOut’ (如：linear影片均勻；bounceOut帶回彈效果)
- 影片閾值：animationThreshold: 8 (單種形式的元素大于這個閾值時會關閉影片)
互動API
-
全域echarts物件
全域echarts物件是引入echarts.js檔案之后就可以直接使用的， -
echartsInstance物件
echartsInstance物件是通過echarts.init方法呼叫之后得到的，
全域echarts物件常用方法
- init方法
- 初始化echarts實體物件
- 使用主題
- registerTheme方法
- 注冊主題時使用
- 注冊主題時使用
- registerMap方法
- 實作地圖圖表時使用，注冊地圖資料
- connect方法
- 將多個圖表進行關聯，傳入聯動目標為echarts實體物件，支持陣列
echarts.connect([myChart1, myChart2])
產生聯動效果的情況：
- 保存圖片的自動拼接
- 重繪按鈕
- 重置按鈕
- 提示框聯動、圖例選擇、資料范圍修改等，，
echartsInstance物件常用方法
- setOption方法
- 設定或修改圖表實體的配置項以及資料
- 可以多次呼叫setOption方法
- resize方法
- 重新計算和繪制圖表
- 一般和window物件的resize事件結合使用
- on / off方法
- 系結或解綁事件處理函式
- 滑鼠事件：click、dblclick、mousedown、mousemove、mouseup等
- ECharts事件：legendselectchanged、datazoom、pieselectchanged…
- dispatchAction方法
- 觸發某些行為
- 使用代碼模擬用戶的行為
- clear方法
- 清空當前實體，會移除實體中所有的組件和圖表（如清除圖表）
- 清空之后可以再次setOption（重新顯示圖表）
- dispose方法
- 銷毀實體，銷毀后無法通過setOption再次顯示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/251716.html
標籤：其他