图例百分比多种样式设置的方法找了好多天，全都是竖着一列一列设置样式的，像这种。
需要这种的话，把最后面完整的代码段里的 formatter，跟textStyle直接替换成下面这两张图的代码就行了，主要就是改变了一下formatter 里return的返回方式。
formatter: name => {
var data = this.option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var b = Math.round((tarValue / total) * 100);
return (
"{name| " + name + "} " + "{b| " + b + "%}" + "{v| " + v + "次}"
);
}, textStyle: {
color: "#000",
rich: {
name: {
align: "left",
width: fontSize(72),
color: "rgba(255, 255, 255, 1)"
},
b: {
align: "left",
width: fontSize(36),
color: "rgba(255, 255, 255, 1)"
},
v: {
align: "left",
color: "rgba(255, 255, 255, 1)"
}
}
}下面的才是我要最终效果。对我这种不太写echarts的来说真是，太难了！！！！！！重点是不知道怎么搜索关键词，，所以一直找不到！！！记录一下，
最终实现的效果图 :
完整的代码：
export default {
components: {
MyEcharts
},
data() {
return {
option: {
title: {
left: "center"
},
tooltip: {
trigger: "item"
},
legend: {
// orient: "vertical",
icon: "rect",
right: fontSize(12),
top: fontSize(24),
height: fontSize(121),
itemGap: fontSize(22),
itemWidth: fontSize(12),
itemHeight: fontSize(12),
textStyle: {
color: "#DBF5FFFF",
rich: {
name: {
align: "left",
width: fontSize(72),
fontSize:fontSize(14)
},
item1: {
align: "left",
width: fontSize(36),
fontSize:fontSize(16),
color:'#009FFFFF'
},
item2: {
align: "left",
width: fontSize(36),
fontSize:fontSize(16),
color:'#9177FFFF'
},
item3: {
align: "left",
width: fontSize(36),
fontSize:fontSize(16),
color:'#FEB007FF'
},
item4: {
align: "left",
width: fontSize(36),
fontSize:fontSize(16),
color:'#00FFD8FF'
}
}
},
formatter: name => {
var data = this.option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var b = Math.round((tarValue / total) * 100);
if (name == '易腐垃圾') {
return `{name|${name}} {item1|${b}%} {item1|${v}}次`;
}
if (name == '有害垃圾') {
return `{name|${name}} {item2|${b}%} {item2|${v}}次`;
}
if (name == '可回收垃圾') {
return `{name|${name}} {item3|${b}%} {item3|${v}}次`;
}
if (name == '其他垃圾') {
return `{name|${name}} {item4|${b}%} {item4|${v}}次`;
}
},
},
series: [
{
name: "投递总次数",
type: "pie",
colorBy: "data",
emphasis: {
disable: false,
scale: false, // 不缩放
scaleSize: 0 // 为了防止失效直接设置未0
},
label: {
show: true,
position: "center",
formatter: ["{a|投递总次数}", "{b|2890}"].join("\n"),
rich: {
a: {
color: "#DBF5FFFF",
fontSize: fontSize(14),
height: fontSize(18)
},
b: {
color: "#00DAFFFF",
fontFamily: "Regular",
height: fontSize(28),
fontSize: fontSize(28),
padding: [fontSize(6), 0, 0, 0]
}
}
},
radius: [fontSize(63), fontSize(87)],
center: [fontSize(88), fontSize(87)],
data: [
{
value: 851,
name: "易腐垃圾",
textStyle:{
color: "#009FFFFF"
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0,159,255,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,159,255,0.2000)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
value: 735,
name: "有害垃圾",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 2,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(145,119,255,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(145,119,255,0.2000)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
value: 580,
name: "可回收垃圾",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(254,176,7,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(254,176,7,0.2000)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
value: 484,
name: "其他垃圾",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0,255,216,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0,255,216,0.2000)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
}
],
labelLine: {
show: false
}
}
]
}
};
},
computed: {
disabled() {}
},
mounted: function() {},
created() {},
methods: {}
};