ECharts數據可視化基本使用之常用圖表類型
內容有點長，建議先收藏
一.柱狀圖
柱狀圖是通過條形長度來表現數據大小的一種圖表，柱狀圖的設置是將series里的type設置為bar
1.基本柱狀圖
1.1最簡單的柱狀圖
設置好type即可
<script type="text/javascript">
// 因為該demo會經常更該，所以要銷毀前一個圖表
echarts.init(document.getElementById('div')).dispose();
//定義
var myChart = echarts.init(document.getElementById('div'));
var option= {
xAxis:{
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
},
yAxis:{},
series :[
{type:'bar',
data:[12,31,67,32,13,42,36,]}
]
}
myChart.setOption(option);
</script>
1.2多系列柱狀圖
但我們在series系列中設置多個type為bar時，就有多個柱狀圖
var option= {
xAxis:{
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
},
yAxis:{},
series :[
{type:'bar',
data:[12,31,67,32,13,42,36,]},
{type:'bar',
data:[23,15,67,34,17,53,41]}
]
}
1.3柱狀圖的樣式
（1）柱條樣式
柱條的樣式可以通過 series.itemStyle 設置，包括：
- 柱條的顏色（color）；
- 柱條的描邊顏色（borderColor）、寬度（borderWidth）、樣式（borderType）；
- 柱條圓角的半徑（barBorderRadius）；
- 柱條透明度（opacity）；
- 陰影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
series :[
//單個數據設置柱狀樣式
{type:'bar',
data:[12,31,67,{
value :34,
itemStyle:{
color: 'green',
borderColor: 'backer',
opacity: 0.6
}
},13,42,36,]},
//全局設置柱狀樣式
{type:'bar',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]（2）柱條的寬度和高度
柱條的寬度用barwidth表示，barwidth：20%，表示柱每個條寬度占類目的20%；高度用barheght表示，方法和寬度一樣
（3）柱條間距
柱條間距分為兩種，一種是不同系列在同一類目下的距離 barGap，另一種是類目與類目的距離 barCategoryGap。
type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%'例如上面：barGap：‘20%’表示不同系列在同一類目下柱條間距占類目的20%，而barCategroyGap：‘40%’表示每個類目右側的柱條空間占類目的40%
（4）為柱條添加背景顏色
添加背景圖片可以簡單地用showBackground開啟，并且可以通過 backgroundStyle配置。
series :[
//單個數據設置柱狀樣式
{type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%',
//背景顏色設置
showBackground:true,
backgroundstyle:{
color: 'rgba(220,220,220,0.8)'
}
},
//全局設置柱狀樣式
{type:'bar',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]
2.堆疊柱狀圖
堆疊柱狀圖不僅可以表現不同系列的值，還可以表現它們之和的變化，堆疊柱狀圖的設置很簡單，只要在一個系列中用stack且設置堆疊的參數，就可以實現多個具有相同stack參數的系列進行堆疊
series :[
//單個數據設置柱狀樣式
{type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%',
//背景顏色設置
showBackground:true,
backgroundstyle:{
color: 'rgba(220,220,220,0.8)'
},
stack:'x',
},
//全局設置柱狀樣式
{type:'bar',
stack: 'x',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]
3.動態(tài)排序柱狀圖
- 柱狀圖系列的 realtimeSort 設為 true，表示開啟該系列的動態(tài)排序效果
- yAxis.inverse 設為 true，表示 Y 軸從下往上是從小到大的排列
- yAxis.animationDuration 建議設為 300，表示第一次柱條排序動畫的時長
- yAxis.animationDurationUpdate 建議設為 300，表示第一次后柱條排序動畫的時長
- 如果想只顯示前 n 名，將 yAxis.max 設為 n - 1，否則顯示所有柱條
- xAxis.max 建議設為 'dataMax' 表示用數據的最大值作為 X 軸最大值，視覺效果更好
- 如果想要實時改變標簽，需要將 series.label.valueAnimation 設為 true
- animationDuration 設為 0，表示第一份數據不需要從 0 開始動畫（如果希望從 0 開始則設為和 animationDurationUpdate 相同的值）
- animationDurationUpdate 建議設為 3000 表示每次更新動畫時長，這一數值應與調用 setOption 改變數據的頻率相同
- 以 animationDurationUpdate 的頻率調用 setInterval，更新數據值，顯示下一個時間點對應的柱條排序
var data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
option = {
xAxis: {
max: 'dataMax'
},
yAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2 // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: 'X',
type: 'bar',
data: data,
label: {
show: true,
position: 'right',
valueAnimation: true
}
}
],
legend: {
show: true
},
animationDuration: 3000,
animationDurationUpdate: 3000,
animationEasing: 'linear',
animationEasingUpdate: 'linear'
};
function update() {
var data = option.series[0].data;
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
} else {
data[i] += Math.round(Math.random() * 200);
}
}
myChart.setOption(option);
}
setInterval(function() {
update();
}, 3000);
動態(tài)圖
4.階梯瀑布圖
我們可以使用堆疊的柱狀圖模擬該效果，
假設數據數組中的值是表示對前一個值的增減：
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一個數據是 900，第二個數據 345 表示的是在 900 的基礎上增加了 345……將這個數據展示為階梯瀑布圖時，我們可以使用三個系列：第一個是不可交互的透明系列，用來實現“懸空”的柱狀圖效果；第二個系列用來表示正數；第三個系列用來表示負數。
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
if (data[i] >= 0) {
positive.push(data[i]);
negative.push('-');
} else {
positive.push('-');
negative.push(-data[i]);
}
if (i === 0) {
help.push(0);
} else {
sum += data[i - 1];
if (data[i] < 0) {
help.push(sum + data[i]);
} else {
help.push(sum);
}
}
}
option = {
title: {
text: 'Waterfall'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: (function() {
var list = [];
for (var i = 1; i <= 11; i++) {
list.push('Oct/' + i);
}
return list;
})()
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
stack: 'all',
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: help
},
{
name: 'positive',
type: 'bar',
stack: 'all',
data: positive
},
{
name: 'negative',
type: 'bar',
stack: 'all',
data: negative,
itemStyle: {
color: '#f33'
}
}
]
};
二.折線線圖
1.基礎折線圖
1.1最基礎的折線圖
折線的實現方式為橫坐標設置為category，縱坐標設置為value，同時series的type為line
option={
xAxis:{
type:'category',
data:['A','B','C','D'],
},
yAxis:{
type: 'value',
},
series:{
type:'line',
data: [23,42,11,28,32],
},
}
1.2笛卡爾坐標系中的折線圖
如果我們希望折線圖在橫坐標和縱坐標上都是連續(xù)的，即在笛卡爾坐標系中，應該如何實現呢？答案也很簡單，只要把 series 的 data 每個數據用一個包含兩個元素的數組表示就行了。
option={
xAxis:{},
yAxis:{},
series:{
type:'line',
data: [
[10,10],
[30,30],
[60,10],
[90,30],
[120,10]
],
},
}
1.3折線圖樣式設置
折線的樣式
折線圖中折線的樣式可以通過 lineStyle 設置?？梢詾槠渲付伾⒕€寬、折線類型、陰影、不透明度等等。這里，我們以設置顏色（color）、線寬（width）和折線類型（type）為例說明。
type參數：
'solid' 實線'dashed' 點圓線'dotted' 點方線
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
lineStyle: {
normal: {
color: 'green',
width: 4,
type: 'dotted'
}
}
}
]
};
數據點的樣式
數據點的樣式可以通過series.itemStyle 指定填充顏色（color）、描邊顏色（borderColor）、描邊寬度（borderWidth）、描邊類型（borderType）、陰影（shadowColor）、不透明度（opacity）等。
1.4在數據點處顯示數值
在系列中，這數據點的標簽通過 series.label 屬性指定。如果將 label 下的 show 指定為true，則表示該數值默認時就顯示；如果為 false，而 series.emphasis.label.show 為 true，則表示只有在鼠標移動到該數據時，才顯示數值。
例如：鼠標移動時顯示值
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
emphasis:{
label:{
show:true,
}
}
}
]
};又例如顯示數值圖：
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
label:{
show:true,
}
}
]
};
1.5空數據
我們使用字符串 '-' 表示空數據，這對其他系列的數據也是適用的
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, '-', 23, 19],
type: 'line',
label:{
show:true,
}
}
]
};
2.堆疊折線圖
堆疊折線圖也是用系列的 stack 設置哪些系列堆疊在一起
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{data: [10, 22, 33, 23, 19],
type: 'line',
stack:'x'},
{
data:[23,32,44,32,37],
type:'line',
stack: 'x'
}
]
};
但是不同的是，如果不加說明的話，我們很難判斷出這是一個堆疊折線圖，還是一個普通的折線圖。所以，對于堆疊折線圖而言，一般建議使用區(qū)域填充色以表明堆疊的情況。
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{data: [10, 22, 33, 23, 19],
type: 'line',
stack:'x',
areaStyle:{}},
{
data:[23,32,44,32,37],
type:'line',
stack: 'x',
areaStyle: {}
}
]
};
3.區(qū)域面積圖
區(qū)域面積圖將折線到坐標軸的空間設置背景色，用區(qū)域面積表達數據。
option = {
xAxis: {
type:'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {type:'value'},
series: [
{data: [10, 22, 28, 23, 19],
type: 'line',
label:{show:true},
areaStyle:{}},
{
data:[25, 14, 23, 35, 10],
type:'line',
label: {show:true},
areaStyle: {
color:'#232323',
opacity:0.5
}
}
]
};
4.平滑曲線圖
使用時，只需要將折線圖系列的 smooth 屬性設置為 true 即可。
option = {
xAxis: {
type:'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {type:'value'},
series: [
{data: [10, 22, 28, 23, 19],
type: 'line',
label:{show:true},
smooth:true,
areaStyle:{}},
]
};
5.階梯線圖
系列的 step 屬性用來表征階梯線圖的連接類型，它共有三種取值：'start'、'middle' 和 'end'，分別表示在當前點，當前點與下個點的中間點，下個點拐彎。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
三.餅圖
餅圖主要用于表現不同類目的數據在總和中的占比。每個的弧度表示數據數量的比例
1.基礎餅圖
餅圖的配置和折線圖、柱狀圖略有不同，不再需要配置坐標軸，而是把數據名稱和值都寫在系列中
option = {
series:[
{
type:'pie',
data:[
{value:34,name:'星期一'},
{value:26,name:'星期二'},
{value:19,name:'星期三'},
],
}
],
};
數據為0的餅圖
在默認情況下，如果數據值和為 0，會顯示平均分割的扇形。比如，如果有 4 個數據項，并且每個數據項都是 0，則每個扇形都是 90°。如果我們希望在這種情況下不顯示任何扇形，可以將 series.stillShowZeroSum 設為 false。
如果希望扇形對應的標簽也不顯示，可以將 series.label.show 設為 false。
2.圓環(huán)圖
圓環(huán)圖同樣可以用來表示數據占總體的比例，相比于餅圖，它中間空余的部分可以用來顯示一些額外的文字等信息，因而也是一種常用的圖表類型。設置圓環(huán)圖時只要在series設置radius即可，形式為series：['%','%'],前一個百分比表示鏤空的部分，后一個百分比表示整體大小
option = {
series:[
{
type:'pie',
data:[
{value:34,name:'星期一'},
{value:26,name:'星期二'},
{value:19,name:'星期三'},
],
radius:['40%','70%'],
}
],
};
如果半徑是數組，其中的兩項也可以一項是數值，另一項是百分比形式的字符串。但是這樣可能導致在某些分辨率下，內半徑小于外半徑。ECharts 會自動使用小的一項作為內半徑，但是仍應小心這樣可能會導致的非預期效果。
1.在圓環(huán)圖中間顯示高亮扇形對應的文字
option = {
legend: {
orient: 'vertical',
x: 'left',
data: ['A', 'B', 'C', 'D', 'E']
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
data: [
{ value: 335, name: 'A' },
{ value: 310, name: 'B' },
{ value: 234, name: 'C' },
{ value: 135, name: 'D' },
{ value: 1548, name: 'E' }
]
}
]
};
其中，avoidLabelOverlap 是用來控制是否由 ECharts 調整標簽位置以實現防止標簽重疊。它的默認值是 true，而在這里，我們不希望標簽位置調整到不是中間的位置，因此我們需要將其設為 false。
這樣，圓環(huán)圖中間會顯示高亮數據的 name 值。
3.南丁格爾圖（玫瑰圖）
南丁格爾圖又稱玫瑰圖，通常用弧度相同但半徑不同的扇形表示各個類目。
ECharts 可以通過將餅圖的 series.roseType 值設為 'area' 實現南丁格爾圖，其他配置項和餅圖是相同的。
option = {
series: [
{
type: 'pie',
data: [
{
value: 100,
name: 'A'
},
{
value: 200,
name: 'B'
},
{
value: 300,
name: 'C'
},
{
value: 400,
name: 'D'
},
{
value: 500,
name: 'E'
}
],
roseType: 'area'
}
]
};
四.散點圖
散點圖，也是一種常見的圖表類型。散點圖由許多“點”組成，有時，這些點用來表示數據在坐標系中的位置（比如在笛卡爾坐標系下，表示數據在 x 軸和 y 軸上的坐標；在地圖坐標系下，表示數據在地圖上的某個位置等）；有時，這些點的大小、顏色等屬性也可以映射到數據值，用以表現高維數據。
基礎散點圖
1.最簡單的散點圖
下面是一個橫坐標為類目軸、縱坐標為數值軸的最簡單的散點圖配置：
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
2.笛卡爾坐標系下的散點圖
數據的橫坐標和縱坐標一同寫在 data 中即可
option = {
xAxis: {},
yAxis: {},
series: [
{
type: 'scatter',
data: [
[10, 5],
[0, 8],
[6, 10],
[2, 12],
[8, 9]
]
}
]
};
3.散點圖樣式設置
圖形的形狀
圖形（symbol）指的是散點圖中數據“點”的形狀。有三類圖形可選，一種是 ECharts 內置形狀，第二種是圖片，第三種是 SVG 的路徑。
ECharts 內置形狀包括：圓形、矩形、圓角矩形、三角形、菱形、大頭針形、箭頭形，分別對應'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用內置形狀時，只要將 symbol 屬性指定為形狀名稱對應的字符串即可。
如果想要將圖形指定為任意的圖片，以 'image://' 開頭，后面跟圖片的絕對或相對地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。
除此之外，還支持 SVG 的路徑作為矢量圖形，將 symbol 設置為以 'path://' 開頭的 SVG 路徑即可。使用矢量圖形的好處是，圖片不會因為縮放而產生鋸齒或模糊，并且通常而言比圖片形式的文件大小更小。路徑的查看方法為，打開一個 SVG 文件，找到形如 <path d="M… L…"></path> 的路徑，將 d 的值添加在 'path://' 后即可。
下面，我們展示一個將圖形設置為矢量愛心形狀的方式。
首先，我們需要一個愛心的 SVG 文件，可以使用矢量編輯軟件繪制，或者從網上下載到相關資源。其內容如下：
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
<path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
</svg>option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310],
symbolSize: 20,
symbol:
'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
}
]
};
圖形的大小
圖形大小可以使用 series.symbolSize 控制。它既可以是一個表示圖形大小的像素值，也可以是一個包含兩個 number 元素的數組，分別表示圖形的寬和高。
除此之外，它還可以是一個回調函數，其參數格式為：
(value: Array | number, params: Object) => number | Array;
第一個參數為數據值，第二個參數是數據項的其他參數。
在下面的例子中，我們將散點圖點的大小設置為與其數據值成正比
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310],
symbolSize: function(value) {
return value / 10;
}
}
]
};
總結
到此這篇關于ECharts數據可視化基本使用之常用圖表類型的文章就介紹到這了,更多相關ECharts常用圖表類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序之電影影評小程序制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
DOM（Document Object Model）即文檔對象模型，針對 HTML 和 XML 文檔的 API（應用程序接口）。本篇文章給大家介紹javascript操作dom常用的api小結，對javascript dom api相關知識感興趣的朋友一起學習吧2015-12-12
JavaScript實現為事件句柄綁定監(jiān)聽函數的方法分析
這篇文章主要介紹了JavaScript實現為事件句柄綁定監(jiān)聽函數的方法,結合實例形式分析了javascript事件綁定的常用技巧與注意事項,需要的朋友可以參考下2017-11-11
作為一個程序員，代碼實現才是能力體現，在大部分面試的時候，我們都會被要求手寫代碼實現一個功能，本文總結了一下經常被面試官問到的節(jié)流和防抖功能的實現，分享給有需要的小伙伴2023-07-07
這篇文章主要介紹了十個免費的web前端開發(fā)工具詳細整理的相關資料,希望通過本文大家能夠理解使用免費web開發(fā)工具，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序實現點擊卡片 翻轉效果本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了JS實現燈泡開關特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了兩個數組去重的JS代碼，有需要的朋友可以參考一下2013-12-12
JavaScript常量又稱字面常量，是固化在程序代碼中的信息。變量的主要作用是存取數據，提供一個存取信息的容器。2009-07-07
動態(tài)創(chuàng)建script在IE中緩存js文件時導致編碼的解決方法
這篇文章主要介紹了動態(tài)創(chuàng)建script在IE中緩存js文件時導致編碼的解決方法,需要的朋友可以參考下2014-05-05