◆ 將數據以圖形圖像的形式展示出來html
◆ 人類能夠對三維及如下的數據產生直觀的感覺python
◆ 便於人們發現與理解數據蘊含的信息git
◆ 便於人們進行討論github
◆ 對於web應用,通常使用echarts,hightcharts,d3.js等web
◆ 對於數據分析利器python , 使用matplotlib等可視化庫bash
◆ 對於非碼農的數據分析員, 通常使用excel等echarts
◆ echarts是由百度開源的JS數據可視化庫,底層依賴ZRender渲染機器學習
◆ 雖然該項目並不能稱爲最優秀的可視化庫,可是在國內市場佔有率很高,故本教程選擇echarts.學習
◆ echarts 提供的圖表很豐富 ,咱們只需使用其中幾個便可動畫
◆ 咱們將經過官網的文檔,共同窗習echarts使用的基本方法
◆ 使用流程:
◆ 咱們主要學習的圖表有折線圖、條形圖、散點圖等
var xAxisData = [2009,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950,1949];
var data = [0.4806,0.4839,0.318,0.4107,0.4835,0.4445,0.3704,0.3389,0.3711,0.2669,0.7317,0.4309,0.7009,0.5725,0.8132,0.5067,0.5415,0.7479,0.6973,0.4422,0.6733,0.6839,0.6653,0.721,0.4888,0.4899,0.5444,0.3932,0.3807,0.7184,0.6648,0.779,0.684,0.3928,0.4747,0.6982,0.3742,0.5112,0.597,0.9132,0.3867,0.5934,0.5279,0.2618,0.8177,0.7756,0.3669,0.5998,0.5271,1.406,0.6919,0.4868,1.1157,0.9332,0.9614,0.6577,0.5573,0.4816,0.9109,0.921];
option = {
title: {
text: '柱狀圖動畫延遲'
},
legend: {
data: ['beijing'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: 'beijing',
type: 'bar',
data: data,
animationDelay: function (idx) {
return idx * 10;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
複製代碼
var xAxisData = [2009,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950,1949];
var data = [0.4806,0.4839,0.318,0.4107,0.4835,0.4445,0.3704,0.3389,0.3711,0.2669,0.7317,0.4309,0.7009,0.5725,0.8132,0.5067,0.5415,0.7479,0.6973,0.4422,0.6733,0.6839,0.6653,0.721,0.4888,0.4899,0.5444,0.3932,0.3807,0.7184,0.6648,0.779,0.684,0.3928,0.4747,0.6982,0.3742,0.5112,0.597,0.9132,0.3867,0.5934,0.5279,0.2618,0.8177,0.7756,0.3669,0.5998,0.5271,1.406,0.6919,0.4868,1.1157,0.9332,0.9614,0.6577,0.5573,0.4816,0.9109,0.921];
option = {
title: {
text: '柱狀圖動畫延遲'
},
legend: {
data: ['beijing','shanghai'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
}
},
yAxis: {
},
series: [
{
name: 'beijing',
type: 'bar',
data: data,
animationDelay: function (idx) {
return idx * 10;
}
},
{
name: 'shanghai',
type: 'bar',
data: data,
animationDelay: function (idx) {
return idx * 10;
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
複製代碼