echarts饼图显示为环形图,以及将某一项的数值显示在环形正中央
效果:实现关键: radius: [‘30%’, ‘45%’], // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 45% 长度。30%为内圈大小,45%为外圈,中间15%就是环形图大小该配置项是写在series:[{radius: [‘30%’, ‘45%’]}]里...
·
1、效果:
实现关键: radius: [‘30%’, ‘45%’], // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 45% 长度。
30%为内圈大小,45%为外圈,中间15%就是环形图大小
该配置项是写在series:[{radius: [‘30%’, ‘45%’]}]里
2、
<div class="card1" id="pie" style="width: 150px; height: 150px"></div>
pieChart() {
let myChart = this.$echarts.init(document.getElementById("pie"));
myChart.setOption({
series: [
{
name: "品级比例",
type: "pie", // 设置图表类型为饼图
hoverAnimation: false,//关闭鼠标放上去时的动画效果
radius: ["80%", "90%"], // 环形图的关键。90%为外半径,80%为内半径,中间10%即环形的宽度
//center: ['50%', '50%'], //调整饼图位置
data: [
{
name: "已使用",
value: 6,
label: { show: true, fontSize: "18", fontWeight: "bold" },//单独显示某一项值的关键
},
{ name: "未使用", value: 2 },
],
itemStyle: {
//图形样式设置
normal: {
color: function (params) {
//自定义饼图各板块颜色
var colorList = ["#2D84FB", "#cccccc"];
return colorList[params.dataIndex];
},
},
},
label: {
//文本样式
normal: {
textStyle: {
fontSize: 12, // 改变标示文字的大小
color: "#2D84FB",
},
formatter: "{d}% \r\n {b}", //提示文本内容 d代表百分比,b代表name文本
position: "center",//控制文字显示的位置,center居中显示
show: false,//由于要单独显示(已使用)的数值,所以得先隐藏label
},
},
},
],
});
window.addEventListener("resize", () => {
if (myChart) {
myChart.resize();
}
});
},
总结:
1、radius: [“80%”, “90%”] 实现环形图;
2、label{show:false} 隐藏label显示;
3、在data里的某一项添加label:{show:true},即 {name: “已使用”, value: 6, label: { show: true, fontSize: “18”, fontWeight: “bold” } },
以上就是效果图二的实现方法
更多推荐
已为社区贡献1条内容
所有评论(0)