饼图基本配置
图例形状的样式
legend: {
icon: "rect circle" // 矩形 圆形等样式通过icon
itemWidth: number // 矩形宽度
itemHeight: number // 矩形高度
itemGap: number // 图例的间距!
x: "", // 图例位置 横向 可以给百分比调整
y: "" // 图例位置 纵向 可以给百分比调整
color: (params) => {
console.log(params) // 设置文字颜色与数据块颜色一致
}
}
饼图的大小和位置调整
radius: [ " ", " " ] // 都是number 根据需求调整 默认先给 50%, 50%试试吧
center: [ " " , " "] // 第一位代表左右 第二位代表上下 50%, 50% 根据需求做调整`在这里插入代码片`
series基本配置
startAngle: 90 // 饼图的起始角度和生长方向
itemStyle: {
normal : {
label: {
show: boolean // 是否显示指示线数据
},
labelLine: {
show: boolean // 是否显示指示线
}
}
}
折线图配置
xAxis
axisLine: { // 显示x轴并设置颜色为白色
show: true,
lineStyle: {
color: "#fff"
}
}
axisLabel: {
textStyle: {
color: "#fff" // 设置x坐标轴文字颜色
}
}
axiosTick: {
show: boolean // 是否显示x轴刻度
}
yAxis
splitStyle: {
show: boolean // 是否显示网格线
lineStyle: {
type: "dashed" // 网格线样式为点状
color: "" // 网格线颜色
}
}
series
smooth: boolean // 是否为平滑曲线
itemStyle: {
color: "#fff" // 线条颜色
}
lineStyle: {
shadowColor: " #fff" // 光影的颜色
shadowOffsetX: 0 // 光影x偏移值
shadowOffsetY: 0 // 光影y偏移值
opacity: 0 //
type: "solid " // 光影样式
width: 2
}
aeraStyle: {
// 填充渐变
normal: {
color: new echarts.graphic(0,0,0,1, [ // 上到下渐变
{ offset: 0, color: "color" },
{ offset: 1, color: "color" }
])
}
}
内容若有问题欢迎纠正。
还有个问题没有查到,除了使用border以外,如何给饼图设置间隔。
希望以上内容对大家有所帮助, 欢迎评论。
继续加油 ~