echarts一個介面多個餅圖簡單封裝

阿新 • • 發佈：2019-01-20

<body>
       <div id="lamp" style="height: 174px;"></div>
       <div id="landscape" style="height: 174px;"></div>
       <div id="saving" style="height: 208px;"></div>

       <script src="echarts.min.js"></script>
       <script type="text/javascript">
           var lampOpenCount =3;
           var convertCtrlOpen=1;
           var saveEnergy=1;
           var lampCount=2;
           var convert=2;
           var noIntelLight=4;

           drawPieChart('lamp', 1,lampOpenCount,lampCount);
           drawPieChart('landscape', 1,convertCtrlOpen,convert);
           drawPieChart('saving', 2,saveEnergy,noIntelLight);

           function drawPieChart(id, type,openCount,count) {
               var myChart = echarts.init(document.getElementById(id));
               var option = {
                   tooltip: {
                       show: false
                   },
                   legend: {
                       show: false
                   },
                   color: ['#efae25', '#f0f2f5'],
                   series: [{
                       name: type === 1 ? '亮燈率' : '節電率',
                       type: 'pie',
                       radius: type === 1 ? ['60%', '80%'] : ['48%', '68%'],
                       center: ['50%', '50%'],
                       hoverAnimation: false,
                       avoidLabelOverlap: false,
                       label: {
                           normal: {
                               position: 'center',
                               textStyle: {
                                   fontSize: '16',
                                   color: '#999'
                               },
                               formatter: "{a} \n {d}%"
                           }
                       },
                       labelLine: {
                           normal: {
                               show: false
                           }
                       },
                       data: [{
                           value: openCount,
                           label: {
                               normal: {
                                   show: true
                               }
                           },
                           itemStyle: {
                               emphasis: {
                                   color: '#efae25'
                               }
                           },
                       },
                           {
                               value: count-openCount,
                               label: {
                                   normal: {
                                       show: false
                                   }
                               },
                               itemStyle: {
                                   emphasis: {
                                       color: '#f0f2f5'
                                   }
                               }
                           }
                       ]
                   }]
               };;

               if (option && typeof option === "object") {
                   myChart.setOption(option, true);
               }
           }
       </script>
   </body>

echarts一個介面多個餅圖簡單封裝

echarts一個介面多個餅圖簡單封裝

echarts實現一個頁面多個餅狀圖共用方法的封裝

【記錄】spring中一個介面多個實現類

一個介面多個實現類的Spring注入方式(註解方式)

【策略模式】如何結合spring實現一個介面多個實現，如何解決介面選擇問題

Spring 一個介面多個實現,如何根據外部條件來實時替換具體實現類

spring註解實現一個介面多個實現類的區分

@resource、@Autowired、@Service在一個介面多個實現類中的應用

一個介面多個實現，指定實現類

一個介面多個實現類的Spring注入方式

設計模式-代理類proxy：一個介面多個實現類（基於spring框架）

net core天馬行空系列：一個介面多個實現類，利用mixin技術通過自定義服務名，實現精準屬性注入

canvas簡單封裝一個echarts實現不了的餅圖

用單進程、多線程並發、多線程分別實現爬一個或多個網站的所有鏈接，用瀏覽器打開所有鏈接並保存截圖 python

近期處理多個Highcharts圖標時，碰到重復操作，所以編寫了一個流程控制器

Matlab多個Figure圖合成一個Fig

【Java】echarts,highcharts中多個y軸對應的一個x軸的數量的Java對應排序程式碼（一個key下的多個value值對應key的位置）

同一介面畫出多個QQ圖（R語言）

ArcMap開始編輯遇到一個或多個有錯誤或警告的圖層，並且無法繼續

JS呼叫OC簡單例項－傳遞一個或者多個引數給oc方法

echarts一個介面多個餅圖簡單封裝

相關推薦