echarts实现圆环嵌套（多重环形图，连接处倒圆角！！！）

最新推荐文章于 2024-12-12 16:23:30 发布

Jiaberrr

最新推荐文章于 2024-12-12 16:23:30 发布

阅读量832

点赞数 2

分类专栏： ECharts图表之旅文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Jiaberrr/article/details/141940930

版权

ECharts图表之旅专栏收录该内容

19 篇文章 1 订阅

订阅专栏

最近遇到一个需求，需要实现两个环嵌套，查了网上发现有很多圆环嵌套的实现方式，包括官网社区也能找到很多示例，但是需求是需要倒圆角的，找到的倒圆角的有但是，是那种鼠标移入后圆角看起来很诡异的，后来用bar实现了，效果如下图：

实现思路：

1、确定两个圆环的中心点

 polar: {
      center: ["51%", "40%"],
      radius: ["65%", "100%"],
    },

2、配置option

核心代码如下：


  const option = {
    backgroundColor: 'transparent', //背景颜色
    title: [
      {
        text: val.title,
        x: "center",
        top: "35%",
        textStyle: {
          color: "#fff",
          width: 100,
          fontSize: '1rem',
          lineHeight:14,
          fontWeight: "700",
          overflow: "breakAll",
          fontFamily:"MiSans-Bold"
        },
      },
    ],
    angleAxis: {  
      type: "value",
      min: 0,
      max: 100,
      startAngle: -60,//调整初始角度
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    radiusAxis: {
      type: "category",
      data: ["圆环1", "圆环2"],
      z: 100,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
        margin: 6,
        fontSize: '1rem',
        color: "#96F5F6",
        interval: 0,
      },
    },
    polar: {
      center: ["51%", "40%"],
      radius: ["65%", "100%"],
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        type: "bar",
        barWidth: "70%",
        data: [63],
        coordinateSystem: "polar",
        name: "圆环1",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "rgb(255,0,0)",
          borderRadius: 5,
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(45,75,116,0.1)",
        },
      },
      {
        type: "bar",
        data: [0, 78],
        coordinateSystem: "polar",
        name: "圆环2",
        stack: "a",
        roundCap: true,
        itemStyle: {
          color: "rgb(0,132,255)",
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(45,75,116,0.5)",
        },
      },
    ],
    legend: {
      bottom: 1,
      orient: "vertical",
      icon: "rect",
      itemHeight: 8,
      itemWidth: 8,
      show: true,
      data: ["圆环1", "圆环2"],
      selectedMode: false,
      textStyle: {
        color: "#fff",
        fontSize: '1rem',
        fontFamily:"MiSans-Bold"
      },
    },
  };
   const dom = document.getElementById("myChart");
    const myChart = echarts.init(dom); // 初始化echarts实例
    myChart.setOption(option);
    chartInstances.push(myChart)

这是两个圆环嵌套的，如果想实现4个5个等多个圆环嵌套的话也是一样的，只是多一个数据而已。