范文杰_fe ·ECharts 工具欄
通過前面的學(xué)習(xí)，我們發(fā)現(xiàn)我們可以創(chuàng)建一個(gè)幾乎完美的圖表，但是做到如此 ECharts 還是覺得遠(yuǎn)遠(yuǎn)不夠，他認(rèn)為一個(gè)好的圖表不僅要能完美的展示數(shù)據(jù)，還應(yīng)該有一些附加的功能幫助用戶更好的更方便的完成一些其他的事情，比如：導(dǎo)出圖片，動(dòng)態(tài)切換圖表類型等等。這些功能在 ECharts 的工具欄組件都能完成，讓我們看一下吧。
1. 簡(jiǎn)介
ECharts 的工具欄組件在主要的圖表功能之外，為用戶提供了圖片導(dǎo)出、數(shù)據(jù)視圖切換、圖表類型切換、數(shù)據(jù)區(qū)域縮放、還原、數(shù)據(jù)框選六類功能按鈕。
2. 配置方法
工具欄組件可通過 toolbox 屬性進(jìn)行配置，形如：
const options = {
toolbox: {
show: true,
feature: {},
...
}
};
完整的配置項(xiàng)列表請(qǐng)參考 官網(wǎng)，其中 feature 用于配置工具欄的功能按鈕，支持如下子屬性：
feature.saveAsImage: “圖片導(dǎo)出”功能配置，特別的可通過該項(xiàng)設(shè)定導(dǎo)出圖片的格式、分辨率、需要忽略的組件等；feature.store: “還原”功能配置，可通過該項(xiàng)設(shè)定工具按鈕視覺效果；feature.dataView: “數(shù)據(jù)視圖切換”功能配置，特別的可通過該項(xiàng)定義從數(shù)據(jù)視圖到配置項(xiàng)，或從配置項(xiàng)到數(shù)據(jù)視圖的轉(zhuǎn)換函數(shù)；feature.dataZoom: “數(shù)據(jù)區(qū)域縮放”功能配置，特別的可通過該項(xiàng)設(shè)定數(shù)據(jù)縮放時(shí)的過濾效果；feature.magicType: “圖表類型切換”功能配置，特別的可通過該項(xiàng)設(shè)定支持切換的類型、切換時(shí)附加的配置項(xiàng)等；feature.brush: “數(shù)據(jù)框選”功能配置，可用于設(shè)定按鈕視覺效果。
下面展開討論。
3. 導(dǎo)出圖片
工具欄組件的“圖片導(dǎo)出”按鈕可將圖表導(dǎo)出為靜態(tài)圖片，支持 jpeg、png、svg 三種格式，可通過 toolbox.feature.saveAsImage 項(xiàng)進(jìn)行配置，其中比較重要的配置項(xiàng)有：
- type：用于設(shè)定導(dǎo)出圖片的格式，當(dāng)
renderer = canvas時(shí)，支持 jpeg、png，默認(rèn)為 png；當(dāng)renderer = svg時(shí)僅支持 svg 格式； - name：導(dǎo)出的文件名，默認(rèn)為配置項(xiàng)中的
title.text值； - excludeComponents：導(dǎo)出時(shí)需要忽略的組件列表，默認(rèn)值為 [‘toolbox’]；
- pixelRatio：導(dǎo)出圖片的分辨率。
例如對(duì)于下述配置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolbox: {
feature: { saveAsImage: { pixelRatio: 1, type: 'jpeg', excludeComponents: ['legend'] } },
},
legend: {
data: ['預(yù)算', '實(shí)際開銷'],
left: 0,
},
radar: {
indicator: [
{ name: '銷售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技術(shù)', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研發(fā)', max: 52000 },
{ name: '市場(chǎng)', max: 25000 },
],
},
series: [
{
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預(yù)算',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實(shí)際開銷',
},
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
導(dǎo)出效果：
Tips：
pixelRatio 定義導(dǎo)出圖片的縮放比例，例如上例中圖表容器的寬高為style="width: 600px; height: 400px;"，若pixelRatio = 1則導(dǎo)出圖片分辨率為 600x400；若pixelRatio = 2則為 1200x800；若pixelRatio = 0.5則為 300x200。下限為 0，當(dāng)數(shù)值超過 35 時(shí)，導(dǎo)出圖片可能為空。
除工具欄按鈕外，開發(fā)者還可以通過 echartsInstance.getDataURL 接口將圖表內(nèi)容導(dǎo)出為 base64 串，該接口接受如下參數(shù)：
(opts: {
// 導(dǎo)出的格式，可選 png, jpeg, svg
type?: string,
// 導(dǎo)出的圖片分辨率比例，默認(rèn)為 1。
pixelRatio?: number,
// 導(dǎo)出的圖片背景色，默認(rèn)使用 option 里的 backgroundColor
backgroundColor?: string,
// 忽略組件的列表
excludeComponents?: Array<string>,
}) => string;
結(jié)合 getDataURL 接口，下述代碼片段同樣可實(shí)現(xiàn)導(dǎo)出為本地圖片文件功能：
function saveAsImg(chart) {
const img = chart.getDataURL({
backgroundColor: '#fff',
excludeComponents: ['legend'],
pixelRatio: 1,
});
const anchor = document.createElement('a');
anchor.href = img;
anchor.setAttribute('download', 'test.jpeg');
anchor.click();
}
導(dǎo)出效果：
導(dǎo)出功能對(duì) bmap 插件失效，無法導(dǎo)出百度地圖層。
4. 數(shù)據(jù)視圖
數(shù)據(jù)視圖工具用于修改數(shù)據(jù)視圖，通過 toolbox.feature.dataView 項(xiàng)配置，點(diǎn)擊后可以以表格形式展示圖表中包含的數(shù)據(jù)信息；表格本身還支持簡(jiǎn)單編輯功能，編輯后會(huì)即時(shí)更新圖表視圖。例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolbox: {
feature: {
// 提供 dataView 空對(duì)象即可啟動(dòng) dataView 功能
dataView: {},
},
},
radar: {
indicator: [
{ name: '銷售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技術(shù)', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研發(fā)', max: 52000 },
{ name: '市場(chǎng)', max: 25000 },
],
},
series: [
{
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預(yù)算',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實(shí)際開銷',
},
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例效果：
toolbox.feature.dataView 有兩個(gè)比較重要的配置項(xiàng)：
- optionToContent: 自定義數(shù)據(jù)視圖函數(shù)，可以通過該選項(xiàng)配置更豐富的展示方法，函數(shù)簽名：
(option:Object) => HTMLDomElement|string； - contentToOption: 用于定義如何將數(shù)據(jù)視圖結(jié)果轉(zhuǎn)換為圖表配置項(xiàng)。
通過這兩個(gè)函數(shù)，可以做出許多復(fù)雜絢麗的效果，例如使用 react 渲染數(shù)據(jù)視圖：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<div id="dataview">hello world</div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
// 使用react組件形式編寫的數(shù)據(jù)視圖
function DataView(props) {
const rows = props.series;
return React.createElement(
'table',
{
className: 'table',
},
rows.map(function (row) {
return React.createElement(
'tr',
null,
React.createElement('td', null, row.name),
row.value.map(function (cell) {
return React.createElement('td', null, cell);
})
);
})
);
}
const option = {
toolbox: {
feature: {
dataView: {
optionToContent(opt) {
const {
series: [{ data }],
} = opt;
// 動(dòng)態(tài)創(chuàng)建一個(gè)容器節(jié)點(diǎn)
const root = document.createElement('div');
// 需要先將react組件渲染到容器節(jié)點(diǎn)上
ReactDOM.render(React.createElement(DataView, { series: data }), root);
return root;
},
},
},
},
radar: {
indicator: [
{ name: '銷售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技術(shù)', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研發(fā)', max: 52000 },
{ name: '市場(chǎng)', max: 25000 },
],
},
series: [
{
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預(yù)算',
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實(shí)際開銷',
},
],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
Tips：
- 若 optionToContent 返回的是頁面中已經(jīng)存在 DOM 元素時(shí)，ECharts 會(huì)將該元素剪切到數(shù)據(jù)視圖中，這以為著原來位置會(huì)丟失這部分 DOM！例如對(duì)于
optionToContent: document.getElementById('dataview')，一旦執(zhí)行數(shù)據(jù)視圖功能，原來位置上的 dataview 元素將會(huì)被刪除。- 數(shù)據(jù)視圖工具只對(duì)使用
series.data配置數(shù)據(jù)的方式有效，不能應(yīng)用在 dataset 上。
5. 動(dòng)態(tài)類型切換
圖表類型切換工具允許用戶在運(yùn)行狀態(tài)下動(dòng)態(tài)變更圖表類型，目前支持在 line、bar 兩種圖表間切換；以及在 stack(堆疊)、tiled(平鋪) 兩種狀態(tài)間切換。動(dòng)態(tài)類型工具可通過 toolbox.feature.magicType 項(xiàng)進(jìn)行配置，核心配置項(xiàng)有：
- type：允許切換的類型列表，支持 line、bar、stack、tiled 四個(gè)關(guān)鍵字，其中 stack 用于在折線圖或柱狀圖上附加堆疊效果；tiled 用于取消堆疊效果，兩者互斥；
- option：各個(gè)類型的專有配置項(xiàng)。在切換到某類型的時(shí)候會(huì)合并相應(yīng)的配置項(xiàng)；
- seriesIndex：各個(gè)類型對(duì)應(yīng)的系列列表。
下面示例綜合體現(xiàn)上述配置項(xiàng)的用法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
<script type="text/javascript">
const myChart = echarts.init(document.getElementById('main'));
const option = {
toolbox: {
feature: {
magicType: {
type: ['line', 'bar', 'stack', 'tiled'],
option: {
// 類型切換時(shí)，下述配置項(xiàng)將被merge到對(duì)應(yīng)類型的圖表 series 中
line: { smooth: true },
bar: { label: { show: true } },
stack: { label: { show: true, color: 'red' } },
},
seriesIndex: {
line: [0],
},
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C',
},
},
series: [
{
name: '最高氣溫',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
},
{
name: '最低氣溫',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例效果：
Tips：
類型切換功能可能會(huì)帶入一些副作用，例如上例中從 bar 切換到 line 時(shí)，第一個(gè)序列的顏色發(fā)生了變化。
6. 數(shù)據(jù)區(qū)域縮放
縮放工具基于 datazoom 組件實(shí)現(xiàn)，配置上有兩個(gè)重點(diǎn)，一是通過 xAxisIndex 或 yAxisIndex 指定縮放工具作用的軸；二是通過 filterMode 設(shè)定數(shù)值的過濾邏輯。兩類配置的詳細(xì)介紹可參考 datazoom 一節(jié)，此處不再贅述。
7. 重置
用戶通過數(shù)據(jù)視圖工具或數(shù)據(jù)區(qū)域縮放工具修改圖表狀態(tài)后，可使用重置按鈕設(shè)置回初始狀態(tài)。重置功能的配置屬性比較簡(jiǎn)單，均用于修改圖標(biāo)樣式，請(qǐng)直接查閱官網(wǎng)，此處不贅述。
Tips：
重置功能有很多限制：
- 只適用于通過數(shù)據(jù)視圖工具、數(shù)據(jù)區(qū)域縮放工具兩類操作造成的影響，其他更新操作，如 appendData、setOption 接口觸發(fā)的變更都不在此列。
- 沒有歷史堆棧功能，執(zhí)行重置后只會(huì)回到初始狀態(tài)。例如，如果多次使用數(shù)據(jù)視圖工具修改數(shù)據(jù)值，雖然按理說已經(jīng)產(chǎn)生了多個(gè)中間態(tài)，但一旦重置，只能回到最開始傳入的配置狀態(tài)。
8. 小結(jié)
本節(jié)結(jié)合多個(gè)實(shí)例，講述 Echarts 工具欄組件(toolbox)的各類應(yīng)用方法，包括導(dǎo)出圖片、數(shù)據(jù)視頻、圖表類型切換、區(qū)域縮放、重置等功能項(xiàng)的用法及注意事項(xiàng)。
2025 imooc.com All Rights Reserved |