Echarts饼图自定义

echarts默认的样式比较单一，想要改变效果就要自己定义一些样式，下面是我想要展示的饼图样式：

悬浮样式代码：

tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}:{c}({d}%)'
        },

View Code

图例样式代码：

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

View Code

线上文字样式代码：

  1 series: [
  2           {
  3             name: '占比：',
  4             type: 'pie',
  5             radius: [15, 75], // 饼图的大小
  6             labelLine: {// 图形外文字线
  7               normal: {
  8                 length: 5,
  9                 length2: 80,
 10                 lineStyle: {
 11                   color: '#28B1C7'
 12                 }
 13               }
 14             },
 15             center: ['50%', '50%'],
 16             roseType: 'area', // 饼图的样式
 17             label: { // 线上文字的样式
 18               normal: {
 19                 formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字
 20                 borderWidth: 20,
 21                 borderRadius: 4,
 22                 // shadowBlur:3,
 23                 // shadowOffsetX: 2,
 24                 // shadowOffsetY: 2,
 25                 // shadowColor: '#999',
 26                 padding: [0, -80],
 27                 rich: {
 28                   a: {
 29                     color: '#fff',
 30                     fontSize: 12,
 31                     lineHeight: 20
 32                   },
 33                   b: {
 34                     color: '#fff',
 35                     fontSize: 12,
 36                     lineHeight: 20
 37                   },
 38                   c: {
 39                     color: '#fff',
 40                     fontSize: 12,
 41                     lineHeight: 20
 42                   },
 43                   d: {
 44                     color: '#fff',
 45                     fontSize: 12,
 46                     lineHeight: 20
 47                   }
 48                   // abg: {
 49                   //     backgroundColor: '#333',
 50                   //     width: '100%',
 51                   //     align: 'right',
 52                   //     height: 22,
 53                   //     borderRadius: [4, 4, 0, 0]
 54                   // },
 55                   /*  hr: {
 56                     borderColor: '#333',
 57                     width: '100%',
 58                     borderWidth: 0.5,
 59                     height: 0
 60                   }, */
 61                   // per: {
 62                   //   color: '#333',
 63                   //   padding: [2, 4],
 64                   //   borderRadius: 2
 65                   // }
 66                 }
 67               }
 68             },
 69             data: [
 70               {
 71                 value: 10,
 72                 name: '非甲烷总烃',
 73                 itemStyle: {
 74                   normal: {
 75                     color: '#FDD100'
 76                   }
 77                 }
 78               },
 79               {
 80                 value: 5,
 81                 name: 'PM2.5',
 82                 itemStyle: {
 83                   normal: {
 84                     color: '#08CED0'
 85                   }
 86                 }
 87               },
 88               {
 89                 value: 15,
 90                 name: 'PM10',
 91                 itemStyle: {
 92                   normal: {
 93                     color: '#7351E3'
 94                   }
 95                 }
 96               },
 97               {
 98                 value: 25,
 99                 name: '颗粒物',
100                 itemStyle: {
101                   normal: {
102                     color: '#FF4873'
103                   }
104                 }
105               },
106               {
107                 value: 20,
108                 name: '油烟浓度',
109                 itemStyle: {
110                   normal: {
111                     color: '#01BE6E'
112                   }
113                 }
114               }
115             ],
116             itemStyle: {
117               // normal: {
118               //   // 设置饼图的颜色
119               //   color: function() {
120               //     return colors[i++]
121               //   }
122               // },
123               emphasis: {
124                 shadowBlur: 10,
125                 shadowOffsetX: 0,
126                 shadowColor: 'rgba(0, 0, 0, 0.5)'
127               }
128             }
129           }
130         ]

View Code

饼图自适应：

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

View Code

