echart饼状图

小小1992

已于 2023-08-02 13:49:27 修改

阅读量295

点赞数

文章标签：前端

于 2023-07-19 11:41:15 首次发布

本文链接：https://blog.csdn.net/u014645827/article/details/131805303

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .con{
               position: relative;
               width: 305px;
               height: 160px;
               /* background-color: aquamarine; */
           }
           .con-po{
               position: absolute;
               width: 2px;
               height: 134px;
               background-color: #cecece;
               top: 39px;
               right: 157px;
           }
           .con-r{
               position: absolute;
               top: 2px;
               left: 148px;
               color: #717171;
           }
           .con-num{
               position: absolute;
               top: 39px;
               left: 148px;
               color: #717171;
               font-size: 14px;
           }
       </style>
   </head>
   <body>

       <div class="con">
           <p class="con-r">安全检查次数</p>
           <p class="con-num">6次</p>
           <div id="main" style="width:100%;height: 100%;"></div>
       </div>


           <script src="js/echarts.min.js"></script>
       <script>





           var chartDom = document.getElementById('main');
           var myChart = echarts.init(chartDom);
           var option;

           option = {
           title: {
               text: '',
               top: 'center'
           },
           tooltip: {
           trigger: 'item',
           formatter: "{a} <br/>{b}: {c} ({d}%)"
           },
           legend: {
           orient: 'vertical', //图例列表的布局朝向（垂直排列）
           right:'20',
               top :'100',
           // y: 'center',
           // itemGap:20,
           itemWidth:8,
               itemHeight:8,
               orient: 'vertical',

           // padding:10,
           formatter: function (params) {

                   let s="";
                   var count;
                   // console.log(params);
                   for (var i = 0; i < option.series[0].data.length; i++) {
                       if (option.series[0].data[i].name == params) {
                               s=s+'{a|'+params +' } {b|'+ option.series[0].data[i].value+'}\n';
                       }
                       }
                   return s
           },

                   // formatter: function(name){
                   // var total = 0;
                   // var target;
                   // for (var i = 0, l = option.series[0].data.length; i < l; i++) {
                   // total += option.series[0].data[i].value;
                   // if (option.series[0].data[i].name == name) {
                   // target = option.series[0].data[i].value;
                   // }
                   // }
                   // var arr = [
                   // '{a|'+name+' :}{b|'+((target/total)*100).toFixed(2)+'%}'

                   // ]
                   // return arr.join('\n')
                   // },
               textStyle:{
                   lineHeight:0,
               rich:{
               a:{
               fontSize:12,
               align:'left',
               padding:[0,0,0,5],
                           // lineHeight:40,

               },
               b:{
               fontSize:12,
               align:'left',
               padding:[0,0,0,5],
                           width:50

               }
               }
               },
           },

           series: [
           {
           name: 'rrrrrrrrrr',
           type: 'pie',
           radius: ['30%', '70%'],
           center: ['20%', '40%'],
           label: {
           normal: {
           show: false
           },
           emphasis: {
           show: false
           }
           },

           data: [
           { value: 1048, name: '已整改' },
           { value: 735, name: '未整改' }

           ]
           }
           ]
           };

           option && myChart.setOption(option);
       </script>
   </body>
</html>