Echarts饼图图例、饼图样式、文字在线上的样式及自适应宽度

最新推荐文章于 2024-07-09 15:58:44 发布

原创最新推荐文章于 2024-07-09 15:58:44 发布 · 1.9w 阅读

21 ·

CC 4.0 BY-SA版权

前端问题同时被 2 个专栏收录

6 篇文章

订阅专栏

Echarts

4 篇文章

订阅专栏

本文介绍了如何使用Echarts自定义饼图样式，包括改变图例文字颜色，实现图例的自适应宽度，以及调整饼图的颜色。通过设置legend样式属性和addEventListener监听窗口变化，实现饼图在不同背景下的最佳视觉效果。

在默认的饼状图里面，饼图样式是单一的，有时候根据ui需要，根据不同的背景色，需要将图例文字调成白色或者其他颜色，那么，修改这些的还是一句话，修改某个属性即可。
这是我的饼图样式：

1、legend改变图例样式:

legend: {
  left: 'left',
  top: 'bottom',
  // bottom: 10,
  data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'],
  itemWidth: 24, // 设置宽度
  itemHeight: 14, // 设置高度
  itemGap: 5, // 设置间距
  textStyle: {
    // 文字颜色
    color: '#fff',
    // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
    fontWeight: '400',
    // 字体系列
    fontFamily: 'Source Han Sans CN',
    // 字体大小
    fontSize: 12
  }
},

2、addEventListener自适应宽度：

setTimeout(function() {
   window.addEventListener('resize', function() {
      echertID.resize()
    })
  }, 50)

3、自定义饼图颜色：

// var colors = ['#FDD100', '#08CED0', '#7351E3', '#FF4873', '#01BE6E']
// 颜色下标，每次渲染饼图一个扇区加一操作
// var i = 0
series: [
{
	itemStyle: {
       normal: {
       		// 设置饼图的颜色
	       color: function() {
	       	return colors[i++]
	       }
       },
       emphasis: {
         shadowBlur: 10,
         shadowOffsetX: 0,
         shadowColor: 'rgba(0, 0, 0, 0.5)'
       }
     }
}
]

4、饼图样式：

series: [
{
 name: '占比：',
 type: 'pie',
 radius: [15, 75], // 饼图的大小
 labelLine: {// 图形外文字线
   normal: {
     length: 5,
     length2: 80,
     lineStyle: {
       color: '#28B1C7'
     }
   }
 },
 center: ['50%', '50%'],
 roseType: 'area', // 饼图的样式
 label: { // 线上文字的样式
   normal: {
     formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字
     borderWidth: 20,
     borderRadius: 4,
     // shadowBlur:3,
     // shadowOffsetX: 2,
     // shadowOffsetY: 2,
     // shadowColor: '#999',
     padding: [0, -80],
     rich: {
       a: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 20
       },
       b: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 20
       },
       c: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 20
       },
       d: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 20
       }
       // abg: {
       //     backgroundColor: '#333',
       //     width: '100%',
       //     align: 'right',
       //     height: 22,
       //     borderRadius: [4, 4, 0, 0]
       // },
       /*  hr: {
         borderColor: '#333',
         width: '100%',
         borderWidth: 0.5,
         height: 0
       }, */
       // per: {
       //   color: '#333',
       //   padding: [2, 4],
       //   borderRadius: 2
       // }
     }
   }
 },

关于图例的全部代码：

 echartFun() {
   // var colors = ['#FDD100', '#08CED0', '#7351E3', '#FF4873', '#01BE6E']
   // 颜色下标，每次渲染饼图一个扇区加一操作
   // var i = 0
   var echertID = echarts.init(document.getElementById('echertID'))
   echertID.setOption({
     title: {
       text: '废气因子占比',
       left: 'left',
       textStyle: {
         'fontSize': 20,
         'fontWeight': '500',
         'color': '#fff'
       }
     },
     tooltip: {
       trigger: 'item',
       formatter: '{a} <br/>{b}:{c}({d}%)'
     },
     legend: {
       left: 'left',
       top: 'bottom',
       // bottom: 10,
       data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'],
       itemWidth: 24, // 设置宽度
       itemHeight: 14, // 设置高度
       itemGap: 5, // 设置间距
       textStyle: {
         // 文字颜色
         color: '#fff',
         // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
         fontWeight: '400',
         // 字体系列
         fontFamily: 'Source Han Sans CN',
         // 字体大小
         fontSize: 12
       }
     },
     series: [
       {
         name: '占比：',
         type: 'pie',
         radius: [15, 75], // 饼图的大小
         labelLine: {// 图形外文字线
           normal: {
             length: 5,
             length2: 80,
             lineStyle: {
               color: '#28B1C7'
             }
           }
         },
         center: ['50%', '50%'],
         roseType: 'area', // 饼图的样式
         label: { // 线上文字的样式
           normal: {
             formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字
             borderWidth: 20,
             borderRadius: 4,
             // shadowBlur:3,
             // shadowOffsetX: 2,
             // shadowOffsetY: 2,
             // shadowColor: '#999',
             padding: [0, -80],
             rich: {
               a: {
                 color: '#fff',
                 fontSize: 12,
                 lineHeight: 20
               },
               b: {
                 color: '#fff',
                 fontSize: 12,
                 lineHeight: 20
               },
               c: {
                 color: '#fff',
                 fontSize: 12,
                 lineHeight: 20
               },
               d: {
                 color: '#fff',
                 fontSize: 12,
                 lineHeight: 20
               }
               // abg: {
               //     backgroundColor: '#333',
               //     width: '100%',
               //     align: 'right',
               //     height: 22,
               //     borderRadius: [4, 4, 0, 0]
               // },
               /*  hr: {
                 borderColor: '#333',
                 width: '100%',
                 borderWidth: 0.5,
                 height: 0
               }, */
               // per: {
               //   color: '#333',
               //   padding: [2, 4],
               //   borderRadius: 2
               // }
             }
           }
         },
         data: [
           {
             value: 10,
             name: '非甲烷总烃',
             itemStyle: {
               normal: {
                 color: '#FDD100'
               }
             }
           },
           {
             value: 5,
             name: 'PM2.5',
             itemStyle: {
               normal: {
                 color: '#08CED0'
               }
             }
           },
           {
             value: 15,
             name: 'PM10',
             itemStyle: {
               normal: {
                 color: '#7351E3'
               }
             }
           },
           {
             value: 25,
             name: '颗粒物',
             itemStyle: {
               normal: {
                 color: '#FF4873'
               }
             }
           },
           {
             value: 20,
             name: '油烟浓度',
             itemStyle: {
               normal: {
                 color: '#01BE6E'
               }
             }
           }
         ],
         itemStyle: {
           // normal: {
           //   // 设置饼图的颜色
           //   color: function() {
           //     return colors[i++]
           //   }
           // },
           emphasis: {
             shadowBlur: 10,
             shadowOffsetX: 0,
             shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
         }
       }
     ]
   })
   setTimeout(function() {
     window.addEventListener('resize', function() {
       echertID.resize()
     })
   }, 50)
 },