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();
  });
  
});

});
/*-----------------------设备状况---------------------*/

效果图:

中年大叔学Delphi
原文地址:https://www.cnblogs.com/redhat588/p/15380354.html