• 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}}
    
    ', // 线上文字
     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                   //      '100%',
     51                   //     align: 'right',
     52                   //     height: 22,
     53                   //     borderRadius: [4, 4, 0, 0]
     54                   // },
     55                   /*  hr: {
     56                     borderColor: '#333',
     57                      '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}}
    
    ', // 线上文字
     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                   //      '100%',
     89                   //     align: 'right',
     90                   //     height: 22,
     91                   //     borderRadius: [4, 4, 0, 0]
     92                   // },
     93                   /*  hr: {
     94                     borderColor: '#333',
     95                      '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
  • 相关阅读:
    k8s部署zk集群
    k8s容器探针
    k8s基于Canal来定义网络策略
    k8s StorageClass(NFS)
    k8s pv与pvc
    k8s的弹性伸缩(HPA)
    k8sStatefulSet
    k8s 亲和性
    VUE+SpringBoot环境准备
    oracle获取当前时间,精确到毫秒并指定精确位数的实现方法
  • 原文地址:https://www.cnblogs.com/acmyun/p/13489116.html
Copyright © 2020-2023  润新知