devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【ECharts】环形图、饼状图_echarts环形图

作者：2023面试高手 | 2024-02-18 05:55:19

赞

踩

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}<br/>{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} <br/>{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. };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/105405
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。