echarts 饼图指示线的显示与隐藏显示特定指示线和文字
在开发过程中遇到了如下需求:
默认显示一条指示线,似乎没有找到满意的列子,这里记录一下解决的办法:
这里以vue项目为例
核心代码:
data = data.map((d) => {
d = Object.assign(d, {
label:{
show: function () {
if (d.value <= 150) {
return false;
} else {
return true;
}
}(),
formatter: "{b} \n {c} {d}%",
position: function () {
if (d.value <= 150) {
return 'inside';
} else {
return 'outside';
}
}(),
},
labelLine:{
show: function () {
if (d.value <= 150) {
return false;
} else {
return true;
}
}(),
},
emphasis: {
labelLine: {
show: true,
},
},
});
return d;
});
完整代码:
<script>
// import echarts from "vue-echarts";
export default {
data() {
return {
chartsData: [
{
name: "一级风险",
value: 200,
},
{
name: "二级风险",
value: 150,
},
{
name: "三级风险",
value: 100,
},
{
name: "四级风险",
value: 50,
},
],
spanAngle: 90,
colorList: ["#52E5FC", "#4CFF89", "#FFF57B", "#FF9F40"],
option: {
tooltip: {
show: true,
},
legend: {
type