经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Echarts » 查看文章
Echarts设置饼状图保证你看的明明白白
来源：cnblogs　　作者：南风晚来晚相识　　时间：2024/5/11 9:15:31　　对本文有异议

简单的饼状图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>ECharts-动画</title>
  7.   <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
  8. </head>
  9. <div style="width: 780px;height: 400px;" id="box"></div>
  10. </body>
  11. <script>
  12.   let myChart = echarts.init(document.querySelector('#box'))
  13.   // 第一个颜色是从正上方开始的
  14.   let option = {
  15.     tooltip: {
  16.       trigger: 'item'
  17.     },
  18.     series: [
  19.       {
  20.         type: 'pie',
  21.         center: ['40%', '50%'], // 饼状图的位置
  22.         /**
  23.          * radius：饼状图的大小
  24.          * 它是一个数组，第1个值表示里面的圆的大小
  25.          * 第2个值表示外面的圆的大小
  26.          * */ 
  27.         radius: ['45%', '60%'], 
  28.         data: [
  29.           { value: 1048, name: '名称1' },
  30.           { value: 735, name: '名称2' },
  31.           { value: 580, name: '名称3' },
  32.           { value: 484, name: '名称4' },
  33.           { value: 300, name: '名称5' }
  34.         ]
  35.       }
  36.     ]
  37.   }
  38.   myChart.setOption(option);
  39. </script>
  41. </html>

给饼状图设置渐变色

  1. ...其他配置,
  2. data:[ 相关数据],
  3. itemStyle: {
  4.   normal: {
  5.     label: {
  6.       padding: [0, 0],
  7.       alignTo: 'labelLine'
  8.     },
  9.     color: (list) => {
  10.       let colorList = [
  11.       {  
  12.         "colorStart": "#FF9800",  
  13.         "colorEnd": "#FFD180"  
  14.       },  
  15.       {  
  16.         "colorStart": "#673AB7",  
  17.         "colorEnd": "#9575CD"  
  18.       },
  19.       {  
  20.         "colorStart": "#0F9D58",  
  21.         "colorEnd": "#4CAF50"  
  22.       }, 
  23.       {  
  24.         "colorStart": "#00BCD4",  
  25.         "colorEnd": "#64FFDA"  
  26.       },
  27.       {  
  28.         "colorStart": "#E91E63",  
  29.         "colorEnd": "#FF80AB"  
  30.       },
  31.       ]
  32.       return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
  33.         {
  34.           //左、下、右、上
  35.           offset: 0,
  36.           color: colorList[list.dataIndex]["colorStart"],
  37.         },
  38.         {
  39.           offset: 1,
  40.           color: colorList[list.dataIndex]["colorEnd"],
  41.         },
  42.       ]);
  43.     }
  44.   }
  45. },

给饼状图外围配置一条虚线

  1. { //最外部细虚线
  2.   // 类型是仪表盘
  3.   type: 'gauge',
  4.   // 位置必须和饼状图的一样，否者设置出来会有偏差
  5.   center: ['40%', '50%'],
  6.   /**
  7.     * startAngle：仪表盘起始角度。
  8.     * 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
  9.     * 就是说：逆时针
  10.     * */
  11.   startAngle: 270,
  12.   // endAngle：仪表盘结束角度。最初值是：-89.9999,
  13.   endAngle: -90,
  14.   // 设置虚线的大小
  15.   radius: '75%',
  16.   // 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
  17.   // 如果设置为 show: true,就会显示刻度样式
  18.   axisTick: {
  19.     show: false
  20.   },
  21.   // false 不显示标签
  22.   axisLabel: {
  23.     show: false
  24.   },
  25.   // 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
  26.   // splitNumber: 65 更加直接的表现是外层有65段虚线
  27.   splitNumber: 65,
  28.   axisLine: {
  29.     // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
  30.     show: false,
  31.     // lineStyle：仪表盘轴线样式。
  32.     // lineStyle: {
  33.     //   // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
  34.     //   color: [
  35.     //   [0.1, 'red'], // 0~10% 红轴
  36.     //   [0.2, 'green'], // 10~20% 绿轴
  37.     //   [0.3, 'blue'], // 20~30% 蓝轴
  38.     //   ],
  39.     //   width: 10
  40.     // }
  41.   },
  42.   // 分隔线样式。
  43.   splitLine: {
  44.     show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
  45.     length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
  46.     lineStyle: {
  47.       width: 10, // 分隔线线长。支持相对半径的百分比。
  48.       color: '#E5E6E8', // 线的颜色
  49.     }
  50.   },
  51.   // 仪表盘详情，用于显示数据。
  52.   detail: {
  53.     show: false
  54.   },
  55. },

视觉引导线配置

  1. ...其他配置,
  2. data:[ 相关数据],
  3. // 标签的视觉引导线配置
  4. labelLine: {
  5.   show: true, // 是否显示视觉引导线
  6.   length: 20, // 视觉引导线第一段的长度。 
  7.   length2: 40,  // 视觉引导项第二段的长度。 
  8.   lineStyle: {
  9.     color: '#E5E6E8', // 这里设置扇线颜色为灰色
  10.     width: 1, // 线段宽度  
  11.     type: 'solid', // 线段类型，默认为实线 
  12.   }
  13. },


为什么hover的时候视觉引导线发生了变化?

  1. 我看官网都不会发生变化.
  2. 是与版本有关还是配置项有关

hover时视觉引导线和对应的名称样式不发生改变

  1. ...其他配置,
  2. data:[ 相关数据],
  3.  // 高亮状态的扇区和标签样式 设置饼图外围虚线
  4. emphasis: {
  5.   // 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
  6.   label: {
  7.       color: '#333333' 
  8.   },
  9.   labelLine: {
  10.     // 这里设置悬停时引导线的颜色，与非悬停时保持一致
  11.     lineStyle: {
  12.         color: '#E5E6E8' 
  13.     }
  14.   }
  15. }

可以自定义富文本样式

  1. ...其他配置,
  2. data:[ 相关数据],
  3.  // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
  4.   label: {
  5.     show: true,
  6.     // 标签的位置。
  7.     position: 'outside',
  8.     normal: {
  9.       textStyle: {
  10.         color: '#333333' // 设置引导线外层文字描述的颜色
  11.       },
  12.       // 字符串模板 模板变量有：
  13.       // {a}：系列名。
  14.       // {b}：数据名。
  15.       // {c}：数据值。
  16.       // {d}：百分比。
  17.       formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
  18.       padding: [0, -40], // 设置标签距离引导线水平方向的距离
  19.       rich: {
  20.         aisB1: {
  21.           color: '#333333',
  22.           //这里还有其他属性；大家可以去查看
  23.         },
  24.         aisC1:{
  25.           color: '#333333',
  26.         },
  27.         aisD1: {
  28.           color: '#333333', // 这是数据值的颜色
  29.         },
  30.       }
  31.     }
  32.   },

名称在引导线的上方-使用\n

  1. 因为是使用的是4.9的版本；
  2. 所以设置名称在引导线的上方使用了一点技巧；
  3. 那就是换行符 \n
  4. formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}\n\n',

名称在引导线的上方-使用labelLayout 需要再5.0以上版本

  1. ...其他配置,
  2. data:[ 相关数据],
  3. // 从 v5.0.0 开始支持
  4. labelLayout:{
  5.   // 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
  6.   verticalAlign:'bottom',
  7.   // 标签在 y 方向上的像素偏移，设置标签在引导线的上方
  8.   dy:-4
  9. },

饼状图中间配置一个阴影圆

  1. // 配置里面的圆
  2.   {
  3.   type: 'gauge',
  4.   center: ['40%', '50%'], // 饼状图的位置
  5.   radius: '35%',
  6.   // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
  7.   // 如果是版本是5，这里可以是360
  8.   startAngle: 359.999,
  9.   endAngle: 0,
  10.   splitNumber: 4,
  11.   zlevel: 10,
  12.   axisLine: { // 坐标轴线
  13.     lineStyle: { // 属性lineStyle控制线条样式
  14.       color: [
  15.         [1, '#fff']
  16.       ],
  17.       width: '100%',
  18.       shadowColor: '#CDCDCD', //背景阴影颜色
  19.       shadowOffsetX: 0, // X偏移量
  20.       shadowOffsetY: 0, // Y偏移量
  21.       shadowBlur: 10, // 模糊范围
  22.     }
  23.   },
  24.   splitLine: { //分隔线样式
  25.     show: false,
  26.   },
  27.   axisLabel: { //刻度标签
  28.     show: false,
  29.   },
  30.   axisTick: { //刻度样式
  31.     show: false,
  32.   },
  33.   detail: {
  34.     show: false,
  35.   },
  36.   //仪表盘指针。
  37.   pointer: {
  38.     // 不显示仪表盘中的指针
  39.     show: false,
  40.   },
  41.   title: {
  42.     // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
  43.     // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
  44.     offsetCenter: ['0%', "0%"],
  45.     color: '#999999',
  46.   },
  47.   data: [{
  48.     name: "2024-05-09\n15:36:25",
  49.   }]
  50. },

