echarts 多餅圖集合多標題


/*-----------------------設備狀況監控---------------------*/
// 
$(document).ready(function () {
  // 基於准備好的dom,初始化echarts實例
  var myChart = echarts.init(document.querySelector(".mes995 .chart"));

  // 2. 指定配置和數據
  myChart.setOption (
    
    { 
      //標題樣式 
    title:[
    {                       
        text: '金  工',
        left:'8%',//居中顯示
        top:'80%',//底部顯示
        textStyle: {
            color: '#cccccc',
            fontSize: 12
        }
    },
    {                       
        text: '噴  塗',
        left:'33%',//居中顯示
        top:'80%',//底部顯示
        textStyle: {
            color: '#cccccc',
            fontSize: 12
        }
    },
    {                       
        text: '裝  配',
        left:'59%',//居中顯示
        top:'80%',//底部顯示
        textStyle: {
            color: '#cccccc',
            fontSize: 12
        }
    },
    {                       
        text: '包  裝',
        left:'83%',//居中顯示
        top:'80%',//底部顯示
        textStyle: {
            color: '#cccccc',
            fontSize: 12
        }
    },

    ],

      legend: {     
           // top: "90%",
            top: 'top',//表示垂直居中
            left: 'right',  //表示水平居中。
            itemWidth: 10,
            itemHeight: 10,            
            orient: 'horizontal',  //顯示方向,水平         
            textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12"
                       }
               },
      // 懸浮提示
    tooltip: {
         //formatter: '{a} <br/>{b} : {c} ({d}%)',
         trigger: 'item'
             },
 
  dataset: {
        dimensions:  ['product', '金工', '噴塗', '裝配', '包裝'],
        source: [ 
            //['product', '金工', '噴塗', '裝配', '包裝'],
            ['檢修', 3, 5, 2, 5],
            ['運行', 3, 2, 1, 5],
            ['閑置', 1, 4, 3, 2],
            ['停機', 5, 6, 1, 3]
        ]   
    },
    series: [
    {
       // seriesLayoutBy:'row',   //數據取行   ['PM', 5, 6, 1, 3],默認:column;  
        type: 'pie',
        radius: ['30%', '47%'],   //大小
        center: ['13%', '50%'],   //位置

        label: {
        show: true,
        position: 'inside',  //center
        formatter: '{@[1]}',
        //formatter: '{@2014}',
        fontSize : '12'
              },
      labelLine: {
        show: false
                 },
      encode: {
          itemName: 'product',
          value: '金工'
              }
    }, 
    {
        type: 'pie',
        radius: ['30%', '47%'],
        center: ['38%', '50%'],
        label: {
        show: true,
        position: 'inside',  //center
        formatter: '{@[2]}',
        fontSize : '12'
              },
      labelLine: {
        show: false
                 },
        //可以定義 data 的哪個維度
        encode: {

            itemName: 'product',
            value: '噴塗'
        }
    }, 
    {

        type: 'pie',
        radius: ['30%', '47%'],
        center: ['63%', '50%'],
        label: {
        show: true,
        position: 'inside',  //center
        formatter: '{@[3]}',
        fontSize : '12'
              },
      labelLine: {
        show: false
                 },
        encode: {
            itemName: 'product',
            value: '裝配'
        }
    },
    {

        type: 'pie',
        radius: ['30%', '47%'],
        center: ['88%', '50%'],
        label: {
        show: true,
        position: 'inside',  //center
        formatter: '{@[4]}',
        fontSize : '12'
              },
      labelLine: {
        show: false
                 },
        encode: {
            itemName: 'product',
            value: '包裝'
        }
    }
  ]
}
  
  );

    //第一次加載
    myChart.showLoading();
       // 異步加載數據
  
   $.get('').done(function (data) {
    myChart.hideLoading();
      myChart.setOption({ 
      dataset:{  source:data.source  },
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });
  
});

});
/*-----------------------設備狀況---------------------*/

效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM