一、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 
