ECharts數(shù)據(jù)可視化基本使用之常用圖表類(lèi)型
內(nèi)容有點(diǎn)長(zhǎng)，建議先收藏
一.柱狀圖
柱狀圖是通過(guò)條形長(zhǎng)度來(lái)表現(xiàn)數(shù)據(jù)大小的一種圖表，柱狀圖的設(shè)置是將series里的type設(shè)置為bar
1.基本柱狀圖
1.1最簡(jiǎn)單的柱狀圖
設(shè)置好type即可
<script type="text/javascript">
// 因?yàn)樵揹emo會(huì)經(jīng)常更該，所以要銷(xiāo)毀前一個(gè)圖表
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多系列柱狀圖
但我們?cè)趕eries系列中設(shè)置多個(gè)type為bar時(shí)，就有多個(gè)柱狀圖
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）柱條樣式
柱條的樣式可以通過(guò) series.itemStyle 設(shè)置，包括：
- 柱條的顏色（color）；
- 柱條的描邊顏色（borderColor）、寬度（borderWidth）、樣式（borderType）；
- 柱條圓角的半徑（barBorderRadius）；
- 柱條透明度（opacity）；
- 陰影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
series :[
//單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
{type:'bar',
data:[12,31,67,{
value :34,
itemStyle:{
color: 'green',
borderColor: 'backer',
opacity: 0.6
}
},13,42,36,]},
//全局設(shè)置柱狀樣式
{type:'bar',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]（2）柱條的寬度和高度
柱條的寬度用barwidth表示，barwidth：20%，表示柱每個(gè)條寬度占類(lèi)目的20%；高度用barheght表示，方法和寬度一樣
（3）柱條間距
柱條間距分為兩種，一種是不同系列在同一類(lèi)目下的距離 barGap，另一種是類(lèi)目與類(lèi)目的距離 barCategoryGap。
type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%'例如上面：barGap：‘20%’表示不同系列在同一類(lèi)目下柱條間距占類(lèi)目的20%，而barCategroyGap：‘40%’表示每個(gè)類(lèi)目右側(cè)的柱條空間占類(lèi)目的40%
（4）為柱條添加背景顏色
添加背景圖片可以簡(jiǎn)單地用showBackground開(kāi)啟，并且可以通過(guò) backgroundStyle配置。
series :[
//單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
{type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%',
//背景顏色設(shè)置
showBackground:true,
backgroundstyle:{
color: 'rgba(220,220,220,0.8)'
}
},
//全局設(shè)置柱狀樣式
{type:'bar',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]
2.堆疊柱狀圖
堆疊柱狀圖不僅可以表現(xiàn)不同系列的值，還可以表現(xiàn)它們之和的變化，堆疊柱狀圖的設(shè)置很簡(jiǎn)單，只要在一個(gè)系列中用stack且設(shè)置堆疊的參數(shù)，就可以實(shí)現(xiàn)多個(gè)具有相同stack參數(shù)的系列進(jìn)行堆疊
series :[
//單個(gè)數(shù)據(jù)設(shè)置柱狀樣式
{type:'bar',
data:[12,31,67,34,13,42,36,],
barGap:'20%',
barCategoryGap:'40%',
//背景顏色設(shè)置
showBackground:true,
backgroundstyle:{
color: 'rgba(220,220,220,0.8)'
},
stack:'x',
},
//全局設(shè)置柱狀樣式
{type:'bar',
stack: 'x',
data:[23,15,67,34,17,53,41],
itemStyle:{
color:'#91cc3',
borderColor:'red',
borderType:'dashsed',
opacity:0.5
}}
]
3.動(dòng)態(tài)排序柱狀圖
- 柱狀圖系列的 realtimeSort 設(shè)為 true，表示開(kāi)啟該系列的動(dòng)態(tài)排序效果
- yAxis.inverse 設(shè)為 true，表示 Y 軸從下往上是從小到大的排列
- yAxis.animationDuration 建議設(shè)為 300，表示第一次柱條排序動(dòng)畫(huà)的時(shí)長(zhǎng)
- yAxis.animationDurationUpdate 建議設(shè)為 300，表示第一次后柱條排序動(dòng)畫(huà)的時(shí)長(zhǎng)
- 如果想只顯示前 n 名，將 yAxis.max 設(shè)為 n - 1，否則顯示所有柱條
- xAxis.max 建議設(shè)為 'dataMax' 表示用數(shù)據(jù)的最大值作為 X 軸最大值，視覺(jué)效果更好
- 如果想要實(shí)時(shí)改變標(biāo)簽，需要將 series.label.valueAnimation 設(shè)為 true
- animationDuration 設(shè)為 0，表示第一份數(shù)據(jù)不需要從 0 開(kāi)始動(dòng)畫(huà)（如果希望從 0 開(kāi)始則設(shè)為和 animationDurationUpdate 相同的值）
- animationDurationUpdate 建議設(shè)為 3000 表示每次更新動(dòng)畫(huà)時(shí)長(zhǎng)，這一數(shù)值應(yīng)與調(diào)用 setOption 改變數(shù)據(jù)的頻率相同
- 以 animationDurationUpdate 的頻率調(diào)用 setInterval，更新數(shù)據(jù)值，顯示下一個(gè)時(shí)間點(diǎn)對(duì)應(yīng)的柱條排序
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);
動(dòng)態(tài)圖
4.階梯瀑布圖
我們可以使用堆疊的柱狀圖模擬該效果，
假設(shè)數(shù)據(jù)數(shù)組中的值是表示對(duì)前一個(gè)值的增減：
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一個(gè)數(shù)據(jù)是 900，第二個(gè)數(shù)據(jù) 345 表示的是在 900 的基礎(chǔ)上增加了 345……將這個(gè)數(shù)據(jù)展示為階梯瀑布圖時(shí)，我們可以使用三個(gè)系列：第一個(gè)是不可交互的透明系列，用來(lái)實(shí)現(xiàn)“懸空”的柱狀圖效果；第二個(gè)系列用來(lái)表示正數(shù)；第三個(gè)系列用來(lái)表示負(fù)數(shù)。
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'
}
}
]
};
二.折線(xiàn)線(xiàn)圖
1.基礎(chǔ)折線(xiàn)圖
1.1最基礎(chǔ)的折線(xiàn)圖
折線(xiàn)的實(shí)現(xiàn)方式為橫坐標(biāo)設(shè)置為category，縱坐標(biāo)設(shè)置為value，同時(shí)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笛卡爾坐標(biāo)系中的折線(xiàn)圖
如果我們希望折線(xiàn)圖在橫坐標(biāo)和縱坐標(biāo)上都是連續(xù)的，即在笛卡爾坐標(biāo)系中，應(yīng)該如何實(shí)現(xiàn)呢？答案也很簡(jiǎn)單，只要把 series 的 data 每個(gè)數(shù)據(jù)用一個(gè)包含兩個(gè)元素的數(shù)組表示就行了。
option={
xAxis:{},
yAxis:{},
series:{
type:'line',
data: [
[10,10],
[30,30],
[60,10],
[90,30],
[120,10]
],
},
}
1.3折線(xiàn)圖樣式設(shè)置
折線(xiàn)的樣式
折線(xiàn)圖中折線(xiàn)的樣式可以通過(guò) lineStyle 設(shè)置?？梢詾槠渲付伾⒕€(xiàn)寬、折線(xiàn)類(lèi)型、陰影、不透明度等等。這里，我們以設(shè)置顏色（color）、線(xiàn)寬（width）和折線(xiàn)類(lèi)型（type）為例說(shuō)明。
type參數(shù)：
'solid' 實(shí)線(xiàn)'dashed' 點(diǎn)圓線(xiàn)'dotted' 點(diǎn)方線(xiàn)
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'
}
}
}
]
};
數(shù)據(jù)點(diǎn)的樣式
數(shù)據(jù)點(diǎn)的樣式可以通過(guò)series.itemStyle 指定填充顏色（color）、描邊顏色（borderColor）、描邊寬度（borderWidth）、描邊類(lèi)型（borderType）、陰影（shadowColor）、不透明度（opacity）等。
1.4在數(shù)據(jù)點(diǎn)處顯示數(shù)值
在系列中，這數(shù)據(jù)點(diǎn)的標(biāo)簽通過(guò) series.label 屬性指定。如果將 label 下的 show 指定為true，則表示該數(shù)值默認(rèn)時(shí)就顯示；如果為 false，而 series.emphasis.label.show 為 true，則表示只有在鼠標(biāo)移動(dòng)到該數(shù)據(jù)時(shí)，才顯示數(shù)值。
例如：鼠標(biāo)移動(dòng)時(shí)顯示值
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
emphasis:{
label:{
show:true,
}
}
}
]
};又例如顯示數(shù)值圖：
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, 28, 23, 19],
type: 'line',
label:{
show:true,
}
}
]
};
1.5空數(shù)據(jù)
我們使用字符串 '-' 表示空數(shù)據(jù)，這對(duì)其他系列的數(shù)據(jù)也是適用的
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
series: [
{
data: [10, 22, '-', 23, 19],
type: 'line',
label:{
show:true,
}
}
]
};
2.堆疊折線(xiàn)圖
堆疊折線(xiàn)圖也是用系列的 stack 設(shè)置哪些系列堆疊在一起
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'
}
]
};
但是不同的是，如果不加說(shuō)明的話(huà)，我們很難判斷出這是一個(gè)堆疊折線(xiàn)圖，還是一個(gè)普通的折線(xiàn)圖。所以，對(duì)于堆疊折線(xiàn)圖而言，一般建議使用區(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ū)域面積圖將折線(xiàn)到坐標(biāo)軸的空間設(shè)置背景色，用區(qū)域面積表達(dá)數(shù)據(jù)。
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.平滑曲線(xiàn)圖
使用時(shí)，只需要將折線(xiàn)圖系列的 smooth 屬性設(shè)置為 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.階梯線(xiàn)圖
系列的 step 屬性用來(lái)表征階梯線(xiàn)圖的連接類(lèi)型，它共有三種取值：'start'、'middle' 和 'end'，分別表示在當(dāng)前點(diǎn)，當(dāng)前點(diǎn)與下個(gè)點(diǎn)的中間點(diǎn)，下個(gè)點(diǎn)拐彎。
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]
}
]
};
三.餅圖
餅圖主要用于表現(xiàn)不同類(lèi)目的數(shù)據(jù)在總和中的占比。每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例
1.基礎(chǔ)餅圖
餅圖的配置和折線(xiàn)圖、柱狀圖略有不同，不再需要配置坐標(biāo)軸，而是把數(shù)據(jù)名稱(chēng)和值都寫(xiě)在系列中
option = {
series:[
{
type:'pie',
data:[
{value:34,name:'星期一'},
{value:26,name:'星期二'},
{value:19,name:'星期三'},
],
}
],
};
數(shù)據(jù)為0的餅圖
在默認(rèn)情況下，如果數(shù)據(jù)值和為 0，會(huì)顯示平均分割的扇形。比如，如果有 4 個(gè)數(shù)據(jù)項(xiàng)，并且每個(gè)數(shù)據(jù)項(xiàng)都是 0，則每個(gè)扇形都是 90°。如果我們希望在這種情況下不顯示任何扇形，可以將 series.stillShowZeroSum 設(shè)為 false。
如果希望扇形對(duì)應(yīng)的標(biāo)簽也不顯示，可以將 series.label.show 設(shè)為 false。
2.圓環(huán)圖
圓環(huán)圖同樣可以用來(lái)表示數(shù)據(jù)占總體的比例，相比于餅圖，它中間空余的部分可以用來(lái)顯示一些額外的文字等信息，因而也是一種常用的圖表類(lèi)型。設(shè)置圓環(huán)圖時(shí)只要在series設(shè)置radius即可，形式為series：['%','%'],前一個(gè)百分比表示鏤空的部分，后一個(gè)百分比表示整體大小
option = {
series:[
{
type:'pie',
data:[
{value:34,name:'星期一'},
{value:26,name:'星期二'},
{value:19,name:'星期三'},
],
radius:['40%','70%'],
}
],
};
如果半徑是數(shù)組，其中的兩項(xiàng)也可以一項(xiàng)是數(shù)值，另一項(xiàng)是百分比形式的字符串。但是這樣可能導(dǎo)致在某些分辨率下，內(nèi)半徑小于外半徑。ECharts 會(huì)自動(dòng)使用小的一項(xiàng)作為內(nèi)半徑，但是仍應(yīng)小心這樣可能會(huì)導(dǎo)致的非預(yù)期效果。
1.在圓環(huán)圖中間顯示高亮扇形對(duì)應(yīng)的文字
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 是用來(lái)控制是否由 ECharts 調(diào)整標(biāo)簽位置以實(shí)現(xiàn)防止標(biāo)簽重疊。它的默認(rèn)值是 true，而在這里，我們不希望標(biāo)簽位置調(diào)整到不是中間的位置，因此我們需要將其設(shè)為 false。
這樣，圓環(huán)圖中間會(huì)顯示高亮數(shù)據(jù)的 name 值。
3.南丁格爾圖（玫瑰圖）
南丁格爾圖又稱(chēng)玫瑰圖，通常用弧度相同但半徑不同的扇形表示各個(gè)類(lèi)目。
ECharts 可以通過(guò)將餅圖的 series.roseType 值設(shè)為 'area' 實(shí)現(xiàn)南丁格爾圖，其他配置項(xiàng)和餅圖是相同的。
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'
}
]
};
四.散點(diǎn)圖
散點(diǎn)圖，也是一種常見(jiàn)的圖表類(lèi)型。散點(diǎn)圖由許多“點(diǎn)”組成，有時(shí)，這些點(diǎn)用來(lái)表示數(shù)據(jù)在坐標(biāo)系中的位置（比如在笛卡爾坐標(biāo)系下，表示數(shù)據(jù)在 x 軸和 y 軸上的坐標(biāo)；在地圖坐標(biāo)系下，表示數(shù)據(jù)在地圖上的某個(gè)位置等）；有時(shí)，這些點(diǎn)的大小、顏色等屬性也可以映射到數(shù)據(jù)值，用以表現(xiàn)高維數(shù)據(jù)。
基礎(chǔ)散點(diǎn)圖
1.最簡(jiǎn)單的散點(diǎn)圖
下面是一個(gè)橫坐標(biāo)為類(lèi)目軸、縱坐標(biāo)為數(shù)值軸的最簡(jiǎn)單的散點(diǎn)圖配置：
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
2.笛卡爾坐標(biāo)系下的散點(diǎn)圖
數(shù)據(jù)的橫坐標(biāo)和縱坐標(biāo)一同寫(xiě)在 data 中即可
option = {
xAxis: {},
yAxis: {},
series: [
{
type: 'scatter',
data: [
[10, 5],
[0, 8],
[6, 10],
[2, 12],
[8, 9]
]
}
]
};
3.散點(diǎn)圖樣式設(shè)置
圖形的形狀
圖形（symbol）指的是散點(diǎn)圖中數(shù)據(jù)“點(diǎn)”的形狀。有三類(lèi)圖形可選，一種是 ECharts 內(nèi)置形狀，第二種是圖片，第三種是 SVG 的路徑。
ECharts 內(nèi)置形狀包括：圓形、矩形、圓角矩形、三角形、菱形、大頭針形、箭頭形，分別對(duì)應(yīng)'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用內(nèi)置形狀時(shí)，只要將 symbol 屬性指定為形狀名稱(chēng)對(duì)應(yīng)的字符串即可。
如果想要將圖形指定為任意的圖片，以 'image://' 開(kāi)頭，后面跟圖片的絕對(duì)或相對(duì)地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。
除此之外，還支持 SVG 的路徑作為矢量圖形，將 symbol 設(shè)置為以 'path://' 開(kāi)頭的 SVG 路徑即可。使用矢量圖形的好處是，圖片不會(huì)因?yàn)榭s放而產(chǎn)生鋸齒或模糊，并且通常而言比圖片形式的文件大小更小。路徑的查看方法為，打開(kāi)一個(gè) SVG 文件，找到形如 <path d="M… L…"></path> 的路徑，將 d 的值添加在 'path://' 后即可。
下面，我們展示一個(gè)將圖形設(shè)置為矢量愛(ài)心形狀的方式。
首先，我們需要一個(gè)愛(ài)心的 SVG 文件，可以使用矢量編輯軟件繪制，或者從網(wǎng)上下載到相關(guān)資源。其內(nèi)容如下：
<?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 控制。它既可以是一個(gè)表示圖形大小的像素值，也可以是一個(gè)包含兩個(gè) number 元素的數(shù)組，分別表示圖形的寬和高。
除此之外，它還可以是一個(gè)回調(diào)函數(shù)，其參數(shù)格式為：
(value: Array | number, params: Object) => number | Array;
第一個(gè)參數(shù)為數(shù)據(jù)值，第二個(gè)參數(shù)是數(shù)據(jù)項(xiàng)的其他參數(shù)。
在下面的例子中，我們將散點(diǎn)圖點(diǎn)的大小設(shè)置為與其數(shù)據(jù)值成正比
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;
}
}
]
};
總結(jié)
到此這篇關(guān)于ECharts數(shù)據(jù)可視化基本使用之常用圖表類(lèi)型的文章就介紹到這了,更多相關(guān)ECharts常用圖表類(lèi)型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序之電影影評(píng)小程序制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
基于JavaScript操作DOM常用的API小結(jié)
DOM（Document Object Model）即文檔對(duì)象模型，針對(duì) HTML 和 XML 文檔的 API（應(yīng)用程序接口）。本篇文章給大家介紹javascript操作dom常用的api小結(jié)，對(duì)javascript dom api相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽(tīng)函數(shù)的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽(tīng)函數(shù)的方法,結(jié)合實(shí)例形式分析了javascript事件綁定的常用技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
作為一個(gè)程序員，代碼實(shí)現(xiàn)才是能力體現(xiàn)，在大部分面試的時(shí)候，我們都會(huì)被要求手寫(xiě)代碼實(shí)現(xiàn)一個(gè)功能，本文總結(jié)了一下經(jīng)常被面試官問(wèn)到的節(jié)流和防抖功能的實(shí)現(xiàn)，分享給有需要的小伙伴2023-07-07
十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理
這篇文章主要介紹了十個(gè)免費(fèi)的web前端開(kāi)發(fā)工具詳細(xì)整理的相關(guān)資料,希望通過(guò)本文大家能夠理解使用免費(fèi)web開(kāi)發(fā)工具，需要的朋友可以參考下2017-09-09
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了兩個(gè)數(shù)組去重的JS代碼，有需要的朋友可以參考一下2013-12-12
JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱(chēng)字面常量，是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù)，提供一個(gè)存取信息的容器。2009-07-07
動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法
這篇文章主要介紹了動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法,需要的朋友可以參考下2014-05-05