整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
當今數據驅動的世界中，數據可視化簡化了復雜信息，賦予個人做出明智決策的能力。其中一種特別有價值的圖表類型是資源圖表，它有助于高效的資源分配。本教程將是您創建動態資源圖表的必備指南，使用JavaScript。
資源圖表是一種甘特圖類型，用于可視化有關資源利用的數據，例如設備、員工等。它提供了全面的概述，使得及時做出明智決策變得更加容易。舉個例子，在本教程中，我將以球場為單位代表2022年卡塔爾世界杯的賽程，讓您可以追蹤每場比賽的時間和地點。
準備好您的編碼工具，通過本指南結束時，您將能夠創建自己基于JavaScript的資源圖表，并擁有一個有價值的工具，用于追蹤您下一個喜愛的錦標賽、服務器狀態、員工項目分配，或者其他類似的事物。
您是否對我們即將創建的內容感到興奮？繼續閱讀，您將學會如何創建一個JavaScript資源圖表，就像下面展示的一樣。
感到好奇嗎？讓我們一起開始這激動人心的旅程吧！
資源圖表乍一看可能會顯得復雜，因為它使用水平條來表示時間段。然而，我向您保證，一旦您掌握了它，就會發現它其實非常簡單。您可以通過以下四個基本步驟來構建這個圖表：
現在，讓我們詳細了解每個步驟。
首先，創建一個基本的HTML頁面，用于承載您的JavaScript資源圖表。在HTML文檔的主體中，添加一個HTML塊元素，比如<div>，它將作為您即將創建的圖表的容器。給它一個ID，在您后面創建圖表時，將在JavaScript代碼中引用它。為了確保圖表使用正確的位置，可以在<style>塊中定義一些CSS規則。
下面是一個以這種方式創建的簡單網頁的示例。我將<div>元素命名為“container”，并調整其高度和寬度，使圖表占據整個屏幕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
在數據可視化方面，JavaScript圖表庫是非常寶貴的工具。關鍵是找到一個不僅滿足您的需求，而且支持您尋找的特定圖表類型的庫。
在本教程中，我將使用AnyChart，這是一個長期存在的JavaScript圖表庫，支持資源圖表，并提供全面的文檔，而且它是免費的（除非您將其集成到商業應用程序中）。如果您選擇使用其他庫，整個過程基本上是一樣的。
您可以通過兩種主要選項來包含所選庫的必要JavaScript文件：下載它們并在本地使用，或者通過CDN（內容傳送網絡）直接鏈接到它們。在本教程中，我將選擇CDN的方式。下面是在HTML頁面的<head>部分鏈接所需腳本的示例。
圖表的代碼將位于HTML頁面的<body>部分的<script>標簽中。或者，如果更適合您的項目結構，也可以將其放在<head>部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
// The place for the following chart’s code.
</script>
</body>
</html>
現在，讓我們加載數據。在本教程中，將可視化2022年FIFA世界杯的賽程。數據以JSON格式在提供的GitHub gist上可用。
數據由一系列對象組成，每個對象代表一個球場。您將在每個球場對象中找到其名稱和城市等詳細信息。此外，還有一個名為“periods”的屬性，其中包含在該球場舉辦的比賽列表。每場比賽由兩支參賽國家的名稱和比賽結果表示。
為了正確地將這種類型的數據輸入到資源圖表中，可以使用anychart.data.loadJsonFile()方法。下面是加載數據的代碼片段：
anychart.data.loadJsonFile("https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json");
數據加載完畢后，您現在可以繼續，看看如何通過幾行JavaScript代碼轉化為一個完全功能的資源圖表。
首先，添加anychart.onDocumentReady()函數，它封裝了確保您的代碼僅在頁面完全加載時執行的所有必要代碼。
<script>
anychart.onDocumentReady(function () {
// The resource chart data and code will be in this section.
});
</script>
接下來，加載數據并創建一個數據樹。
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData=anychart.data.tree(data, 'as-table’);
}
);
});
然后，使用ganttResource()方法創建資源甘特圖，并使用data()方法設置您的數據樹。
// create a resource gantt chart
var chart=anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
將圖表放置在第1步中引入的<div>容器中，最后使用draw()方法繪制圖表。
// set the container
chart.container("container");
// draw the chart
chart.draw();
哇！您已成功使用JavaScript創建了一個簡單而完全功能的資源圖表。看看它在實際中是如何呈現的；這個圖表的交互版本可以在這里找到。為了您的方便，還提供了基本資源圖表的完整代碼。
有了這個資源圖表，您可以輕松地可視化哪些比賽在哪些球場舉行，您可以在右側的比賽部分滾動查看所有比賽。但還有更多內容可以探索，所以讓我們繼續定制這個交互式數據可視化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Resource Gantt Chart</title>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script data-fr-src="https://cdn.anychart.com/releases/8.11.1/js/anychart-gantt.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-data-adapter.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// load the data
anychart.data.loadJsonFile(
"https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",
function (data) {
// create a data tree
var treeData=anychart.data.tree(data, "as-table");
// create a resource gantt chart
var chart=anychart.ganttResource();
// set the data for the chart
chart.data(treeData);
// set the container
chart.container("container");
// draw the chart
chart.draw();
}
);
});
</script>
</body>
</html>
現在基本的基于JavaScript的資源圖表已經就緒，讓我們探索一些增強其視覺效果和功能的方法。
為了提高資源圖表的視覺吸引力，讓我們深入一些可能的行和列的調整。
首先，您可以為行的選定和懸停狀態設置自定義顏色，并調整分隔位置以獲得更好的內容可見性。此外，考慮指定默認行高，以便整潔地呈現和輕松閱讀行項目。
// customize the rows
chart
.rowSelectedFill("#D4DFE8")
.rowHoverFill("#EAEFF3")
.splitterPosition(230);
// set the row height
chart.defaultRowHeight(50);
現在，讓我們繼續配置列。在第一列中，您可以選擇將一個簡單的數字標簽“#”作為標題，并自定義其寬度。
對于第二列，您可以將球場名稱設置為粗體，以突出顯示，并將城市名稱放在球場名稱的正下方。根據需要調整列寬，以舒適地容納內容。
// customize the column settings:
// get the data grid
var dataGrid=chart.dataGrid();
// set the fixed columns mode
dataGrid.fixedColumns(true);
// first column
dataGrid
.column(0)
.title("#")
.width(30
.labels({ hAlign: "center" });
// second column
dataGrid
.column(1)
.title("Stadium")
.width(200)
.labels()
.useHtml(true)
.format(function () {
return (
"<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city")
);
});
現在，讓我們通過在時間軸條上直接顯示比賽結果來增強資源圖表。這樣可以快速查看比賽結果，而無需參考其他地方。
為了實現這一點，啟用時間軸周期上的標簽，并使用useHtml()方法應用自定義樣式。
// configure the period labels:
// get the period labels
var periodLabels=chart.getTimeline().periods().labels();
// set the period labels
periodLabels
.enabled(true)
.useHtml(true)
.format(
"<span style='color:#fff; font-size: 12px;'>{%result}</span>"
);
在資源條本身的額外信息的基礎上，圖表現在一目了然地提供了更豐富的信息。
為了獲得美觀的用戶體驗，考慮為圖表的視覺方面增添一些調味。
首先，將圖表的背景顏色設置為淺灰色。
chart.background("#edeae8 0.8");
接下來，從時間軸中作為元素訪問條形，并對它們的填充和描邊顏色進行調整。
var elements=chart.getTimeline().elements();
elements.normal().fill("#9a1032 0.8");
elements.normal().stroke("#212c68");
再進一步，可以使用函數根據條件動態填充條形的顏色。例如，比賽結果可以是這樣的一個條件。因此，該函數檢查比賽結果，如果是平局，則將條形涂成綠色；否則，涂成紅色。這提供了一種有趣的方式，可以通過條形的顏色立即辨別比賽的結果。
// 自定義條形的顏色：
// 獲取元素
var elements=chart.getTimeline().elements();
// 檢查當前項目是否為平局，如果是，則以不同的顏色填充
elements.normal().fill(function() {
var result=this.period.result;
var scores=result.split("-").map(Number);
if (scores[0]===scores[1]) {
return "#11A055 0.8";
} else {
return "#9a1032 0.8";
}
});
elements.normal().stroke("#212c68");
現在，是時候微調工具提示，以提供更好的用戶體驗。
為了保持工具提示簡潔明了，配置它在懸停在特定條形上時顯示球隊名稱和比賽結果。
// 配置工具提示
var tooltip=chart.getTimeline().tooltip();
tooltip
.useHtml(true)
.format(function(e) {
var tooltipText;
if (typeof e.period==="undefined") {
tooltipText=e.item.la.city;
} else {
var period=e.period;
tooltipText=period.result;
}
return tooltipText;
});
這些微小的調整顯著提高了呈現數據的視覺清晰度。現在，下面是資源圖表的最終版本。您可以在此處探索這個最終圖表的交互版本。隨意探索并與之交互。為了方便起見，下面提供了最終資源圖表的完整代碼。
/準備echarts腳本文件
官網下載最新版本：https://echarts.apache.org/zh/download.html
開源庫下載：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js
//5.33改成最新版本的版本號 就可以下載最新版本了
下載第三方水球庫插件：https://github.com/ecomfe/echarts-liquidfill
2.添加一個事件來加載圖表腳本，我用的的頁面加載時 ，也可以添加后臺服務組件，通過后臺服務組件事件：服務響應時來調用腳本 可以很方便的綁定數據
3.添加剛才下載echarts腳本文件
添加第三方水球插件：
引入腳本
要創建液體填充圖表，您需要有一個類型為'liquidFill'. 一個基本選項可能是：
option={ series: [{ type: 'liquidFill', data: [0.6] }] };
很容易創建一個帶有多個波浪的液體填充圖表，或者表示多個數據，或者提高圖表的視覺效果。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3]}]};
這將在 60%、50%、40% 和 30% 的位置創建一個帶有波浪的圖表。
要為液體填充圖表系列設置顏色，請設置color為顏色數組。要設置不透明度，請使用itemStyle.opacity和itemStyle.emphasis.opacity用于普通樣式和懸停樣式。
option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, 0.3], color: ['red', '#0f0', 'rgb(0, 0, 255)'], itemStyle: { opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] };您還可以通過以下方式設置單個數據項的顏色和不透明度：
option={ series: [{ type: 'liquidFill', data: [0.5, 0.4, { value: 0.3, itemStyle: { color: 'red', opacity: 0.6 }, emphasis: { itemStyle: { opacity: 0.9 } } }] }] };為了防止波浪向左或向右移動，您可以簡單地設置waveAnimation為false。要禁用波浪上升的動畫，請將animationDuration和設置animationDurationUpdate為 0。
option={ series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };您可以將 設置amplitude為 0 以產生靜止波。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };在這種情況下建議設置waveAnimation為 false 以禁用動畫以考慮性能。
要更改單個波形，請覆蓋數據項中的選項。
option={ series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { color: 'red' } }, 0.4, 0.3] }] };您可以使用 backgroundStyle 選項來設置背景形狀的筆觸、填充樣式。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], backgroundStyle: { borderWidth: 5, borderColor: 'red', color: 'yellow' } }] };要隱藏輪廓，只需設置outline.show為false。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], outline: { show: false } }] };水填充圖表的形狀。有可能：
options=[{ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], shape: 'diamond' }] }];option={
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3, 0.2],
shape: 'container',
outline: {
show: false
}
}]
};option={ series: [{ type: 'liquidFill', data: [0.6, 0.55, 0.4, 0.25], radius: '60%', outline: { show: false }, backgroundStyle: { borderColor: '#156ACF', borderWidth: 1, shadowColor: 'rgba(0, 0, 0, 0.4)', shadowBlur: 20 }, shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z', label: { position: ['38%', '40%'], formatter: function() { return 'ECharts\nLiquid Fill'; }, fontSize: 40, color: '#D94854' } }] };一般來說，液體填充圖表中有兩種類型的動畫。
第一種是初始動畫，具有升浪的效果。此動畫的緩動方法由 控制，animationEasing其持續時間由控制animationDuration。
第二種是更新動畫，通常在數據變化、波高變化時使用。它們由animationEasingUpdate和控制animationDurationUpdate。
例如，要禁用提升動畫并將更新動畫時間設置為 2 秒cubicOut，可以使用以下選項：
var mytubiao=echarts.init(document.getElementById("mytb"))
option={
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
animationDuration: 0,
animationDurationUpdate: 2000,
animationEasingUpdate: 'cubicOut'
}]
};
mytubiao.setOption(option);
setTimeout(function () {
mytubiao.setOption({
series: [{
type: 'liquidFill',
data: [0.8, 0.6, 0.4, 0.2]
}]
})
}, 3000);
默認情況下，液體填充圖表的文本標簽顯示第一個數據的百分比。例如，對于帶有 data 的圖表[0.6, 0.5, 0.4, 0.3]，默認文本是60%.
要更改文本，您可以使用label.formatter，它可以設置為字符串或函數。
如果是字符串，{a}則表示系列名稱、{b}數據名稱和{c}數據值。
option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: '{a}\n{b}\nValue: {c}', fontSize: 28 } }] };
此示例的標簽文本為'Liquid Fill\nFirst Data\nValue: 0.6'.
formatter這與作為函數使用的結果相同：
option={ series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }, fontSize: 28 } }] };
文本位置默認在中心。label.position可以設置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'向左（由 控制label.align，可以是'left'、'center'或'right'）和'20%'頂部（由 控制label.baseline，可以是'top'、'middle'或'bottom'）。
陰影
默認情況下，波浪和輪廓上有陰影。以下是如何更改它們。
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], itemStyle: { shadowBlur: 0 }, outline: { borderDistance: 0, itemStyle: { borderWidth: 5, borderColor: '#156ACF', shadowBlur: 20, shadowColor: 'rgba(255, 0, 0, 1)' } } }] };
添加工具提示：
option={ series: [{ type: 'liquidFill', data: [0.6], name: 'Liquid Fill' }], tooltip: { show: true } };
要在 wave 上添加點擊事件：
chart.setOption(option); chart.on('click', function() { console.log(arguments); // do something useful here });
與任何其他圖表類型一樣，上述代碼只會觸發波事件。如果要跟蹤整個畫布或特定元素上的事件，可以將偵聽器添加到 zrender，例如：
chart.getZr().on('click', function() { console.log(arguments); });
不可交互
要使元素（例如，波浪）不可交互，只需設置silent為true.
option={ series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], silent: true }] };
API
液體填充圖表的默認選項是：
{
data: [],
color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
center: ['50%', '50%'],
radius: '50%',
amplitude: '8%',
waveLength: '80%',
phase: 'auto',
period: 'auto',
direction: 'right',
shape: 'circle',
waveAnimation: true,
animationEasing: 'linear',
animationEasingUpdate: 'linear',
animationDuration: 2000,
animationDurationUpdate: 1000,
outline: {
show: true,
borderDistance: 8,
itemStyle: {
color: 'none',
borderColor: '#294D99',
borderWidth: 8,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
backgroundStyle: {
color: '#E3F7FF'
},
itemStyle: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
align: 'center',
baseline: 'middle'
position: 'inside'
},
emphasis: {
itemStyle: {
opacity: 0.8
}
}
}
數據{(數字|對象)[]}
每個數據項的值應介于 0 和 1 之間。
數據項也可以是配置單個項的選項的對象。
option={
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
itemStyle: {
color: 'red'
}
}, 0.4, 0.3]
}]
};
這定義了具有第二波紅色的圖表。
顏色 {string[]}
波浪顏色。
形狀 {字符串}
水填充圖表的形狀。它可以是默認符號之一：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'. 或者，以 . 開頭的 SVG 路徑'path://'。
中心{字符串[]}
圖表的位置。第一個值是 x 位置，第二個值是 y 位置。每個值都可以是一個相對值，例如'50%'，它是相對于容器寬度和高度的較小值的，也可以是一個絕對值，例如100px。
半徑 {字符串}
圖表的半徑，可以是相對值，如'50%'，相對于容器寬度和高度的較小值，也可以是絕對值，如100px。
幅度{數}
波的幅度，以像素或百分比為單位。如果它是百分比，它是相對于直徑的。
波長 {字符串|數字}
波的波長，可以是相對值，例如'50%'，它是相對于直徑的，也可以是絕對值，例如'100px'或100。
階段{編號}
波的相位，以弧度表示。默認情況下'auto'，當每個波的相位Math.PI / 4大于前一個時，它被設置為 。
周期 {number|'auto'|function}
向前移動一個波長所需的毫秒數。默認情況下，'auto'當前面的波速度較大時，它被設置為 。
它也可以是格式化程序功能。
option={
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '70%',
phase: 0,
period: function (value, index) {
// This function is called four times, each for a data item in series.
// `value` is 0.6, 0.5, 0.4, 0.3, and `index` is 0, 1, 2, 3.
return 2000 * index + 1000;
}
}]
}
方向 {字符串}
波浪移動的方向，應該是'right'或'left'。
waveAnimation {boolean}
是否啟用向左或向右移動的波浪。
動畫緩動 {字符串}
初始動畫的緩動方法，當波浪從底部開始上升時。
animationEasingUpdate {字符串}
其他動畫的緩動方法，例如，當數據值改變和波浪位置改變時。
動畫持續時間 {數字}
初始動畫持續時間，以毫秒為單位。
animationDurationUpdate {數字}
其他動畫持續時間，以毫秒為單位。
大綱.show {布爾}
是否顯示輪廓。
大綱.borderDistance {number}
邊界和內圈之間的距離。
outline.itemStyle.borderColor {字符串}
邊框顏色。
outline.itemStyle.borderWidth {number}
邊框寬度。
outline.itemStyle.shadowBlur {number}
輪廓陰影模糊大小。
outline.itemStyle.shadowColor {字符串}
輪廓陰影顏色。
backgroundStyle.color {字符串}
背景填充顏色。
backgroundStyle.borderWidth {字符串}
背景描邊線寬。
backgroundStyle.borderColor {字符串}
背景描邊線寬。
backgroundStyle.itemStyle.shadowBlur {number}
背景陰影模糊大小。
backgroundStyle.itemStyle.shadowColor {字符串}
背景陰影顏色。
backgroundStyle.itemStyle.opacity {number}
背景不透明度。
itemStyle.opacity {number}
波浪不透明度。
itemStyle.shadowBlur {number}
波浪陰影寬度。
itemStyle.shadowColor {字符串}
波浪陰影顏色。
強調.itemStyle.opacity {number}
懸停時波浪不透明度。
標簽.show {布爾}
是否顯示標簽文本。
label.color {字符串}
在背景上顯示時文本的顏色。
label.insideColor {字符串}
在波形上顯示時文本的顏色。
label.fontSize {數字}
標簽字體大小。
標簽.fontWeight {字符串}
標簽字體粗細。
標簽對齊{字符串}
文本對齊，應該是'left', 'center', 或'right'.
label.baseline {字符串}
文本垂直對齊，應為'top'、'middle'或'bottom'。
標簽位置 {string|string[]}
文本位置默認在中心。label.position可以設置為'inside', 'left', 'right', 'top', 'bottom', 或水平和垂直位置，例如['10%', '20%']，表示'10%'左側和'20%'頂部。
數據時代，收集和使用數據的需求正在爆發式增長，數據可視化也變得愈加重要。開發人員在想方設法將不同數據庫中的記錄整合到儀表板和漂亮的圖表中，向人們快速直觀地展示信息。
在過去十年中數據可視化技術不斷改進，結果涌現了很多高水平的圖表庫。
21 世紀初期，人們使用服務端圖像位圖來生成圖表。那時像 Silverlight 和 Flash 這樣的插件提供了豐富的交互式圖表體驗，代價是減少電池壽命、拖慢下載速度并耗費更多系統資源。
移動設備興起之后，移動平臺不再支持插件并開始轉向開放客戶端技術，這些技術可以在任何平臺上運行，成為了開發人員的首選。同時，觸摸手勢縮放和非常高分辨率的屏幕開始流行，使得無關分辨率的矢量圖表廣受歡迎。
隨之而來的就是數據可視化的時代，SVG 可擴展矢量圖像和 JavaScript 成為主角。今天的圖表技術可支持所有瀏覽器平臺，支持交互性和動畫，并且不需要特殊的插件。這些圖表在高分辨率設備中也有很好的顯示效果。我們可以在 JS 開發中使用許多 JavaScript 圖表庫實現這些目標。
市面上有很多 JavaScript 圖表庫，本文則列出了其中的幾款佼佼者，可以用在你的新項目中。
以下就是 2019 年的頂級 Javascript 圖表庫名單。
D3.js 是一個圖形 JavaScript 庫，功能眾多，十分強大。你可以用它對文檔做數據驅動的轉換，然后將任意數據綁定到 DOM 上。
D3 是非常優秀的圖表庫。它有一些較小的技術模塊，如顏色、軸、輪廓、層次結構、多邊形、緩動等。這也意味著你需要學習很多知識才能用好它，上手并不容易。
即使用它創建簡單的圖表也可能需要復雜的步驟。你需要明確定義包含圖表項和軸在內的所有元素。它提供了一些示例，教你如何使用 CSS 來設置圖表元素的樣式。開發者無法自動應用基于圖表的功能。
如果你想從零開始設計復雜的圖表，完全按照自己的想法控制所有元素，那么這個庫就是你的首選。但如果時間緊迫，從頭開始解決數據可視化項目需求可能就不是什么好主意了。
作為圖表庫來說，D3.js 可以充當構建塊。開發者可以用 D3 與 NVD3 一類的方案配合工作。這個圖表庫完全免費并開源。
Highcharts 是市面流行的 JavaScript 圖表庫之一，并被許多大公司采用。為了提供對 IE6 到 IE8 的兼容性，它先使用 SVG 然后轉向 VML 來生成圖表。它的示例圖表帶有一些很棒的功能，但看起來不怎么吸引人。它的文檔里有很多 API 文檔教程和相關主題。
它的 API 易于使用，開發者可以使用配置選項來開發圖表。對于個人和非商業用途，Highcharts 可免費使用；證券行業等用途需要商業許可，而甘特圖和地圖圖表則需要單獨的許可證。
Chart.js 是一個開源 JavaScript 庫，支持 8 種類型的圖表。它只有 60kb，是一個非常小的 JS 庫。它支持的圖表類型包括雷達、內聯圖表、餅圖、條形圖、散點圖、面積圖、氣泡和混合等。它還支持時間序列。在呈現層面，它使用 canvas 元素并能響應窗口大小調整縮放比率。它對 IE9 向后兼容。要兼容 IE7 的話也可以使用 Polyfills。
初次使用它的示例時還能看到現代感的初始動畫。實時添加數據點或序列時有平滑的動畫效果。你可以調用 update() 函數來修改圖表選項并重繪圖表。
在它的網站中沒有展示示例源代碼，但可以在 GitHub 倉庫中找到。它的 API 簡潔直觀。用戶使用配置選項來創建和修改圖表。它的文檔內容翔實，附帶代碼片段和屬性 API 的教程。
這個庫可免費用于商業和個人用途。它是開源項目。但對于更高級別的需求來說，它提供的圖表類型可能有點少。
......
點擊“了解更多”，查看全文
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
