echarts实现多重环形图
大屏里有一个多重环形图的展示,设计图效果:
echarts没有直接实现的,参考了网上的几种方法,自己修改了一下,主要分两种: 1 环形饼图重叠 2 柱形图结合极坐标系
这篇先介绍使用环形饼图实现
两种效果图:
第一种效果代码:
<template>
<div>
<div id="chart3" />
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
var myChart3 = echarts.init(document.getElementById("chart3"));
const placeItemStyle = {
label: {
show: false,
},
labelLine: {
show: false,
},
itemStyle: {
color: "#cbccd0",
},
emphasis: {
label: {
show: false,
},
labelLine: {
show: false,
},
},
};
myChart3.setOption({
title: {
text: "销售分布",
},
tooltip: {},
legend: {
data: ["一月", "二月", "三月"],
},
// yAxis: {},
series: [
{
name: "销量",
type: "pie",
radius: ["65%", "80%"],
color: ["#afdd8a", "#cbccd0"],
zlevel: 1,
hoverAnimation: false, //鼠标移入变大
data: [
{
value: 22,
name: "一月",
itemStyle: {
color: "#afdd8a",
// borderRadius: 15,
},
},
{
value: 64,
name: "",
...placeItemStyle,
},
],
},
{
name: "销量",
type: "pie",
radius: ["49%", "64%"],
color: ["#00BDAE", "#cbccd0"],
zlevel: 2,
hoverAnimation: false, //鼠标移入变大
data: [
{
value: 32,
name: "二月",
itemStyle: {
// color: '#00BDAE',
// borderRadius: 15,
},
labelLine: {
length: 45,
},
},
{
value: 54,
name: "",
...placeItemStyle,
},
],
},
{
name: "销量",
type: "pie",
radius: ["34%", "48%"],
color: ["#efb754", "#cbccd0"],
zlevel: 3,
hoverAnimation: false, //鼠标移入变大
itemStyle: {
color: "#efb754",
// borderRadius: 15,
},
data: [
{
value: 28,
name: "三月",
labelLine: {
length: 70,
},
},
{
value: 60,
name: "",
...placeItemStyle,
},
],
},
],
});
});
</script>
<style scoped>
#chart3 {
width: 500px;
height: 400px;
}
</style>
主要是将三个环形饼图叠加在一起,radius 递减就可以,配置高亮的颜色,与阴影的颜色,这里的阴影实际也是一项数据,只是不显示相关 label,看起来就像背景颜色
这里的 label 展示,正常是会被图形覆盖,可以添加 zlevel 来指定层级
如果不需要线段的尾端是圆弧型,这样就可以了,如果加上末尾的样式,borderRadius,连接处就会出现空隙,这个方法就不适用了,需要第二种实现
第二种效果代码:
<template>
<div>
<div id="chart" />
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
var myChart = echarts.init(document.getElementById("chart"));
// 反向阴影效果
var placeHolderStyle = {
label: {
show: false,
position: "center",
},
labelLine: {
show: false,
},
itemStyle: {
color: "#5b5b5b",
borderColor: "#5b5b5b",
borderWidth: 10,
},
emphasis: {
disabled: true,
// label: {
// show: false,
// },
// labelLine: {
// show: false,
// },
},
};
const labelStyle = (color, length = 100) => {
return {
label: {
// show: false,
position: "outside",
formatter: "{a}: {c}",
},
labelLine: {
// show: false,
length,
smooth: 0.5,
},
itemStyle: {
borderWidth: BorderWidth,
shadowBlur: 40,
borderColor: color,
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
},
};
};
var BorderWidth = "10";
myChart.setOption({
backgroundColor: "#333",
color: ["#53f1f2", "#4ebefd", "#30ed9d", "#faa234", "#fff"],
legend: {
show: true,
orient: "vertical",
left: "left",
top: "middle",
data: ["正常", "次要", "警告", "重要", "严重"],
textStyle: {
color: "#fff",
fontSize: 16,
},
},
series: [
{
name: "正常",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [100, 101],
...labelStyle("#53f1f2", 50),
data: [
{
value: 3,
name: "",
...placeHolderStyle,
},
{
value: 7,
name: "70%",
},
],
},
{
name: "次要",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [80, 81],
...labelStyle("#4ebefd", 60),
data: [
{
value: 4,
name: "",
...placeHolderStyle,
},
{
value: 6,
name: "60%",
},
],
},
{
name: "警告",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [60, 61],
...labelStyle("#30ed9d", 70),
data: [
{
value: 5,
name: "",
...placeHolderStyle,
},
{
value: 5,
name: "40%",
},
],
},
{
name: "重要",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [40, 41],
...labelStyle("#faa234", 90),
data: [
{
value: 7,
name: "",
...placeHolderStyle,
},
{
value: 3,
name: "30%",
},
],
},
{
name: "严重",
type: "pie",
clockWise: false,
hoverAnimation: false,
radius: [20, 21],
...labelStyle("#fff"),
labelLine: {
lineStyle: {
color: "#fff",
},
length: 100,
smooth: 0.5,
},
data: [
{
value: 6,
name: "",
...placeHolderStyle,
},
{
value: 4,
name: "30%",
},
],
},
],
});
});
</script>
<style scoped>
#chart {
width: 500px;
height: 400px;
}
</style>
这种也是将环形饼图叠加,但是不一样的是使用的是 border,radius 的宽度间距仅设置为 1;因为饼图的 border 默认是有圆角的,这样就解决了圆角的问题
这里要注意后一个数据的圆弧会覆盖前一个,所以这里的数据 data 顺序要换一下,可以通过 clockWise:false,逆时针放置饼图的扇区
总的来说,这种实现效果是最好的
使用极坐标+柱图实现多层环形图, 单独写了一篇https://www.cnblogs.com/steamed-twisted-roll/p/16919329.html
