饼图
饼图着重表示占比。一般饼图只需要修改点。
与其他图表相同,也受itemStyle的调节。
相比于其他表,饼图特有的属性有 :
angle系列:startAngle,endAngle,minAngle,padAngle,minShowLabelAngle,
clockwise顺逆时针
半径和中心 radius,center
基本使用
const d1 = [
{
value: 1000,
name: "d1",
},
{
value: 700,
name: "d2",
},
{
value: 300,
name: "d3",
},
{
value: 100,
name: "d4",
},
{
value: 200,
name: "d4",
},
{
value: 1,
name: "d6",
},
];
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
},
],
};
minAngle:最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。
minShowLabelAngle: 小于这个角度(0 ~ 360)的扇区,不显示标签(label 和 labelLine)。
const d1 = [
{
value: 1000,
name: "d1",
},
{
value: 700,
name: "d2",
},
{
value: 300,
name: "d3",
},
{
value: 100,
name: "d4",
},
{
value: 200,
name: "d5",
},
{
value: 1,
name: "d6",
},
];
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
label: {
show: true,
},
minAngle: 10,
// minShowLabelAngle: 6,
},
],
};
startAngle, endAngle 开始角度和结束角度
const d1 = [
{
value: 1000,
name: "d1",
},
{
value: 700,
name: "d2",
},
{
value: 300,
name: "d3",
},
{
value: 100,
name: "d4",
},
{
value: 200,
name: "d5",
},
{
value: 1,
name: "d6",
},
];
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
label: {
show: true,
},
minAngle: 10,
//minShowLabelAngle: 6,
startAngle: 180,
endAngle: 360,
},
],
};
radius圆环内圆半径和外圆半径
padAngle 饼图扇区之间的间隔角度
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
label: {
show: true,
},
minAngle: 5,
//minShowLabelAngle: 6,
startAngle: 180,
endAngle: 360,
padAngle: 5,
radius: ["60%", "70%"],
itemStyle: {
borderRadius: 10,
},
},
],
};
可以通过调整圆环的半径来改变圆环的大小,
center 饼图的中心(圆心)坐标,
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
label: {
show: true,
},
minAngle: 5,
//minShowLabelAngle: 6,
startAngle: 180,
endAngle: 360,
padAngle: 5,
radius: ["60%", "90%"],
center: ["50%", "50%"],
itemStyle: {
borderRadius: 10,
},
},
],
};
玫瑰图
玫瑰图是饼图的变种,需要设置roseType
roseType是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式,‘radius’和’area’
let options = {
series: [
{
name: "d1",
type: "pie",
data: d1,
label: {
show: true,
position: "inside",
},
minAngle: 5,
//minShowLabelAngle: 6,
startAngle: 180,
endAngle: 360,
padAngle: 5,
radius: ["20%", "90%"],
itemStyle: {
borderRadius: 10,
},
roseType: "radius",
},
],
};
散点图
散点图着重表达数据本身,数据可以是大量非线性数据。
散点图也会受symbol和itemStyle的调节
其他配置几乎与折线图一致。
const d2 = [
[10.0, 3.4],
[9.3, 4],
[4, 3.4],
[5.4, 2.3],
[7.6, 6, 5],
[9.8, 5.6],
[11, 6.6],
[12.2, 9.8],
];
let options = {
yAxis: {},
xAxis: {},
series: [
{
name: "d1",
type: "scatter",
data: d2,
},
],
};
修改点的大小
let options = {
yAxis: {},
xAxis: {},
series: [
{
name: "d1",
type: "scatter",
data: d2,
symbolSize: (value) => {
console.log(value);
return (value[0] + value[1]) * 2;
},
},
],
};
涟漪散点图
let options = {
yAxis: {},
xAxis: {},
series: [
{
name: "d1",
type: "effectScatter",
data: d2,
label: {
show: true,
},
symbolSize: (value) => {
console.log(value);
return (value[0] + value[1]) * 2;
},
},
],
};
漏斗图
漏斗图一般用于表示流失关系,比如电商的进入和下单人数的递减关系。
样式受itemStyle的调节。
也有一些特殊的属性:
最大值和最小值:min,max,minSize,maxSize
排序方式sort(倒金字塔或正金字塔)
间距的调节 gap
const d3 = [
{ value: 2000, name: "进入" },
{ value: 1500, name: "浏览" },
{ value: 1000, name: "下单" },
{ value: 100, name: "成交" },
];
let options = {
series: [
{
name: "d1",
type: "funnel",
data: d3,
},
],
};
maxSize最大值的占比。 minSize最小值的占比。
4000占比为80%,2000占比为40%,最小值100占比为20%
let options = {
series: [
{
name: "d1",
type: "funnel",
data: d3,
max: 4000,
maxSize: "80%",
minSize: "20%",
gap: 10,
},
],
};
倒金字塔
sort:“ascending”
let options = {
series: [
{
name: "d1",
type: "funnel",
data: d3,
max: 4000,
maxSize: "80%",
minSize: "20%",
gap: 10,
sort: "ascending",
},
],
};
echarts是根据数据生成的,无法生成等比的漏斗图
可以设置一个等比的漏斗图盖住不等比的
还可以设置z层级,控制图形的前后顺序。
const d3 = [
{ value: 2000, name: "进入" },
{ value: 1500, name: "浏览" },
{ value: 1000, name: "下单" },
{ value: 100, name: "成交" },
];
const d4 = [
{ value: 2000, name: "进入" },
{ value: 1500, name: "浏览" },
{ value: 1000, name: "下单" },
{ value: 500, name: "成交" },
];
let options = {
series: [
{
name: "d1",
type: "funnel",
data: d3,
label: {
show: false,
},
z: 100,
},
{
name: "d1",
type: "funnel",
data: d4,
z: 200,
// sort: "ascending",
},
],
};
旭日图
旭日图可以看成嵌套的饼图,除了和饼图一样表达占比,相对于饼图还可以进一步细化表达每一块更细节的占比。
除了数据的写法与饼图不同外,其他基本相同。
旭日图比饼图多了个children
const d1 = [
{
value: 1000,
name: "d1",
children: [
{
name: "d1-children1",
value: 800,
},
{
name: "d1-children2",
value: 700,
},
],
},
{
value: 700,
name: "d2",
children: [
{
name: "d2-children1",
value: 500,
},
{
name: "d2-children2",
value: 600,
},
],
},
{
value: 300,
name: "d3",
children: [
{
name: "d3-children1",
value: 500,
},
{
name: "d3-children2",
value: 600,
},
],
},
{
value: 400,
name: "d4",
children: [
{
name: "d4-children1",
value: 500,
},
],
},
{
value: 200,
name: "d5",
children: [
{
name: "d5-children1",
value: 500,
},
],
},
{
value: 1,
name: "d6",
children: [
{
name: "d6-children2",
value: 100,
},
],
},
];
let options = {
series: [
{
name: "d1",
type: "sunburst",
data: d1,
label: {
show: true,
},
minAngle: 10,
},
],
};