共计 2757 个字符,预计需要花费 7 分钟才能阅读完成。
3/ 4 环形图实现
-
通过循环数据,把每一条数据放入一个环形图内,每一个环形图分为 3 块空间:
- 理论数据占据的空间
这里占据的空间须要转换成 3 / 4 比例:value * 0.75
- 虚构的 3 / 4 环形图剩下的数据
这里是占据 3 / 4 空间内除了理论数据之后残余空间:(总数据 -value) * 0.75
- 1/ 4 须要做成通明的数据
始终占据 1 / 4 空间:总数 * 0.25, 色彩设置为 transparent 通明色
-
利用 y 轴上浮现旁边的正文。留神 x 轴也必须写!
xAxis: [{show: false}], yAxis: [ { type: "category", inverse: true, axisLine: {show: false,}, axisTick: {show: false,}, axisLabel: { }, data: lineYAxis, }, ],
效果图
长处:
通过这一系列计算保障了环形图数据量过大时不会溢出
毛病:
- 环形图数据项不能过多,因为内圈最小就是 0%。
- 在缩放的时候放大根本没问题,放大的时候会呈现数据正文对应不上的问题。
因为这里是 grid 定位,y 轴 label 来显示数据,思考给 grid 设置一个高度,然而这个高度应该随着环形图的半径来变动,而环形缩放的时候 resize 办法是依照盒子给定的最小宽或高来设置大小,用来放弃为一个圆。所以不晓得怎么取这个高度能力为最小 …
心愿读者能解决这个问题,并评论补充!
js 实现代码:
export default {data() {
return {ectOpts: {},
error: "",
loading: false,
latest: true,
data: [],};
},
computed: {total() {let total = this.data.reduce((item1, item2) => {return (typeof item1 === "number" ? item1 : item1.num) + item2.num;
});
return total;
},
},
created() {this.getData();
},
mounted() {this.initEchart();
},
methods: {getData() {
this.data = [{ name: "钱包领取", num: 13210},
{name: "现金支付", num: 42111},
{name: "记账领取", num: 81711},
{name: "挪动领取", num: 121700},
];
this.data.forEach((item) => {item.percent = ((item.num / this.total) * 100).toFixed(1);
});
},
initEchart() {
let color = ["rgba(255, 135, 0, 1)",
"rgba(255, 195, 0, 1)",
"rgba(0, 228, 115, 1)",
"rgba(0, 157, 255, 1)",
].reverse();
let pieSeries = [];
let lineYAxis = [];
this.data.forEach((item, index) => {
let iname = item.name;
let inum = item.num;
pieSeries.push({
name: iname,
type: "pie",
radius: [65 - 15 * index + "%", 57 - 15 * index + "%"],
// 敞开悬停动画
hoverAnimation: false,
// 是否顺时针旋转
clockwise: false,
center: ["35%", "50%"],
label: {show: false,},
data: [
{
// 只设置 3 / 4 的值,以用于 3 / 4 环形图
value: inum * 0.75,
name: iname,
tooltip: {formatter: (item) => {
return `<div style="display:flex;font-size:12px;">
<div style="color:${item.color};margin-right:10px;">●</div>
<div>
<div>${item.seriesName}:${item.value} 辆 </div>
<div> 占比:${(item.percent / 0.75).toFixed(1) + "%"}</div>
</div>
</div>
`
},
}
},
{
// 这里的值 + 下面的值为总和,然而只占比 75%
value: (this.total - inum) * 0.75,
itemStyle: {color: "rgba(0, 132, 251, 0.2)",
},
tooltip: {show: false}
},
{
// 弃用 25% 的环形图不做显示
value: this.total * 0.25,
itemStyle: {color: "rgba(0,0,0,0)",
},
tooltip: {show: false}
},
],
});
lineYAxis.push({
value: index,
textStyle: {
rich: {
circle: {color: color[index],
padding: [0, 5],
},
},
},
});
});
this.ectOpts = {
tooltip: {trigger: "item",},
color,
grid: {
top: "15%",
bottom: "54%",
left: "35%",
containLabel: false,
},
// 有 yAxis 必须有 xAxis
xAxis: [{show: false}],
yAxis: [
{
type: "category",
// 反向坐标轴
inverse: true,
axisLine: {show: false,},
axisTick: {show: false,},
axisLabel: {formatter: (params) => {let item = this.data[params];
return `{line|----------}{circle|●}{name|${item.name}:}{value|${item.num} 辆,}{percent| 占 ${item.percent}%}`;
},
interval: 0,
inside: true,
rich: {
line: {
// width: 50,
// height: 1,
color: "rgba(236, 236, 236, 1)",
// 以后 echart 版本不反对 borderType 用 ------ 代替
// borderType: "dashed",
// borderColor: "#D9DFEB",
// borderWidth: 1,
},
},
textStyle: {
color: "#fff",
fontSize: 12,
},
show: true,
},
data: lineYAxis,
},
],
series: pieSeries,
};
},
},
};
正文完