使用echarts饼图，实现以下效果：
第一步 设置图例垂直属性
orient: "vertical",
第二步 显示名字和数据，并且数据右对齐
legend: {
type: "scroll",
right: 35,
top: "middle",//居中显示
bottom: 20,
orient: "vertical",//垂直
itemGap: 15, //图例间距
itemHeight: 10.5, //图例高度
itemWidth: 10.52,//图例宽度
textStyle: {
// 数据右对齐样式
color: "#fff",
rich: {
a: {
// legend左边的文字
width: 50,
fontSize: 10,
padding: [3, 10, 0, 0], // 1.左边的文字添加右边距10(可自己调整)
},
b: {
// legend右边的值
fontSize: 12,
backgroundColor: "transparent", // 2.右边的值添加背景色
align: "right", // 3.右对齐
padding: [5, -100, 0, 0], // 4.设置右边距为-100(-70/-80..可自己调整)
},
},
},
},
第三步 在legend里写完，需要去组件里写一下，我这里是把配置写成.js文件后引入的，需要用到接口里的值，如果直接在组件里写，就写在配置里就行
<div style=" width: 412px;height: 260px;">
<VChart
:option="optionPie"
style="width: 100%; height: 250px"
autoresize
/>
</div>
\\\\\\\\\\
<script>
import { optionPie } from "./option";
export default {
data(){
return {
optionPie: {}
}
},
methods:{
getOptions(){
this.optionPie.legend.formatter = function (name) {
let tarValue;
//这里是后端返回的list
this.optionPie.series[0].data.forEach((item) => {
if (name === item.name) {
tarValue = item.value;
}
});
return [`{a|${name}}` + `{b|${tarValue}}`].join(""); //需要返回什么就加什么，但是a,b,对应配置里的a,b,样式和名字要对上，也可以添加多个样式，a,b,c,d……
};
}
}
}
注意：如果配置写在组件里，就这样写：完整代码
在methods里定义一个方法
methods:{
getOptions = {
this.optionPie = {
color: ["#2e63e5", "#d54389", "#fdd851", "#51fd51", "#3ad6f2", "#6c3af2"],
title: {
show: true,
left: "27%",
top: "48%",
text: "",
// textStyle: {
// fontFamily: "DIN Alternate",
// fontWeight: 700,
// color: "#ffffff",
// fontSize: 32,
// },
subtext: "派发量(件)",
subtextStyle: {
fontFamily: "Alibaba PuHuiTi-Regular",
color: "#ffffff",
fontSize: 14,
},
},
tooltip: {
trigger: "item",
},
legend: {
type: "scroll",
right: 35,
top: "middle",
bottom: 20,
orient: "vertical",
itemGap: 15,
itemHeight: 10.5,
itemWidth: 10.52,
textStyle: {
// 数据右对齐样式
color: "#fff",
rich: {
a: {
// legend左边的文字
width: 50,
fontSize: 10,
padding: [3, 10, 0, 0], // 1.左边的文字添加右边距10(可自己调整)
},
b: {
// legend右边的值
fontSize: 12,
backgroundColor: "transparent", // 2.右边的值添加背景色
align: "right", // 3.右对齐
padding: [5, -100, 0, 0], // 4.设置右边距为-100(-70/-80..可自己调整)
},
},
},
formatter:function (name) {
let tarValue;
//从接口里取
this.optionPie.series[0].data.forEach((item) => {
if (name === item.name) {
tarValue = item.value;
}
});
return [`{a|${name}}` + `{b|${tarValue}}`].join("");
};
},
series: [
{
name: "",
type: "pie",
center: ["35%", "50%"],
radius: ["55%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
itemStyle: {
// borderRadius:10,
borderColor: "#000329",
borderWidth: 10,
},
emphasis: {
label: {
show: false,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [],
},
],
};
}
}
第四步 中间文字显示
有两种办法：
- 静态：值不会改变，只做展示
- 动态：会根据后台返回的数据和名字改变
注意：我这里事先把默认文字显示关了
series: [
{
name: "",
type: "pie",
center: ["35%", "50%"], //圆环上下，左右距离
radius: ["55%", "70%"], //圆环内，外大小 粗细
avoidLabelOverlap: false,
label: {
show: false, //显示中间文字，关闭
position: "center",
},
itemStyle: {
// borderRadius:10,
borderColor: "#000329",
borderWidth: 10,
},
emphasis: {
label: {
show: false, //鼠标一上去显示文字，关闭
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false, //关闭
},
data: [],
},
],
静态文字显示的缺就是，无法根据数据或者名字修改位置，使其一直保持在中间，位置是固定的
optionPie = {
//显示中间的文字
title: {
show: true,
left: "27%", //文字左边距离
top: "48%",//文字上边距离
text: "1234", //主标题(上边的文字)
textStyle: { //主标题上边文字的样式
fontFamily: "DIN Alternate",
fontWeight: 700,
color: "#ffffff",
fontSize: 32,
},
subtext: "派发量(件)", //副标题(下边的文字)
subtextStyle: { //副标题下边文字样式
fontFamily: "Alibaba PuHuiTi-Regular",
color: "#ffffff",
fontSize: 14,
},
},
……
}
动态，我这里只需要根据后端返回展示数据就行，不用鼠标滑到那个上面，中间就显示哪个，所以 我这里是自己画了一个盒子，显示数据
<div class="businessTypePie">
<div class="businessType">
<div style="margin-top: -15px">{{ allCount }}</div>
</div>
<VChart
:option="optionPie"
style="width: 100%; height: 250px"
autoresize
/>
</div>
、、、、、、、、、、
<style lang="less" scoped>
//这里使用了定位，使中间的文字数据始终保持在中间显示
.businessTypePie {
position: relative;
height: 260px;
margin-top: 20px;
width: 412px;
.businessType {
position: absolute;
width: 136.11px;
height: 135.28px;
border-radius: 50px;
top: 58px;
left: 78px;
line-height: 135.28px;
font-family: DIN Alternate;
font-weight: 700;
color: #ffffff;
font-size: 32px;
text-align: center;
//这里使用径向渐变调的色
background-image: radial-gradient(
rgba(6, 162, 255, 0.1) 45%,
rgba(0, 134, 255, 0.42) 65%,
#000329 86%
);
}
}
</style>