全部代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>ECharts-动画</title>
  8.   <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script>
  9.   <!-- <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.js"></script> -->
  10. </head>
  11. <div style="width: 780px;height: 400px;" id="box"></div>
  12. </body>
  13. <script>
  14.   let myChart = echarts.init(document.querySelector('#box'))
  15.   // 第一个颜色是从正上方开始的
  16.   let option = {
  17.     tooltip: {
  18.       trigger: 'item'
  19.     },
  20.     series: [
  21.       { //最外部细虚线
  22.         // 类型是仪表盘
  23.         type: 'gauge',
  24.         // 位置必须和饼状图的一样，否者设置出来会有偏差
  25.         center: ['40%', '50%'],
  26.         /**
  27.          * startAngle：仪表盘起始角度。
  28.          * 圆心正右手侧为0度，正上方为90度，正左手侧为180度。
  29.          * 就是说：逆时针
  30.          * */
  31.         startAngle: 270,
  32.         // endAngle：仪表盘结束角度。最初值是：-89.9999,
  33.         endAngle: -90,
  34.         // 设置虚线的大小
  35.         radius: '75%',
  36.         // 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度
  37.         // 如果设置为 show: true,就会显示刻度样式
  38.         axisTick: {
  39.           show: false
  40.         },
  41.         // false 不显示标签
  42.         axisLabel: {
  43.           show: false
  44.         },
  45.         // 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距
  46.         // splitNumber: 65 更加直接的表现是外层有65段虚线
  47.         splitNumber: 65,
  48.         axisLine: {
  49.           // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见
  50.           show: false,
  51.           // lineStyle：仪表盘轴线样式。
  52.           // lineStyle: {
  53.           //   // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8']
  54.           //   color: [
  55.           //   [0.1, 'red'], // 0~10% 红轴
  56.           //   [0.2, 'green'], // 10~20% 绿轴
  57.           //   [0.3, 'blue'], // 20~30% 蓝轴
  58.           //   ],
  59.           //   width: 10
  60.           // }
  61.         },
  62.         // 分隔线样式。
  63.         splitLine: {
  64.           show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见
  65.           length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度
  66.           lineStyle: {
  67.             width: 10, // 分隔线线长。支持相对半径的百分比。
  68.             color: '#E5E6E8', // 线的颜色
  69.           }
  70.         },
  71.         // 仪表盘详情，用于显示数据。
  72.         detail: {
  73.           show: false
  74.         },
  75.       },
  76.       // 圆环
  77.       {
  78.         type: 'pie',
  79.         center: ['40%', '50%'], // 饼状图的位置
  80.         /**
  81.          * radius：饼状图的大小
  82.          * 它是一个数组，第1个值表示里面的圆的大小
  83.          * 第2个值表示外面的圆的大小
  84.          * */
  85.         radius: ['45%', '60%'],
  86.         itemStyle: {
  87.           normal: {
  88.             label: {
  89.               padding: [0, 0],
  90.               alignTo: 'labelLine'
  91.             },
  92.             color: (list) => {
  93.               let colorList = [
  94.                 {
  95.                   "colorStart": "#FF9800",
  96.                   "colorEnd": "#FFD180"
  97.                 },
  98.                 {
  99.                   "colorStart": "#673AB7",
  100.                   "colorEnd": "#9575CD"
  101.                 },
  102.                 {
  103.                   "colorStart": "#0F9D58",
  104.                   "colorEnd": "#4CAF50"
  105.                 },
  106.                 {
  107.                   "colorStart": "#00BCD4",
  108.                   "colorEnd": "#64FFDA"
  109.                 },
  110.                 {
  111.                   "colorStart": "#E91E63",
  112.                   "colorEnd": "#FF80AB"
  113.                 },
  114.               ]
  115.               return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
  116.                 {
  117.                   //左、下、右、上
  118.                   offset: 0,
  119.                   color: colorList[list.dataIndex]["colorStart"],
  120.                 },
  121.                 {
  122.                   offset: 1,
  123.                   color: colorList[list.dataIndex]["colorEnd"],
  124.                 },
  125.               ]);
  126.             }
  127.           }
  128.         },
  129.         // 标签的视觉引导线配置
  130.         labelLine: {
  131.           show: true, // 是否显示视觉引导线
  132.           length: 20, // 视觉引导线第一段的长度。 
  133.           length2: 50,  // 视觉引导项第二段的长度。 
  134.           lineStyle: {
  135.             color: '#E5E6E8', // 这里设置扇线颜色为灰色
  136.             width: 1, // 线段宽度  
  137.             type: 'solid', // 线段类型，默认为实线 
  138.           }
  139.         },
  140.         // 从 v5.0.0 开始支持  标签的统一布局配置。
  141.         labelLayout:{
  142.           // 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。
  143.           verticalAlign:'bottom',
  144.           // 标签在 y 方向上的像素偏移，设置标签在引导线的上方
  145.           dy:-4
  146.         },
  147.         // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
  148.         label: {
  149.           show: true,
  150.           // 标签的位置。
  151.           position: 'outside',
  152.           normal: {
  153.             textStyle: {
  154.               color: '#333333' // 设置引导线外层文字描述的颜色
  155.             },
  156.             // 字符串模板 模板变量有：
  157.             // {a}：系列名。
  158.             // {b}：名称。
  159.             // {c}：数据值。
  160.             // {d}：百分比。
  161.             formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}',
  162.             padding: [0, -40], // 设置标签距离引导线水平方向的距离
  163.             rich: {
  164.               aisB1: {
  165.                 color: '#333333',
  166.               },
  167.               aisC1: {
  168.                 color: '#333333',
  169.               },
  170.               aisD1: {
  171.                 color: '#333333', // 这是数据值的颜色
  172.               },
  173.             }
  174.           }
  175.         },
  176.         data: [
  177.           { value: 1048, name: '名称1' },
  178.           { value: 735, name: '名称2' },
  179.           { value: 580, name: '名称3' },
  180.           { value: 484, name: '名称4' },
  181.           { value: 300, name: '名称5' }
  182.         ],
  183.         // 高亮状态的扇区和标签样式 设置饼图外围虚线
  184.         emphasis: {
  185.           // 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致
  186.           label: {
  187.             color: '#333333'
  188.           },
  189.           labelLine: {
  190.             // 这里设置悬停时引导线的颜色，与非悬停时保持一致
  191.             lineStyle: {
  192.               color: '#E5E6E8'
  193.             }
  194.           }
  195.         }
  196.       },
  198.        // 配置里面的圆
  199.        {
  200.         type: 'gauge',
  201.         center: ['40%', '50%'], // 饼状图的位置
  202.         radius: '35%',
  203.         // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示
  204.         // 如果是版本是5，这里可以是360
  205.         startAngle: 359.999,
  206.         endAngle: 0,
  207.         splitNumber: 4,
  208.         zlevel: 10,
  209.         axisLine: { // 坐标轴线
  210.           lineStyle: { // 属性lineStyle控制线条样式
  211.             color: [
  212.               [1, '#fff']
  213.             ],
  214.             width: '100%',
  215.             shadowColor: '#CDCDCD', //背景阴影颜色
  216.             shadowOffsetX: 0, // X偏移量
  217.             shadowOffsetY: 0, // Y偏移量
  218.             shadowBlur: 10, // 模糊范围
  219.           }
  220.         },
  221.         splitLine: { //分隔线样式
  222.           show: false,
  223.         },
  224.         axisLabel: { //刻度标签
  225.           show: false,
  226.         },
  227.         axisTick: { //刻度样式
  228.           show: false,
  229.         },
  230.         detail: {
  231.           show: false,
  232.         },
  233.         //仪表盘指针。
  234.         pointer: {
  235.           // 不显示仪表盘中的指针
  236.           show: false,
  237.         },
  238.         title: {
  239.           // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。
  240.           // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
  241.           offsetCenter: ['0%', "0%"],
  242.           color: '#999999',
  243.         },
  244.         data: [{
  245.           name: "2024-05-09\n15:36:25",
  246.         }]
  247.       },
  248.     ]
  249.   }
  250.   myChart.setOption(option);
  251. </script>

原文链接：https://www.cnblogs.com/IwishIcould/p/18182022

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Echarts热门文章

  • Python+Pyecharts实现散点图的绘制
  • vue+echarts5实现中国地图的示例代码
  • echarts中几种渐变方式的具体实现方式
  • Echart Bar双柱状图样式最全详解
  • vue echarts实现柱状图动态展示
  • 如何利用echarts画雷达图和折柱混合
  • Echarts Bar横向柱状图实例代码
  • ECharts图表动态修改series显示隐藏
  • 【Dotnet 工具箱】跨平台图表库 LiveCharts2
  • vue2?利用echarts?单独绘制省份的步骤

    • Echarts推荐文章

  • Echarts设置饼状图保证你看的明明白白
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
  • echarts X轴类目名太长时隐藏，hover时显示全部
  • vue3+ts打开echarts的正确方式
  • echarts设置多条折线不是你想的那样简单
  • 将ECharts图表插入到Word文档中
  • echarts中几种渐变方式的具体实现方式
  • vue中echarts关系图动态增删节点以及连线方式
  • 如何利用echarts画雷达图和折柱混合
  • pyecharts的Tab和Legend布局详情

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号