1. 如下图所示:
2. 环形图代码如下
vue引入echarts:https://blog.csdn.net/qq_34790644/article/details/119932743
1. 中间字设置是 title ,数据内部显示文字是series中的label,图例是legend
var sxechart=this.$echart.init(document.getElementById('echartId'))
var data = [
{
name: "正常兼职",
value: 456
},
{
name: "即将超期",
value: 231
},
{
name: "超期",
value: 71
}
];
var subText = ((456 / (456 + 231 + 71)) * 100).toFixed(0) + "%";
var option = {
//环形图中间文字
title: {
text: "正常兼职",
subtext: subText,
textStyle: {
fontSize: 12,
color: "rgba(0,0,0,0.65)",
fontWeight: 400
},
subtextStyle: {
fontSize: 20,
color: "#000000",
fontWeight: 500
},
textAlign: "center", //图例文字居中显示
x: "38%", //距离左边的距离
y: "37%" //距离上边的距离
},
//数据的颜色设置
color: ["#2BCB95", "#F6BD16", "#FF3B30"],
//鼠标移入显示的文字
tooltip: {
trigger: "item",
formatter: "{b}<br/> {c}人 ({d}%)"
},
//图例设置
legend: {
orient: "vertical", //竖直展示,如果横着的话,这个可以直接去掉
right: "10%",
top: "center",
align: "left",
itemGap: 20, //数据上下的距离
icon: "circle", //圆形小点展示,默认为方形,去掉就是方形展示
itemWidth: 10, // 设置宽度
data: data
},
series: [
{
radius: ["50%", "80%"], //第一个是中间圆的大小,第二个是外边圆的大小
center: ["40%", "50%"], //左边的距离,上边的距离
type: "pie",
label: {、
normal: {
formatter: function(data) {
//.toFixed(0)去掉小数位,如果为2就是保留两位小数
let b = data.percent.toFixed(0) + "%";
subText = b;
return b;
},
// formatter: "{d}" + "%", //直接百分比,没有去掉小数位,上边是去掉小数位的
//formatter: "{b}:{c}人" //正常兼职:456
position: "inner", //文字显示在内部,如果在外边把这个去掉就好
color: "#fff", //文字的颜色
}
},
data: data
}
]
};
sxechart.setOption(option,true);
2. 饼图的代码如下:
var sxechart=this.$echart.init(document.getElementById('echartId'))
var option = {
//鼠标移入显示文字
tooltip: {
trigger: "item",
formatter: "{a}:{b}:({d}%)"
},
//图例设置
legend: {
orient: "vertical",
left: "50%",
top: "center",
align: "left",
itemGap: 20,
icon: "circle",
itemWidth: 10, // 设置宽度
data: ["单位党委(党组,工委)审批", "区委组织部审批", "市委组织部审批"]
},
//颜色设置
color: ["#5B8FF9", "#5AD8A6", "#78D3F8"],
series: [
{
name: "访问来源",
type: "pie",
selectedMode: "single",
radius: [0, "73%"], //饼图大小设置
center: ["25%", "48%"], // 距离左边,距离上边距离
//数据文字内部展示
label: {
normal: {
formatter: "{d}%",
position: "inner",
color: "#fff"
}
},
//中间的白边设置
itemStyle: {
// 此配置
normal: {
borderWidth: 1,
borderColor: "#fff"
},
},
data: [
{
value: 38.3,
name: "单位党委(党组,工委)审批"
},
{
value: 41.6,
name: "区委组织部审批"
},
{
value: 40.1,
name: "市委组织部审批"
}
]
}
]
};
sxechart.setOption(option,true);
3. 不要忘了给echarts设置宽高哦!!!