/*-----------------------設備狀況監控---------------------*/ // $(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(); }); }); }); /*-----------------------設備狀況---------------------*/
效果圖: