/*-----------------------设备状况监控---------------------*/ // $(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