這是有實際使用的第三款視覺化模組，是一款開源且可免費商業使用。
功能很多，但是對於新手來說，操作可能較繁瑣。
同樣寫一個水平堆疊圖，ECharts必需每個series設定一次，而Google Chart只需要一次。
不過基本上，重複性高的程式碼都可透過遍歷方式解決。
[ Google chart]
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2030', 1, 0, 1, 0, 1, 0, ''],
['2030', 1, 1, 2, 5, 1, 1, '']
]);
var options = {
width: 600,
height: 400
isStacked:true};
var chart = new google.visualization.BarChart(document.getElementById('container'));
chart.draw(data, options);
}
[ ECharts]
這邊只使用兩個series，score與amount。
option = {
dataset: {
source: [
['yeay', 'score', 'amount'],
[ '2013',89.3, 512],
['2014', 57.1, 754]
]
},series: [
{name: 'score',
type: 'bar',
stack: true,
encode: {x: 1,y: 0}
},
{
name: 'amount',
type: 'bar',
stack: true,
encode: {x: 2,y: 0}
}
]
1.引用js檔
<script src="script/echarts.min.js"></script>
2. 設定chart放置的地方
<div id="main" style="width: 600px;height:400px;"></div>
3. 初始化
renderer可設定svg或canvas
<script>
var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});
</script>
4. 設定檔option
(1) 資料源
有好幾中方式，可為Array、josn物件、片歷方式或dataset，這邊採用dataset與google chart一樣格式來操作。
var option = {
dataset: {
source: [
['yeay', 'score', 'amount'],
[ '2013',89.3, 512],
['2014', 57.1, 754]
]
},
(2) series設定
有個欄位就要設定幾次，這種方式確實比較繁瑣，或許有一次性的方式。
使用堆疊圖
series: [
{name: 'score',
type: 'bar',
stack: true, //stack名稱一樣就可 如'A' 'A'
//barGap:'-100%',//重疊效果
/*itemStyle:{normal:{color:"#FF8849"},label: {
show:true,
position:'top',
formatter:'{c}%'
}},*/
encode: {x: 1,y: 0}
},
{
name: 'amount',
type: 'bar',
stack: true,
encode: {x: 2,y: 0}
}
],
(3) color顏色設定
color: ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"],
(4) x軸與y軸的類型
value: 數值 ; category: 類別
xAxis: {type: 'value'},
yAxis: { type: 'category' },
(5) 圖例
legend:{itemWidth:30,
itemHeight:20,
itemGap: 10,
//x: 'right'
// y: 'bottom',
right: '0%', textStyle: { fontSize: 12, color: '#F1F1F3' }
data:[ 'score', 'amount'], //自定義 data:[ {name: 'score',icon:'rect']
},
(6) 位置、大小與間距
grid: [{
"left": "2%",
"top": "8%",
"width": "90%",
"height": "50%",
"containLabel": true
}]
(7) 自定義的tooltip
tooltip:{
// "show": true
//trigger: 'axis',
formatter: function (d) {
var text = "<div class='tooltip'>"+d.seriesName;
text+="-></br>"+(d.value[d.seriesIndex+1])+"</div>";
return text;
}
(8) 工具列,toolbox: {
"feature": {
"saveAsImage": {
"show": true
},
"dataZoom": {
"show": true
}
},
"show": true,
"left": "40px"
}
5. 執行
myChart.setOption(option);
[非同步資料載入]
從google chart那篇產生的二維資料直接延續ECharts操作
這個方法根據xField數量使用forEach產生Series，可以減少重複貼上手殘造成的錯誤。
先設定好基本的option
非同步載入資料
1. object->二維資料
2.columnHeaders ->FACTORY_A~FACTORY_D
3. 程式碼
var optionSeries = [];
columnHeaders.forEach((d, i) => { //i=0~3 d=FACTORY_A~FACTORY_D
var s = {
name: d,
type: 'bar',
stack: true,
encode: { x: i + 1, y: 0, }
}
optionSeries.push(s);
});
option.dataset.source = object;
option.legend.data = columnHeaders;
option.series = optionSeries;
myChart.setOption(option);
留言列表
