在vue中echarts自定义label 标签样式formatter(饼状图把label标签颜色设置为饼图内容相应颜色)
在用echarts做图时,label样式默认。在这里记录怎么修改label样式echart1() {let Mychart1 = echarts.init(document.getElementById("chart1"));let option = {tooltip: {trigger: "item",},legend: {orient: "vertical",
·
在用echarts做图时,label样式默认。在这里记录怎么修改label样式
echart1() {
let Mychart1 = echarts.init(document.getElementById("chart1"));
let option = {
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
left: "right",
top: 80,
icon: "triangle",
// bottom: "bottom",
},
series: [
{
name: "厂商分布",
type: "pie",
//设置圆环
radius: ["10%", "50%"],
left: "left",
label: {
lineHeight: 16,
},
data: [
{
value: 1048,
name: "武汉生物",
itemStyle: {
color: "#ffbb00",
},
label: {
//{d}显示百分比。{a|}富文本样式标签。{b}数据
formatter: "{b}\n{a|{d}%}",
rich: {
a: {
color: "#ffbb00",
},
},
},
},
{
value: 735,
name: "兰州生物",
itemStyle: {
color: "#087bae",
},
label: {
formatter: "{b}\n{a|{d}%}",
rich: {
a: {
color: "#087bae",
},
},
},
},
{
value: 580,
name: "北京生物",
itemStyle: {
color: "#17b3e9",
},
label: {
formatter: "{b}\n{a|{d}%}",
rich: {
a: {
color: "#17b3e9",
},
},
},
},
{
value: 484,
name: "成都生物",
itemStyle: {
color: "#2dbcbe",
},
label: {
formatter: "{b}\n{a|{d}%}",
rich: {
a: {
color: "#2dbcbe",
},
},
},
},
{
value: 300,
name: "西安生物",
itemStyle: {
color: "#2693ff",
},
//设置对应label的颜色
label: {
formatter: "{b}\n{a|{d}%}",
rich: {
a: {
color: "#2693ff",
},
},
},
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
Mychart1.setOption(option);
},
完成图:
更多推荐
已为社区贡献4条内容
所有评论(0)