• 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
  • 相关阅读:
    WPF DataGrid
    邮箱格式验证
    Spring Cloud微服务学习笔记
    你必须知道的MySQL知识点
    你必须掌握的分布式事务知识点
    重试操作下如何实现幂等?
    你必须掌握的关于JVM知识点
    RocketMQ开发者指南
    二分查找解题套路框架
    回溯算法解题套路框架
  • 原文地址:https://www.cnblogs.com/redhat588/p/15380354.html
Copyright © 2020-2023  润新知