• 【ECharts】环形图、饼状图

    目录

    color设置的颜色

    环形渐变色

    圆环中间显示文字

    悬浮显示中间文字

    悬浮显示中间文字，默认显示第一个

    循环高亮饼图块

    label文字过长重叠

    label和饼图一致

    label展示位置

    内容为0仍然显示扇区

    圆角环形图

    仿3D环形图

    label带小圆点

    label超出边界显示不全

    百分比圆环图

    延时动画（南丁格尔玫瑰图）

    玫瑰图数值差别大展示效果不佳

    color设置的颜色

    1. option = {
    2.     color:['blue','pink','lightyellow','orange','lightblue'],
    3.     series: [
    4.         {
    5.             name: '访问来源',
    6.             type: 'pie',
    7.             radius: ['40%', '70%'],
    8.             label: {
    9.                 show: false,
    10.                 position: 'center'
    11.             },
    12.             labelLine: {
    13.                 show: false
    14.             },
    15.             data: [
    16.                 {value: 1048, name: '搜索引擎'},
    17.                 {value: 735, name: '直接访问'},
    18.                 {value: 580, name: '邮件营销'},
    19.                 {value: 484, name: '联盟广告'},
    20.                 {value: 300, name: '视频广告'}
    21.             ]
    22.         }
    23.     ]
    24. };

    环形渐变色

    1. option = {
    2.     series: [
    3.         {
    4.             name: '访问来源',
    5.             type: 'pie',
    6.             radius: ['40%', '70%'],
    7.             data: [
    8.                 {
    9.                     value: 335,
    10.                     name: '直接访问',
    11.                     itemStyle: {
    12.                         color: {
    13.                             colorStops: [{
    14.                                     offset: 0,
    15.                                     color: '#ff7474 ' // 0% 处的颜色
    16.                                 }, {
    17.                                     offset: 1,
    18.                                     color: '#4176ff' // 100% 处的颜色
    19.                                 }]
    20.                         }
    21.                     }
    22.                 },
    23.                 {
    24.                     value: 310,
    25.                     name: '邮件营销',
    26.                     itemStyle: {
    27.                         color: {
    28.                             colorStops: [{
    29.                                     offset: 0,
    30.                                     color: '#ffe390' // 0% 处的颜色
    31.                                 }, {
    32.                                     offset: 1,
    33.                                     color: '#f7c222' // 100% 处的颜色
    34.                                 }]
    35.                         }
    36.                     }
    37.                 },
    38.  
    39.             ]
    40.         }
    41.     ]
    42. };

    圆环中间显示文字

    管网案例

    第一种方式：title的写法

    1. option = {
    2.   title : {
    3.     show:true,
    4.     text: '充电方式', // \n可以换行
    5.     x:'50%', // center
    6.     y: 'center',
    7.     textAlign: 'center',
    8.     textStyle: {
    9.       fontSize: '16',
    10.       fontStyle: 'normal',
    11.       fontWeight: '600',
    12.       lineHeight: '28',
    13.       color:'#333'
    14.     },
    15.   },
    16.   series: [
    17.     {
    18.       type:'pie',
    19.       radius: ['30%', '40%'],
    20.       label: {
    21.         normal: {
    22.             show: false,
    23.         },
    24.         emphasis: {
    25.             show: true,
    26.         }
    27.       },
    28.       data: [
    29.           {value: 1048, name: '搜索引擎'},
    30.           {value: 735, name: '直接访问'},
    31.           {value: 580, name: '邮件营销'},
    32.           {value: 484, name: '联盟广告'},
    33.           {value: 300, name: '视频广告'}
    34.       ]
    35.     }
    36.   ]
    37. };

    第二种写法：label

    1. option = {
    2.   series: [
    3.     {
    4.       type:'pie',
    5.       radius: ['30%', '40%'],
    6.       center: ['50%', '50%'],
    7.       avoidLabelOverlap: false,
    8.       label: {
    9.         normal: {
    10.           show: true,
    11.           position: 'center',
    12.           color:'#4c4a4a',
    13.           formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共发布活动}',
    14.           rich: {
    15.             total:{
    16.               fontSize: 35,
    17.               fontFamily : "微软雅黑",
    18.               color:'#454c5c'
    19.             },
    20.             active: {
    21.               fontFamily : "微软雅黑",
    22.               fontSize: 16,
    23.               color:'#6c7a89',
    24.               lineHeight:30,
    25.             },
    26.           }
    27.         },
    28.         emphasis: {//中间文字显示
    29.           show: true,
    30.         }
    31.       },
    32.       data: [
    33.         {value: 1048, name: '搜索引擎'},
    34.         {value: 735, name: '直接访问'},
    35.         {value: 580, name: '邮件营销'},
    36.         {value: 484, name: '联盟广告'},
    37.         {value: 300, name: '视频广告'}
    38.       ]
    39.     }
    40.   ]
    41. };

    第三种写法：graphic（还有中间白色间隔）

    1. var i = 0;
    2. var colors=['#5AC8FA','#4BD964','#A16EFF','#FF2D55','#FF9600','#CDCED1'];
    3. option = {
    4.   // 圆环中间的文字
    5.   graphic:[
    6.     {
    7.       type:'text',
    8.       left:'center',
    9.       top:'45%',
    10.       style:{
    11.         text:'标题',
    12.         fill:'#000',
    13.         width:30,
    14.         height:30,
    15.         fontSize:30,
    16.       }
    17.     },
    18.     {
    19.       type:'text',
    20.       left:'center',
    21.       top:'55%',
    22.       style:{
    23.         text:'文本',
    24.         fill:'#969696',
    25.         width:30,
    26.         height:30,
    27.         fontSize:24,
    28.       }
    29.     }
    30.   ],
    31.   series : [
    32.     {
    33.       type:'pie',
    34.       radius: ['45%', '60%'],
    35.       avoidLabelOverlap: false,
    36.       itemStyle:{
    37.         normal:{
    38.           color:function(){
    39.             return colors[i++]
    40.           },
    41.           // 白色间距
    42.           borderWidth: 6,
    43.           borderColor: '#ffffff',
    44.         }
    45.       },
    46.       label: {
    47.         normal: {
    48.           show: false,
    49.         },
    50.         emphasis: {
    51.           show: false,
    52.         }
    53.       },
    54.       labelLine: {
    55.         normal: {
    56.           show: false
    57.         }
    58.       },
    59.       data:[1,2,3,4]
    60.     }
    61.   ]
    62. }

    悬浮显示中间文字

    1. option = {
    2.   tooltip: {
    3.     trigger: 'item',
    4.     formatter:'{a}
      {b}:{c} {d}%'
    5.   },
    6.   legend: {
    7.     top: '5%',
    8.     left: 'center'
    9.   },
    10.   series: [
    11.     {
    12.       name: '访问来源',
    13.       type: 'pie',
    14.       radius: ['30%', '40%'],
    15.       avoidLabelOverlap: false,
    16.       label: {
    17.         show: false,
    18.         position: 'center'
    19.       },
    20.       emphasis: {
    21.         label: {
    22.           show: true,
    23.           fontSize: '30',
    24.           fontWeight: 'bold'
    25.         }
    26.       },
    27.       labelLine: {
    28.         show: false
    29.       },
    30.       data: [
    31.         {value: 1048, name: '搜索引擎'},
    32.         {value: 735, name: '直接访问'},
    33.         {value: 580, name: '邮件营销'},
    34.         {value: 484, name: '联盟广告'},
    35.         {value: 300, name: '视频广告'}
    36.       ]
    37.     }
    38.   ]
    39. };

    悬浮显示中间文字，默认显示第一个

    1. var myChart = echarts.init(document.getElementById('chart-container'), null, {
    2.   renderer: 'canvas',
    3.   useDirtyRect: false
    4. });
    5.  
    6. window.addEventListener('resize', myChart.resize);
    7.  
    8. var data= [
    9.   { value: 1048, name: 'Search Engine' },
    10.   { value: 735, name: 'Direct' },
    11.   { value: 580, name: 'Email' },
    12.   { value: 484, name: 'Union Ads' },
    13.   { value: 300, name: 'Video Ads' }
    14. ]
    15.  
    16. var keys = Object.keys(data)
    17.  
    18. var option = {
    19.   series: [
    20.     {
    21.       name: 'Access From',
    22.       type: 'pie',
    23.       radius: ['40%','60%'],
    24.       hoverOffset: 20,
    25.       label: {
    26.         normal: {
    27.           show: false,
    28.           position: 'center'
    29.         },
    30.         emphasis: {
    31.           show: true,
    32.           textStyle:{
    33.             fontSize: '20'
    34.           }
    35.         }
    36.       },
    37.       data: data,
    38.     }
    39.   ]
    40. };
    41.  
    42. if (option && typeof option === 'object') {
    43.   
    44.   myChart.setOption(option);
    45.   
    46.   // 默认第一个高亮
    47.   myChart.dispatchAction({
    48.     type:'highlight',
    49.     seriesIndex: 0,
    50.     dataIndex: 0
    51.   })
    52.   
    53.   myChart.on('mouseover',function(e){
    54.     // 取消所有高亮
    55.     myChart.dispatchAction({
    56.       type:'downplay',
    57.       seriesIndex: 0,
    58.       dataIndex: keys
    59.     })
    60.     // 当前高亮
    61.     myChart.dispatchAction({
    62.       type:'highlight',
    63.       seriesIndex: 0,
    64.       dataIndex: e.dataIndex
    65.     })
    66.   })
    67.   myChart.on('mouseout',function(e){
    68.     // 取消所有高亮
    69.     myChart.dispatchAction({
    70.       type:'downplay',
    71.       seriesIndex: 0,
    72.       dataIndex: keys
    73.     })
    74.     // 第一个高亮
    75.     myChart.dispatchAction({
    76.       type:'highlight',
    77.       seriesIndex: 0,
    78.       dataIndex: 0
    79.     })
    80.   })
    81. }

    循环高亮饼图块

    1. var myChart = echarts.init(document.getElementById('chart-container'), null, {
    2.   renderer: 'canvas',
    3.   useDirtyRect: false
    4. });
    5.  
    6. window.addEventListener('resize', myChart.resize);
    7.  
    8. var option = {
    9.   series: [
    10.     {
    11.       name: 'Access From',
    12.       type: 'pie',
    13.       radius: '50%',
    14.       data: [
    15.         { value: 1048, name: 'Search Engine' },
    16.         { value: 735, name: 'Direct' },
    17.         { value: 580, name: 'Email' },
    18.         { value: 484, name: 'Union Ads' },
    19.         { value: 300, name: 'Video Ads' }
    20.       ],
    21.       emphasis: {
    22.         itemStyle: {
    23.           shadowBlur: 10,
    24.           shadowOffsetX: 0,
    25.           shadowColor: 'rgba(0, 0, 0, 0.5)'
    26.         }
    27.       }
    28.     }
    29.   ]
    30. };
    31.  
    32. if (option && typeof option === 'object') {
    33.   myChart.setOption(option);
    34.  
    35.   timeSetIntervalFun()
    36. }
    37.  
    38. var currentIndex = 0
    39. function timeSetIntervalFun() {
    40.   timeSetInterval = setInterval(function() {
    41.     var dataLen = option.series[0].data.length;
    42.  
    43.     // 取消之前高亮的图形
    44.     myChart.dispatchAction({
    45.       type: 'downplay',
    46.       seriesIndex: 0,
    47.       dataIndex: currentIndex
    48.     });
    49.  
    50.     currentIndex = (currentIndex + 1) % dataLen;
    51.  
    52.     // 高亮当前块
    53.     myChart.dispatchAction({
    54.       type: 'highlight',
    55.       seriesIndex: 0,
    56.       dataIndex: currentIndex
    57.     });
    58.  
    59.   }, 2000);
    60.  
    61. }
    62.  
    63. myChart.on('mouseover', function(e) {
    64.   clearInterval(timeSetInterval)
    65.   
    66.   //取消默认选中高亮
    67.   myChart.dispatchAction({
    68.     type: 'downplay',
    69.     seriesIndex: 0,
    70.     dataIndex: currentIndex
    71.   });
    72.  
    73.   //高亮当前块
    74.   myChart.dispatchAction({
    75.     type: 'highlight',
    76.     seriesIndex: 1,
    77.     dataIndex: e.dataIndex
    78.   });
    79.  
    80.   currentIndex = e.dataIndex;
    81. });
    82.  
    83.  
    84. myChart.on('mouseout', function(e) {
    85.   timeSetIntervalFun()
    86.  
    87.   // 第一个高亮
    88.   myChart.dispatchAction({
    89.     type: 'highlight',
    90.     seriesIndex: 1,
    91.     dataIndex: 0
    92.   });
    93.  
    94. });

    label文字过长重叠

    1. option = {
    2.   series: [
    3.     {
    4.       type: 'pie',
    5.       clickable:false,　　　　　　// 是否开启点击
    6.       minAngle: 15,           　　 // 最小扇区角度（0 ~ 360），防止扇区太小影响交互
    7.       startAngle:45,             // 起始角度
    8.       avoidLabelOverlap: true,    // 是否启用防止标签重叠策略
    9.       hoverAnimation:false,　　   // 是否开启 hover 在扇区上的放大动画效果。
    10.       silent: true,　　　　　　　　// 图形是否不响应和触发鼠标事件
    11.       radius: ['20%', '30%'],
    12.       center: ['50%', '50%'],
    13.       label: {
    14.         show: true,
    15.         fontSize: '16',
    16.         align: 'left',
    17.         formatter(v) {
    18.           console.log(v)
    19.           let text = v.name
    20.           if(text.length <= 8){
    21.             return text;
    22.           }else if(text.length > 8 && text.length <= 16){
    23.             return text = `${text.slice(0,8)}\n${text.slice(8)}`
    24.           }else if(text.length > 16 && text.length <= 24){
    25.             return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
    26.           }else if(text.length > 24 && text.length <= 30){
    27.             return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
    28.           }else if(text.length > 30){
    29.             return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
    30.           }
    31.         }
    32.       },
    33.       labelLine: {
    34.         show: false
    35.       },
    36.       data: [
    37.         { value: 1, name: '一二三四五六七八九十' },
    38.         { value: 735, name: '一二三四五六' },
    39.         { value: 580, name: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十' },
    40.         { value: 484, name: '一二三四五六七八九十一二三四五六七八九十' },
    41.         { value: 300, name: '一二三四五六七八九十一二' }
    42.       ]
    43.     }
    44.   ]
    45. };

    label和饼图一致

    1. let colorList = ['lightgreen','pink','purple','orange','lightblue']
    2. let dataList = [
    3.   { value: 1048, name: 'Search Engine'},
    4.   { value: 735, name: 'Direct' },
    5.   { value: 580, name: 'Email' },
    6.   { value: 484, name: 'Union Ads' },
    7.   { value: 300, name: 'Video Ads' }
    8. ]
    9. option = {
    10.   series: [
    11.     {
    12.       type: 'pie',
    13.       radius: ['20%','30%'],
    14.       color: colorList,
    15.       data: dataList.map((item, index) => {
    16.         item.label = {
    17.           // 第一种方法
    18.           color: colorList[index],
    19.           // 第二种方法
    20.           color: 'inherit'
    21.         }
    22.         return item
    23.       }),
    24.     }
    25.   ]
    26. };

    label展示位置

    1. option = {
    2.     series: [{
    3.         name: '访问来源',
    4.         type: 'pie',
    5.         radius: '55%',
    6.         center: ['50%', '50%'],
    7.         label: {
    8.             show: true,
    9.             position: 'inside'
    10.         },
    11.         labelLine: {
    12.             show: false,
    13.         },
    14.         data: [
    15.             {
    16.                 value: 335,
    17.                 name: '良好'
    18.             },
    19.             {
    20.                 value: 135,
    21.                 name: '不及格',
    22.                 label: {
    23.                     show: true,
    24.                     position: 'outside'
    25.                 },
    26.                 labelLine: {
    27.                     show: true,
    28.                     smooth: true,
    29.                     lineStyle: {
    30.                         color: 'red'
    31.                     }
    32.                 }
    33.             }, 
    34.             {
    35.                 value: 1548,
    36.                 name: '优秀优秀优秀优秀优秀',
    37.                 label: {
    38.                     formatter: function (params) {
    39.                         if (params.data.name.length > 5) {
    40.                             var labelNewText = params.data.name.substring(0, 6) + ' ...'
    41.                         }
    42.                         return labelNewText
    43.                     }
    44.                 }
    45.             }
    46.         ],
    47.         itemStyle: {
    48.             emphasis: {
    49.                 shadowBlur: 10,
    50.                 shadowOffsetX: 0,
    51.                 shadowColor: 'rgba(0, 0, 0, 0.5)'
    52.             }
    53.         }
    54.     }]
    55. };

    内容为0仍然显示扇区

    配置最小角度就好了。

    1. option = {
    2.   series: [
    3.     {
    4.       type: 'pie',
    5.       radius: ['20%','30%'],
    6.       minAngle: 15,  // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
    7.       avoidLabelOverlap: true,   // 是否启用防止标签重叠策略
    8.       data: [
    9.         { value: 0, name: 'Search Engine' },
    10.         { value: 25, name: 'Direct' },
    11.         { value: 0, name: 'Email' },
    12.         { value: 40, name: 'Union Ads' },
    13.         { value: 0, name: 'Video Ads' }
    14.       ],
    15.     }
    16.   ]
    17. };

    圆角环形图

    1. option = {
    2.   series: [
    3.     {
    4.       type: 'pie',
    5.       radius: ['30%', '45%'],
    6.       avoidLabelOverlap: false,
    7.       itemStyle: {
    8.         borderRadius: 50,
    9.         borderColor: '#fff',
    10.         borderWidth: 30
    11.       },
    12.       label:{
    13.         show: false
    14.       },
    15.       data: [
    16.         { value: 1048, name: 'Search Engine' },
    17.         { value: 735, name: 'Direct' },
    18.         { value: 580, name: 'Email' },
    19.         { value: 484, name: 'Union Ads' },
    20.         { value: 300, name: 'Video Ads' }
    21.       ]
    22.     }
    23.   ]
    24. };

    仿3D环形图

    series多个值实现多个圆环

    graphic实现环形中间放图片、文字

    silent: true实现内部浅色圆环不触发事件，完全没有效果。

    emphasis:实现内部浅色圆环不触发事件，但是显示tooltip。

    1. let colors = ["#21BAD6", "#FF9728"];
    2. var img = 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png';
    3. option = {
    4.   color: colors,
    5.   tooltip: {
    6.     trigger: "item",
    7.     backgroundColor: "rgba(0,0,0,.6)",
    8.     borderColor: "rgba(147, 235, 248, .8)",
    9.     textStyle: {
    10.       color: "#FFF",
    11.     },
    12.   },
    13.   graphic: [
    14.     {
    15.       type: "image",
    16.       style: {
    17.         image: img,
    18.         width: 80,
    19.         height: 80,
    20.         color: "#fff",
    21.       },
    22.       left: "center",
    23.       top: "center",
    24.     },
    25.     {
    26.       type: "text",
    27.       left: "center",
    28.       top: "60%",
    29.       style: {
    30.         text: "晴天",
    31.         fill: "#333",
    32.         width: 30,
    33.         height: 30,
    34.         fontSize: 12,
    35.       },
    36.     },
    37.   ],
    38.   series: [
    39.     {
    40.       minAngle: 15, //扇区最小角度
    41.       startAngle: 190, //扇区起始角度
    42.       name: "天气分析",
    43.       type: "pie",
    44.       avoidLabelOverlap: true,
    45.       legendHoverLink: true,
    46.       radius: ["50%", "67%"],
    47.       data: [
    48.         {
    49.           value: 14,
    50.           name: "雨",
    51.         },
    52.         {
    53.           value: 48,
    54.           name: "晴",
    55.         },
    56.       ],
    57.     },
    58.     {
    59.       minAngle: 15, //扇区最小角度
    60.       startAngle: 190, //扇区起始角度
    61.       name: "天气分析",
    62.       type: "pie",
    63.       avoidLabelOverlap: true,
    64.       legendHoverLink: true,
    65.       radius: ["40%", "50%"],
    66.       data: [
    67.         {
    68.           value: 14,
    69.           name: "雨",
    70.         },
    71.         {
    72.           value: 48,
    73.           name: "晴",
    74.         },
    75.       ],
    76.  
    77.  
    78.       // 点击不放大
    79.       silent: true,
    80.       // 点击不放大，但是显示tooltip
    81.       emphasis:{//使用emphasis
    82.          disable:false,
    83.          scale:false,//不缩放
    84.          scaleSize:0,//为了防止失效直接设置未0
    85.       },
    86.  
    87.       itemStyle: {
    88.         opacity: 0.7,
    89.       },
    90.       label:{
    91.         show: false
    92.       }
    93.     }
    94.   ],
    95. };

    参考链接： Echarts饼图,环形图,鼠标触碰后取消默认放大效果_

    label带小圆点

    1. let colors = [
    2.   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    3.     { offset: 0, color: "#0D2A95" },
    4.     { offset: 1, color: "#05ABFA" },
    5.   ]),
    6.   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    7.     { offset: 0, color: "#148eb7" },
    8.     { offset: 1, color: "#58b986" },
    9.   ]),
    10. ];
    11.  
    12. // 数据
    13. let data = {
    14.   name: "人口分析",
    15.   type: "pie",
    16.   radius: "65%",
    17.   avoidLabelOverlap: true,
    18.   legendHoverLink: true,
    19.   color: colors,
    20.   data: [
    21.     {
    22.       value: 14,
    23.       name: "男人",
    24.       label: {
    25.         shadowColor: colors[2],
    26.       },
    27.     },
    28.     {
    29.       value: 48,
    30.       name: "女人",
    31.       label: {
    32.         shadowColor: colors[1],
    33.       },
    34.     },
    35.   ],
    36. }
    37.  
    38. option = {
    39.   tooltip: {
    40.     trigger: "item",
    41.     backgroundColor: "rgba(0,0,0,.6)",
    42.     borderColor: "rgba(147, 235, 248, .8)",
    43.     textStyle: {
    44.       color: "#FFF",
    45.     },
    46.   },
    47.   legend: {
    48.     show: true,
    49.     bottom: "0",
    50.     left: "center",
    51.     textStyle: {
    52.       color: "#333",
    53.     },
    54.   },
    55.   series: [
    56.     {
    57.       ...data,
    58.       
    59.       // label 文字的设置
    60.       label: {
    61.         formatter: "{b|{b}}\n {per|{d}% }",
    62.         rich: {
    63.           b: {
    64.             color: "#333",
    65.             fontSize: 12,
    66.             lineHeight: 24,
    67.           },
    68.           per: {
    69.             color: "#333",
    70.             fontSize: 12,
    71.           },
    72.         },
    73.       },
    74.  
    75.       // label 线条的设置
    76.       labelLine: {
    77.         length: 10, // 第一段线 长度
    78.         length2: 10, // 第二段线 长度
    79.         show: true,
    80.         emphasis: {
    81.           show: true,
    82.         },
    83.       },
    84.     },
    85.  
    86.     // label 圆点的设置
    87.     {
    88.       ...data,
    89.       label: {
    90.         backgroundColor: "auto", //圆点颜色，auto：映射的系列色
    91.         height: 0,
    92.         width: 0,
    93.         lineHeight: 0,
    94.         borderRadius: 2.5,
    95.         shadowBlur: 8,
    96.         shadowColor: "auto",
    97.         padding: [2.5, -2.5, 2.5, -2.5],
    98.       },
    99.       labelLine: {
    100.         length: 10, // 第一段线 长度
    101.         length2: 10, // 第二段线 长度
    102.         show: false,
    103.       },
    104.     },
    105.   ],
    106. }

    label超出边界显示不全

    缩小饼图大小或者label文字实现分行。

    百分比圆环图

    女孩的占比30%

    1. // girl的占比
    2. let girl = 300;
    3. let boy = 700;
    4. let total = 1000;
    5. let per = 30; // per = ((300/1000）*100)*100
    6. let color =[
    7.   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    8.     { offset: 0, color: "#17DFFD" },
    9.     { offset: 1, color: "#123E83" },
    10.   ]),
    11.   '#f1f1f1',
    12. ];
    13. option = {
    14.   color: color,
    15.   graphic:[
    16.     {
    17.       type:'text',
    18.       left:'center',
    19.       top:'43%',
    20.       style:{
    21.         text: girl,
    22.         textAlign: "center",
    23.         fill: color[0],
    24.         fontSize: 32,
    25.       }
    26.     },
    27.     {
    28.       type:'text',
    29.       left:'center',
    30.       top:'52%',
    31.       style:{
    32.         text: `女生占比`,
    33.         textAlign: "center",
    34.         fill: color[0],
    35.         fontSize: 34,
    36.       }
    37.     }
    38.   ],
    39.   series: [
    40.     {
    41.       type: 'pie',
    42.       radius: ['50%','30%'],
    43.       hoverAnimation: false,
    44.       avoidLabelOverlap: false,
    45.       data: [
    46.         { value: per, name: 'per' },
    47.         { value: 100, name: 'total' },
    48.       ],
    49.       label: {
    50.         show: true,
    51.         formatter:function(d) {
    52.           if(d.data.name == 'per') {
    53.             return `{value|${per}%}`
    54.           }else {
    55.             return ''
    56.           }
    57.         },
    58.         rich:{
    59.           value:{
    60.             fontSize:18,
    61.             color:color[0]
    62.           }
    63.         }
    64.       }
    65.     }
    66.   ]
    67. };

    延时动画（南丁格尔玫瑰图）

    1. option = {
    2.   tooltip: {
    3.     trigger: 'item',
    4.     formatter: '{a} 
      {b} : {c} ({d}%)'
    5.   },
    6.   series: [
    7.     {
    8.       name: '指令',
    9.       type: 'pie',
    10.       radius: [20, 140],
    11.       center: ['50%', '50%'],
    12.       roseType: 'radius',
    13.       data: [
    14.         { value: 40, name: 'rose 1' },
    15.         { value: 33, name: 'rose 2' },
    16.         { value: 28, name: 'rose 3' },
    17.         { value: 22, name: 'rose 4' },
    18.         { value: 20, name: 'rose 5' },
    19.         { value: 15, name: 'rose 6' },
    20.         { value: 12, name: 'rose 7' },
    21.         { value: 10, name: 'rose 8' }
    22.       ],
    23.       // 延时动画（渲染出来的时间）
    24.       animationEasing: "cubicInOut",
    25.       animationDuration: 6000,
    26.     },
    27.   ]
    28. };

    玫瑰图数值差别大展示效果不佳

    原始效果：

    期待效果：

    1. // 原始数据
    2. let data = [
    3.   { value: 15, name: '可乐' },
    4.   { value: 199, name: '雪碧' },
    5.   { value: 6, name: '美年达' },
    6.   { value: 2, name: '茶π' },
    7.   { value: 100, name: '苏打水' },
    8.   { value: 1, name: '矿泉水' },
    9.   { value: 10, name: '农夫山泉' },
    10.   { value: 1, name: '橙汁' }
    11. ]
    12.  
    13. // 数据排序
    14. data.sort((a, b) => b.value - a.value)
    15.  
    16. //和
    17. let sum = 0
    18. data.forEach(v=>{
    19.   sum += v.value
    20. })
    21.  
    22. // 新数据
    23. let b = data.map((it) => {
    24.   return {
    25.     name: it.name,
    26.     value: Math.pow(it.value, 0.099), // 值越大，数据差越小 最大值为0.5
    27.   }
    28. })
    29.  
    30. option = {
    31.   tooltip: {
    32.     trigger: 'item',
    33.     backgroundColor: 'rgba(255, 255, 255, 0.7)',
    34.     formatter: (p) => {
    35.       let value = ''
    36.       data.forEach((v)=> {
    37.         if(v.name == p.name) value = v.value
    38.       })
    39.       return p.name + " : " + value + ' (' + ((value / sum) * 100).toFixed(2) + '%)'
    40.     },
    41.   },
    42.   series: [
    43.     {
    44.       name: '饼图',
    45.       type: 'pie',
    46.       radius: [50, 250],
    47.       center: ['50%', '50%'],
    48.       roseType: 'area',
    49.       itemStyle: {
    50.         borderRadius: 8
    51.       },
    52.       label: {
    53.         show: true,
    54.         position: 'inside' ,
    55.         color: '#fff',
    56.       },
    57.       labelLine: {
    58.         show: false
    59.       },
    60.       data: b
    61.     }
    62.   ]
    63. };

  • 相关阅读:
    Deep Laplacian Pyramid Networks for Fast and Accurate Super-Resolution
    mysql8安装步骤教程
    趣谈LINUX系统的进程间通信
    金融行业需要什么样的低代码平台？
    上海亚商投顾：沪指震荡调整跌 减肥药、华为概念股持续活跃
    Java基础- StringBuilder & StringBuffer
    DeepStream--测试lpdnet车牌检测模型
    OpenCV图像处理学习十一，图像开操作与闭操作
    认识JAVA中的异常
    一致性HASH算法介绍，附代码
  • 原文地址：https://blog.csdn.net/wuli_youhouli/article/details/124078034