全部代码：

  1 echartFun() {
  2       // var colors = ['#FDD100', '#08CED0', '#7351E3', '#FF4873', '#01BE6E']
  3       // 颜色下标，每次渲染饼图一个扇区加一操作
  4       // var i = 0
  5       var echertID = echarts.init(document.getElementById('echertID'))
  6       echertID.setOption({
  7         title: {
  8           text: '废气因子占比',
  9           left: 'left',
 10           textStyle: {
 11             'fontSize': 20,
 12             'fontWeight': '500',
 13             'color': '#fff'
 14           }
 15         },
 16         tooltip: {
 17           trigger: 'item',
 18           formatter: '{a} <br/>{b}:{c}({d}%)'
 19         },
 20         legend: {
 21           left: 'left',
 22           top: 'bottom',
 23           // bottom: 10,
 24           data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'],
 25           itemWidth: 24, // 设置宽度
 26           itemHeight: 14, // 设置高度
 27           itemGap: 5, // 设置间距
 28           textStyle: {
 29             // 文字颜色
 30             color: '#fff',
 31             // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
 32             fontWeight: '400',
 33             // 字体系列
 34             fontFamily: 'Source Han Sans CN',
 35             // 字体大小
 36             fontSize: 12
 37           }
 38         },
 39         series: [
 40           {
 41             name: '占比：',
 42             type: 'pie',
 43             radius: [15, 75], // 饼图的大小
 44             labelLine: {// 图形外文字线
 45               normal: {
 46                 length: 5,
 47                 length2: 80,
 48                 lineStyle: {
 49                   color: '#28B1C7'
 50                 }
 51               }
 52             },
 53             center: ['50%', '50%'],
 54             roseType: 'area', // 饼图的样式
 55             label: { // 线上文字的样式
 56               normal: {
 57                 formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字
 58                 borderWidth: 20,
 59                 borderRadius: 4,
 60                 // shadowBlur:3,
 61                 // shadowOffsetX: 2,
 62                 // shadowOffsetY: 2,
 63                 // shadowColor: '#999',
 64                 padding: [0, -80],
 65                 rich: {
 66                   a: {
 67                     color: '#fff',
 68                     fontSize: 12,
 69                     lineHeight: 20
 70                   },
 71                   b: {
 72                     color: '#fff',
 73                     fontSize: 12,
 74                     lineHeight: 20
 75                   },
 76                   c: {
 77                     color: '#fff',
 78                     fontSize: 12,
 79                     lineHeight: 20
 80                   },
 81                   d: {
 82                     color: '#fff',
 83                     fontSize: 12,
 84                     lineHeight: 20
 85                   }
 86                   // abg: {
 87                   //     backgroundColor: '#333',
 88                   //     width: '100%',
 89                   //     align: 'right',
 90                   //     height: 22,
 91                   //     borderRadius: [4, 4, 0, 0]
 92                   // },
 93                   /*  hr: {
 94                     borderColor: '#333',
 95                     width: '100%',
 96                     borderWidth: 0.5,
 97                     height: 0
 98                   }, */
 99                   // per: {
100                   //   color: '#333',
101                   //   padding: [2, 4],
102                   //   borderRadius: 2
103                   // }
104                 }
105               }
106             },
107             data: [
108               {
109                 value: 10,
110                 name: '非甲烷总烃',
111                 itemStyle: {
112                   normal: {
113                     color: '#FDD100'
114                   }
115                 }
116               },
117               {
118                 value: 5,
119                 name: 'PM2.5',
120                 itemStyle: {
121                   normal: {
122                     color: '#08CED0'
123                   }
124                 }
125               },
126               {
127                 value: 15,
128                 name: 'PM10',
129                 itemStyle: {
130                   normal: {
131                     color: '#7351E3'
132                   }
133                 }
134               },
135               {
136                 value: 25,
137                 name: '颗粒物',
138                 itemStyle: {
139                   normal: {
140                     color: '#FF4873'
141                   }
142                 }
143               },
144               {
145                 value: 20,
146                 name: '油烟浓度',
147                 itemStyle: {
148                   normal: {
149                     color: '#01BE6E'
150                   }
151                 }
152               }
153             ],
154             itemStyle: {
155               // normal: {
156               //   // 设置饼图的颜色
157               //   color: function() {
158               //     return colors[i++]
159               //   }
160               // },
161               emphasis: {
162                 shadowBlur: 10,
163                 shadowOffsetX: 0,
164                 shadowColor: 'rgba(0, 0, 0, 0.5)'
165               }
166             }
167           }
168         ]
169       })
170       setTimeout(function() {
171         window.addEventListener('resize', function() {
172           echertID.resize()
173         })
174       }, 50)
175     },

View Code

posted @ 2020-08-12 10:22 光影易逝阅读(2638) 评论(0) 编辑收藏举报

刷新页面返回顶部

Echarts饼图自定义

公告