设备总数echarts 饼配置项内容和展示

饼图

       let dataPie = [

     {
         value: 410,
         name: '企业'
     },
     {
         value: 380,
         name: '政府'
     },
     {
         value: 501,
         name: '个人'
     },
 ];
 let colorPie = ['#173852', '#0b2036', '#002e49'];
 let colorWrap = ['#3087d6', '#f6ce54', '#4be1ff'];
 let baseDataPie = [],
     baseDataWrap = [];
 let total = 0;
 dataPie.forEach(function(val, idx, arr) {
     total += val.value;
 })
 for (let i = 0; i < dataPie.length; i++) {
     baseDataPie.push({
         value: dataPie[i].value,
         name: dataPie[i].name,
         itemStyle: {
             normal: {
                 borderWidth: 20,
                 borderColor: colorPie[i],
             }
         }
     });
     baseDataWrap.push({
         value: dataPie[i].value,
         name: dataPie[i].name,
         itemStyle: {
             normal: {
                 color: colorWrap[i],
                 borderWidth: 5,
                 borderColor: colorWrap[i],
                 shadowBlur: 50,
                 shadowColor: 'rgba(7, 132, 250, 0.8)',
             }
         }
     }, {
         value: 20,
         name: '',
         itemStyle: {
             normal: {
                 color: 'transparent',
                 borderWidth: 5,
                 borderColor: 'transparent',

             }
         }
     });
 }

 option = {
     backgroundColor: "#031223",
     title: {
         text: '设备总数',
         subtext: '10,225',
         textStyle: {
             color: '#00b5f3',
             fontSize: 14,

         },
         subtextStyle: {
             align: 'center',
             fontSize: 20,
             color: ['#85c7e3'],
             fontWeight: 800
         },
         x: '33%',
         y: 'center',
     },
     grid: {
         left: '1%', // 与容器左侧的距离
         right: '1%', // 与容器右侧的距离
         top: '1%', // 与容器顶部的距离
         bottom: '1%', // 与容器底部的距离

     },
     tooltip: {
         show: true,
         trigger: 'item',
         formatter: "{a}：{b} <br/>占比：{d}%"
     },
     legend: {
         data: ['企业', '政府', '个人'],
         icon: 'vertical',
         right: '5%',
         top: 'center',
         orient: 'vertical',
         itemGap: 20,
         itemWidth: 15,
         itemHeight: 8,
         formatter: function(name) {


             let target,percent;
             for (let i = 0; i < dataPie.length; i++) {
                 if (dataPie[i].name === name) {
                     target = dataPie[i].value;
                     percent = ((target/total)*100).toFixed(2);
                 }
             }
             let arr = [ percent+'% '+' {yellow|' + target + '}', ' {blue|' + name + '}' ];
             return arr.join("\n")

         },
         textStyle: {

             lineHeight: 20,
             color: '#f0f4f6',
             align: 'right',
             rich: {
                 yellow: {
                     color: '#f6ce54',
                    

                 },
                 blue: {
                     color: '#4be1ff',
                      align: 'right',

                 },
             }

         },
     },

     series: [{
             name: '',
             type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
             center: ['40%', '50%'],
             radius: ['80%', '81%'],
             tooltip: {
                 show: false
             },
             label: {
                 normal: {
                     show: false
                 }
             },
             data: baseDataWrap
         },
         {
             name: '报警',
             type: 'pie',
             color: colorPie,
             selectedMode: 'single',
             radius: ['55%', '58%'],
             center: ['40%', '50%'],
             hoverAnimation: false,
             label: {
                 normal: {
                     show: false,
                 }
             },
             data: baseDataPie
         },

     ]
 };