echarts环形图配置图例设置，中间⽂字设置
最近在⼯作项⽬中⽤到echarts进⾏制作⼀个环形图表，在⽹上查询了很多属性最终才制作成功，因此想总结⼀下，⽅便以后使⽤（第⼀次
写博客，是不是这样写的哦）
  导⼊echarts.js啥的就不说了，直接开始配置属性。
option = {
legend: {            //配置图例
itemWidth: 5,      　//图例⼤⼩我这⾥⽤的是圆
itemGap: 30,        //图例之间的间隔
orient: 'horizontal',  　//布局⽅式，默认⽔平布局，另可选vertical
y: '80%',          //垂直放的位置，可以写top，center，bottom，也可以写px或者百分⽐。x轴⽅向同理，默认center
icon: "circle",      //图例的形状，选择类型有："circle"（圆形）、"rectangle"（长⽅形）、"triangle"（三⾓形）、"diamond"（菱形）、"emptyC                              　"emptyRectangle"（空⼼长⽅形）、"emptyTriangle"（空⼼三⾓形）、"emptyDiamon"（空⼼菱形                              path为图⽚路径
          　selectedMode: false,    //选中哪个图例 false后图例不可点击
textStyle: {        　
fontSize: 14,
fontFamily: "Microsoft YaHei",
},
data: [{name: '达标', textStyle: {color: "#3999dd"}}, {    //name和下⾯的series中data的name对应显⽰。后⾯加textStyle可设置图例后⾯⽂字的颜⾊                        name: '未达标',
textStyle: {color: "#a3a6b4"}
}],
/*图例旁边显⽰数据*/
formatter: function (name) {
var legendIndex = 0;
var clientlabels = [{name: '达标', textStyle: {color: "#3999dd"}}, {
name: '未达标',
textStyle: {color: "#a3a6b4"}
}];
var clientcounts = [result.standardNum, StandardNum];
clientlabels.forEach(function (value, i) {
if (value.name == name) {
legendIndex = i;
}
});
return name + " " + clientcounts[legendIndex];
}
},
color: ["#e3f9ff", "#3999dd"],    //环形图两部分的颜⾊
graphic: [{                //环形图中间添加⽂字
type: 'text',            //通过不同top值可以设置上下显⽰
left: 'center',         
top: '30%',
style: {               
text: "80%"（⾃⼰设置显⽰内容）,
textAlign: 'center',
fill: '#000',        //⽂字的颜⾊
width: 30,
height: 30,
fontSize: 18,
color: "#4d4f5c",
text align center
fontFamily: "Microsoft YaHei"
}
}, {
type: 'text',
left: 'center',
left: 'center',
top: '45%',
style: {
text: '达标率',
textAlign: 'center',
fill: '#000',
width: 30,
height: 30,
fontSize: 18,
}
}],
series: [              //配置数据啥的
{
name: '达标率',     
type: 'pie',        //设为饼图
radius: ['60%', '70%'],  //设置内半径和外半径，形成环状
              minAngle:15,        　//设置最⼩⾓度              startAngle:270      　//设置起始⾓度
              clockWise:false,        //默认逆时针                        avoidLabelOverlap: false,  　//避免标注重叠
hoverAnimation: false,    //移⼊放⼤
silent: true,
center: ['50%', '40%'],
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 20, name: '未达标'},
{value: 80, name: '达标'},
]
}
]
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。