echarts 加一个圆环图带阴影

image
这里面一共三个圆,
最外层是一个半透明的

   var chartDomymr = document.getElementById('container-ymr');
   var myChartymr = echarts.init(chartDomymr);
   var optionymr;
   var optionymr_data = [
       {
           value: 332, name: '类型A', color: new echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [{
                   offset: 0,
                   color: 'rgba(64, 125, 252, 1)',
               },
               {
                   offset: 1,
                   color: 'rgba(64, 104, 252, 1)',
               },
               ],
               false
           )
       },
       {
           value: 159, name: '类型B', color: new echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [{
                   offset: 0,
                   color: 'rgba(1, 209, 94, 1)',
               },
               {
                   offset: 1,
                   color: 'rgba(1, 190, 205, 1)',
               },
               ],
               false
           )
       },
       {
           value: 159, name: '类型C', color: new echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [{
                   offset: 0,
                   color: 'rgba(247, 121, 0, 1)',
               },
               {
                   offset: 1,
                   color: 'rgba(247, 174, 0, 1)',
               },
               ],
               false
           )
       },
       {
           value: 199, name: '类型D', color: new echarts.graphic.LinearGradient(
               0, 0, 0, 1,
               [{
                   offset: 0,
                   color: 'rgba(247, 1, 1, 1)',
               },
               {
                   offset: 1,
                   color: 'rgba(250, 93, 93, 1)',
               },
               ],
               false
           )
       }];

   var data = [];
   var data2 = [];
   for (var i = 0; i < optionymr_data.length; i++) {
       optionymr_data[i].itemStyle = {
           normal: {
               borderWidth: 5,
               borderRadius: 10,
               borderColor: optionymr_data[i].color,
               color: optionymr_data[i].color,
           },
       };
       delete optionymr_data[i].color;
       data.push(optionymr_data[i], {
           value: 25,
           name: '',
           itemStyle: {
               normal: {
                   label: {
                       show: false,
                   },
                   labelLine: {
                       show: false,
                   },
                   color: 'rgba(0, 0, 0, 0)',
                   borderColor: 'rgba(0, 0, 0, 0)',
                   borderWidth: 0,
               }
           }
       });
   }

   for (var i = 0; i < data.length; i++) {
       var obj = structuredClone(data[i]);
       delete obj.itemStyle.normal.borderWidth;
       delete obj.itemStyle.normal.borderRadius;
       data2.push(obj);
   }

   optionymr = {
       //title: {
       //    show: false,
       //    text: '报警类型统计'
       //},
       title: {
           text: '1090',
           subtext: "总量",
           itemGap: 5,
           top: "45%",
           left: "center",
           zlevel: 3, //层级
           textStyle: {
               fontWeight: '700',
               color: '#00173A',
               fontSize: '27'
           },
           subtextStyle: {
               color: "rgba(99,99,99,0.75)",
               fontSize: 18,
               top: "center"
           }
       },
       tooltip: {
           trigger: 'item'
       },
       legend: {
           show: true,
           itemWidth: 3,
           itemHeight: 36,
           //align: 'left',
           orient: 'horizontal',
           itemGap: 36,
           //type: 'plain',
           width: '100%',
           bottom: '5%',
           left: 'center',
           textStyle: {
               rich: {
                   fw: {
                       fontSize: 18,
                       fontWeight: '600'
                   },
                   fu: {
                       fontSize: 13,
                       color: '99,99,99,0.75',
                   }
               },
           },
           formatter(name) {
               var value = optionymr_data.find(c => c.name == name).value;
               return `{fw|${value}}\n{fu|${name}}`;
           }
       },
       series: [
           {
               type: 'pie',
               zlevel: 2,
               radius: ['0', '40%'],
               itemStyle: {
                   normal: {
                       //shadowBlur: 10,
                       //shadowColor: 'rgba(0,0,0,.75)',
                       borderRadius: 10, // 圆角
                       color: 'rgba(64,124,252,0.05)',
                       label: {
                           show: false
                       },
                       labelLine: {
                           show: false
                       }
                   },
               },
               hoverAnimation: false,
               data: [100],
           },
           {
               type: 'pie',
               clockWise: false,
               radius: ['53%', '55%'],
               hoverAnimation: false,
               //radius: ['50%', '60%'],
               avoidLabelOverlap: false,
               label: {
                   show: false,
                   position: 'left'
               },
               emphasis: {
                   label: {
                       show: false,
                       fontSize: 40,
                       fontWeight: 'bold'
                   }
               },
               labelLine: {
                   show: false
               },
               data: data
           },
           {
               type: 'pie',
               clockWise: false,
               radius: ['56%', '63%'],
               hoverAnimation: false,
               //radius: ['50%', '60%'],
               avoidLabelOverlap: false,
               itemStyle: {
                   opacity: '0.2',
                   borderRadius: ["50%", "50%"],
                   borderColor: '#fff',
                   borderWidth: 0
               },
               label: {
                   show: false,
                   position: 'left'
               },
               emphasis: {
                   label: {
                       show: false,
                   }
               },
               labelLine: {
                   show: false
               },
               data: data2
           },
       ],
   };
   optionymr && myChartymr.setOption(optionymr);
posted @ 2024-09-06 16:01  暖暖De幸福  阅读(163)  评论(0编辑  收藏  举报