饼图小总结~
效果图1 👇（tooltip样式改变）
tooltip
option1 ↓
{
grid: {
left: "50%",
top: "50%",
containLabel: true,
},
legend: {
show: false
},
// 相关代码
tooltip: {
trigger: "item",
formatter: "{b}{d}%",
backgroundColor: "#F0FFFC",
borderColor: "#47D3B8",
borderWidth: 1,
padding: 6,
textStyle: {
color: "#47D3B8",
},
},
series: [
{
name: "",
type: "pie",
radius: ["36%", "56%"],
data: this.pieOrderPercentage,
label: {
normal: {
position: "outer",
fontSize: 12,
color: "#19C0A0",
margin: 10,
formatter: "{b}{d}%",
},
},
labelLine: {
lineStyle: {
color: "#19C0A0",
},
length2: 5,
length: 9,
},
itemStyle: {
color: function (params) {
let colorItem = [
"#36BCFD",
"#5C7CD3",
"#0B329D",
"#0B9D1E",
"#19C0A0",
"#68F0D6",
];
// let currentItem=0;
let colorList = [];
for (let i = 0; i < option.series[0].data.length; i++) {
colorList.push(colorItem[i % 6]);
}
return colorList[params.dataIndex];
},
},
// emphasis: {
// itemStyle: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// },
// },
},
],
}
legend
option2 ↓
{
tooltip: {
trigger: "item",
formatter: "{b}:{d}%",
},
grid: {
bottom: "bottom",
},
legend: {
orient: "vertical",
left: "left",
top: "4%",
textStyle: {
color: "#48C3FF",
fontSize: 10,
},
itemGap: 7,
itemWidth: 10,
itemHeight: 5,
height: 300,
},
color: [
"#1389FF",
"#48C3FF",
"#68F0D6",
"#FFDA73",
"#F39A33",
"#FF7373",
"#DA30EE",
"#827DFF",
],
series: [
{
name: "",
type: "pie",
radius: ["40%", "70%"],
center: ["60%", "50%"],
data: this.departmentData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: false,
},
},
],
}
环形渐变
option3 ↓
{
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {d}%",
},
label: {
show: true,
position: "center",
formatter: `${rateNum}%`,
},
series: [
{
name: seriesName,
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: true,
position: "center",
textStyle: {
color: "#1CFFFF",
},
},
},
},
data: [
{
value: 100 - rateNum,
name: "未回转",
formatter: `${rateNum}%`,
itemStyle: {
normal: {
color: "#042878",
},
},
},
// 相关代码
{
value: rateNum,
name: "回转",
itemStyle: {
normal: {
//颜色渐变
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "#32BFB2" },
{ offset: 0.5, color: "#2EBDB9" },
{ offset: 1, color: "#0EA9F2" },
]
),
},
},
},
],
},
],
};
自定义labelLine.png
这次的图标是用组件形式完成，将柱状图、饼图及折现图放在了一起，所以初始化饼图前面还有一步是数据转换。
option4 ↓
initPie() {
let data = []
// 将数据格式转换成与其他图表一样的格式
this.categoryData.map((category, idx) => {
data.push({
value: this.valueData[idx],
name: category
})
})
// 清空原有的labelLine
data.map((n) => {
this.pieData.push({
value: n.value,
name: n.name,
label: {
show: false
},
labelLine: {
show: false
}
})
})
// 排序：由大到小，labelNum为保留位数
let sortArr = this.pieData
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, this.labelNum)
// 设置新的labelLine
this.pieData.map((m) => {
for (let i = 0; i < sortArr.length; i++) {
if (sortArr[i].name === m.name) {
m.label = {
show: true
}
m.labelLine = {
show: true
}
return m
}
}
})
this.options = {
// 饼图中心的图片设置
graphic: {
elements: [
{
type: 'image',
style: {
image, // base64
width: this.imageSize,
height: this.imageSize
},
left: '29%',
top: 'center'
}
]
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: this.legend.bottom,
left: this.legend.left,
top: this.legend.top,
right: this.legend.right,
itemWidth: 16,
itemHeight: 8,
borderRadius: 5
},
series: [
{
type: 'pie',
// radius: ['40%', '70%'],
radius: this.radius,
center: this.center,
// 相关代码
label: {
normal: {
show: false,
formatter: '{b} {c}'
}
},
data: this.pieData
}
],
color: this.color
}
// 初始化echart
this.drawChart()
},
网友评论