1、Echarts使用dataset數據集管理項目
dataset組件用於單獨的數據集聲明,從而數據可以單獨管理,被多個組件復用並且可以基於數據指定數據到視覺的映射。
下面是一個最簡單的 dataset 的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數據。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 聲明一個 X 軸,類目軸(category)。默認情況下,類目軸對應到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸,數值軸。
yAxis: {},
// 聲明多個 bar 系列,默認情況下,每個系列會自動對應到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>



