一、echarts玫瑰圖扇形
echarts玫瑰圖是一種數據可視化類型，可以將數據以扇形的形式展現，每個扇形的大小表示對應數據的大小。可以通過設置扇形的半徑大小，扇形的顏色，以及扇形的角度來控制玫瑰圖的展示效果。
// echarts玫瑰圖扇形示例代碼
option = {
series: [{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 274, name: '聯盟廣告'},
{value: 235, name: '視頻廣告'},
{value: 400, name: '搜索引擎'}
]
}]
};二、echarts玫瑰圖設置
在使用echarts玫瑰圖時，還可以通過一些設置來調整玫瑰圖的展示效果。比如，可以設置扇形之間的間隔大小，設置扇形開始的角度，以及設置玫瑰圖的標題等。
// echarts玫瑰圖設置示例代碼
option = {
title: {
text: 'echarts玫瑰圖',
subtext: '數據來源',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 274, name: '聯盟廣告'},
{value: 235, name: '視頻廣告'},
{value: 400, name: '搜索引擎'}
]
}
]
};三、echarts玫瑰圖數據為0怎麼處理
在使用echarts玫瑰圖時，如果有些數據為0，玫瑰圖會出現異常的展示效果，此時可以通過將這些數據轉換為極小值來避免玫瑰圖出現異常。
// echarts玫瑰圖數據為0處理示例代碼
var data = [350, 0, 0, 0, 0];
var minNum = 0.01;
data = data.map(function(item) {
if (item === 0) {
return minNum;
} else {
return item;
}
});
option = {
series: [{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: data[0], name: '直接訪問'},
{value: data[1], name: '郵件營銷'},
{value: data[2], name: '聯盟廣告'},
{value: data[3], name: '視頻廣告'},
{value: data[4], name: '搜索引擎'}
]
}]
};四、echarts玫瑰圖的label設置
在echarts玫瑰圖中，可以通過設置label屬性來調整扇形中文本顯示的位置、顏色、大小等屬性。
// echarts玫瑰圖label設置示例代碼
option = {
series: [{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
color: '#000',
formatter: '{b}: {c} ({d}%)',
fontSize: 14
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 10,
length2: 10,
lineStyle: {
color: '#999'
}
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 274, name: '聯盟廣告'},
{value: 235, name: '視頻廣告'},
{value: 400, name: '搜索引擎'}
]
}]
};五、echarts玫瑰圖設置圓角
在echarts玫瑰圖中，還可以通過設置圓角屬性來給扇形添加圓角效果，讓展示效果更加美觀。
// echarts玫瑰圖設置圓角示例代碼
option = {
series: [{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
color: '#000',
formatter: '{b}: {c} ({d}%)',
fontSize: 14
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 10,
length2: 10,
lineStyle: {
color: '#999'
}
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 274, name: '聯盟廣告'},
{value: 235, name: '視頻廣告'},
{value: 400, name: '搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
}
}
}]
};六、echarts玫瑰圖拯救極小值
當數據中存在極小值時，通過設置最小值的處理方法來達到較好的展示效果。
// echarts玫瑰圖拯救極小值示例代碼
let data = [350, 0, 0, 0, 0];
let minNum = 0.01;
data = data.map((item) => {
if (item === 0) {
return minNum;
} else {
return item;
}
});
let total = data.reduce((total, num) => total + num);
let angleArr = data.map((num) => num / total * 360);
let option = {
tooltip: {
show: true,
formatter: "{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
right: 10,
top: 20,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [{
name: '訪問來源',
type: 'pie',
radius: [30, 110],
center: ['50%', '50%'],
roseType: 'radius',
label: {
color: '#333',
formatter: '{b}: {c} ({d}%)'
},
data: [
{
value: data[0],
name: '直接訪問'
},
{
value: data[1],
name: '郵件營銷'
},
{
value: data[2],
name: '聯盟廣告'
},
{
value: data[3],
name: '視頻廣告'
},
{
value: data[4],
name: '搜索引擎'
}]
}]
};七、echarts餅圖
echarts餅圖是一種數據可視化類型，可以將數據以餅形的形式展現。與玫瑰圖不同的是，餅圖的扇形大小表示對應數據佔總數據的比重。
// echarts餅圖示例代碼
option = {
title: {
text: 'echarts餅圖',
subtext: '數據來源',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 274, name: '聯盟廣告'},
{value: 235, name: '視頻廣告'},
{value: 400, name: '搜索引擎'}
]
}
]
};八、echarts折線圖
echarts折線圖是一種數據可視化類型，可以將數據以一系列折線的形式展現。折線圖可以用來展示數據在時間軸上的分布趨勢。
// echarts折線圖示例代碼
option = {
title: {
text: 'echarts折線圖'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'郵件營銷',
type:'line',
stack: '總量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'聯盟廣告',
type:'line',
stack: '總量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'視頻廣告',
type:'line',
stack: '總量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/236598.html
微信掃一掃 
支付寶掃一掃 