$(function () {
echart_3();
echart_status_chart();
renderPMChart();
renderEquipmentChart();
renderMTBAChart();
renderAlarmChart();
renderPmCharge();
// 中间机台运行状态占比图
function echart_status_chart() {
var chart = echarts.init(document.getElementById('rateChart'))
var option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}台 ({d}%)'
},
series: [
{
name: '稼动',
type: 'pie',
radius: ['50%', '70%'],
center: ['12.5%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
fontSize: '16',
fontWeight: 'bold',
formatter: function (param) {
console.log(param);
if (param.dataIndex === 0) {
return param.percent + '%\n'
+ param.data.value + '台';
}
return '';
}
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold',
}
},
labelLine: {
show: false
},
data: [
{
value: 200, name: '稼动', itemStyle: {
normal: {
color: `rgb(61,149,73)`
}
}
},
{
value: 100, name: '其它', itemStyle: {
normal: {
color: `rgb(255,255,255)`
}
}
}
]
},
{
name: '报警',
type: 'pie',
radius: ['50%', '70%'],
center: ['37.5%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
fontSize: '16',
fontWeight: 'bold',
formatter: function (param) {
if (param.dataIndex === 0) {
return param.percent + '%\n'
+ param.data.value + '台';
}
return '';
}
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 50, name: '报警', itemStyle: {
normal: {
color: `rgb(255,0,0)`
}
}
},
{
value: 200, name: '其它', itemStyle: {
normal: {
color: `rgb(255,255,255)`
}
}
}
]
},
{
name: '待机',
type: 'pie',
radius: ['50%', '70%'],
center: ['62.5%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
fontSize: '16',
fontWeight: 'bold',
formatter: function (param) {
if (param.dataIndex === 0) {
return param.percent + '%\n'
+ param.data.value + '台';
}
return '';
}
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 150, name: '待机', itemStyle: {
normal: {
color: `rgb(178,178,0)`
}
}
},
{
value: 200, name: '其它', itemStyle: {
normal: {
color: `rgb(255,255,255)`
}
}
}
]
},
{
name: '离线',
type: 'pie',
radius: ['50%', '70%'],
center: ['87.5%', '50%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
fontSize: '16',
fontWeight: 'bold',
formatter: function (param) {
if (param.dataIndex === 0) {
return param.percent + '%\n'
+ param.data.value + '台';
}
return '';
}
},
emphasis: {
label: {
show: false,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{
value: 30, name: '离线', itemStyle: {
normal: {
color: `rgb(178,178,178)`
}
}
},
{
value: 400, name: '其它', itemStyle: {
normal: {
color: `rgb(255,255,255)`
}
}
}
]
}
]
};
chart.setOption(option);
window.addEventListener("resize", function () {
chart.resize();
});
}
// 保养率图表
function renderPMChart() {
var elementName = 'pmChart';
var chart;
var xdata = ['未来城园区2F', '2园区2F', '3园区2F', '未来城园区1F', '2园区1F', '3园区1F']
var options = {
chart: {
type: 'column',
renderTo: elementName,
// marginBottom: 30,
// marginLeft: 20,
// marginTop: 20,
// marginRight: 20,
margin: 30,
marginBottom: 60,
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 30,
beta: 0,
depth: 70,
viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
bottom: {
size: 20
},
side: {
size: 1,
color: 'transparent'
},
back: {
size: 1,
color: 'transparent'
}
}
},
},
title: {
text: null
},
plotOptions: {
column: {
depth: 25
}
},
colors: ['#7cb5ec', '#e4d354'],
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: xdata,
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
series: []
};
var series = [{
name: '已保养',
data: [50, 60, 42, 44, 68, 92],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
formatter: function () {
return this.y;
}
}
}, {
name: '全部',
data: [67, 60, 56, 50, 90, 100],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
formatter: function () {
return this.y;
}
}
}];
options.series = series;
chart = Highcharts.chart(options);
}
// MTBA
function renderMTBAChart() {
var elementName = 'chart_2';
var chart;
var xdata = ['DA', 'WB', 'LHA', 'AA']
var options = {
chart: {
type: 'column',
renderTo: elementName,
// marginBottom: 30,
// marginLeft: 20,
// marginTop: 20,
// marginRight: 20,
margin: 30,
marginBottom: 60,
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 30,
beta: 0,
depth: 70,
viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
bottom: {
size: 20
},
side: {
size: 1,
color: 'transparent'
},
back: {
size: 1,
color: 'transparent'
}
}
},
},
title: {
text: null
},
plotOptions: {
column: {
depth: 25
}
},
colors: ['#AAEEEE'],
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: xdata,
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
series: []
};
var series = [{
name: 'MTBA',
data: [10.2, 8.6, 22.3, 32.2],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
formatter: function () {
return this.y;
}
}
}];
options.series = series;
chart = Highcharts.chart(options);
}
// 各车间设备数量
function renderEquipmentChart() {
var elementName = 'chart_1';
var chart;
var xdata = ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6']
var options = {
chart: {
type: 'column',
renderTo: elementName,
// marginBottom: 30,
// marginLeft: 20,
// marginTop: 20,
// marginRight: 20,
margin: 30,
marginBottom: 60,
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 30,
beta: 0,
depth: 70,
viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
bottom: {
size: 20
},
side: {
size: 1,
color: 'transparent'
},
back: {
size: 1,
color: 'transparent'
}
}
},
},
title: {
text: null
},
plotOptions: {
column: {
depth: 25
}
},
colors: ['#44A9A8'],
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: xdata,
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
series: []
};
var series = [{
name: '数量',
data: [100, 120, 88, 124, 78, 92],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
formatter: function () {
return this.y;
}
}
}];
options.series = series;
chart = Highcharts.chart(options);
}
// 报警TOP5
function renderAlarmChart() {
var elementName = 'alarmChart';
var chart;
var xdata = ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6']
var options = {
chart: {
type: 'column',
renderTo: elementName,
// marginBottom: 30,
// marginLeft: 20,
// marginTop: 20,
// marginRight: 20,
margin: 30,
marginBottom: 60,
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 30,
beta: 0,
depth: 70,
viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
frame: { // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
bottom: {
size: 20
},
side: {
size: 1,
color: 'transparent'
},
back: {
size: 1,
color: 'transparent'
}
}
},
},
title: {
text: null
},
plotOptions: {
column: {
depth: 25
}
},
colors: ['#FF0000'],
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: xdata,
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
yAxis: {
title: {
text: null
},
labels: {
style: {
color: '#fff'
}
},
gridLineColor: 'rgba(255,255,255,0.3)'
},
series: []
};
var series = [{
name: '数量',
data: [100, 120, 88, 124, 78, 92],
dataLabels: {
enabled: true,
color: '#FFFFFF',
align: 'center',
formatter: function () {
return this.y;
}
}
}];
options.series = series;
chart = Highcharts.chart(options);
}
// 保养费用
function renderPmCharge() {
var chart = Highcharts.chart('chargeChart', {
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: null
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: '各园区费用占比',
data: [
{ name: '2号园区', y: 100,drilldown: '2号园区'},
{name: '3号园区', y: 120, drilldown: '3号园区'},
{
name: '未来城园区',
y: 230,
drilldown:'未来城园区'
}
],
dataLabels: {
distance: 5
}
}],
drilldown: {
series: [{
type: 'pie',
name: '2号园区',
data: [
['车间1', 30],
['车间2', 50],
{
name: '车间3',
y: 20,
}, {
name: '车间4',
y: 25
}
]
},
{
type: 'pie',
name: '3号园区',
data: [
['车间1', 30],
['车间2', 50],
{
name: '车间3',
y: 20,
}, {
name: '车间4',
y: 25
}
]
},
{
type: 'pie',
name: '未来城园区',
data: [
['车间1', 30],
['车间2', 50],
{
name: '车间3',
y: 20,
}, {
name: '车间4',
y: 25
}
]
}
]
}
});
}
//echart_3货物周转量
function echart_3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_3'));
myChart.clear();
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['DA', 'WB', 'LHA', 'AA'],
textStyle: {
color: '#fff'
},
top: '8%'
},
grid: {
top: '23%',
left: '3%',
right: '7%',
bottom: '8%',
containLabel: true
},
color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['8:00', '9:00', '10:00', '11:00', '12:00'],
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [
{
name: 'DA',
type: 'line',
data: [3961.88, 4233.63, 4183.14, 3633.01, 3704.47]
},
{
name: 'WB',
type: 'line',
data: [3374.76, 3364.76, 3274.76, 3371.82, 3259.87]
},
{
name: 'LHA',
type: 'line',
data: [14.77, 15.17, 13.17, 14.56, 15.84]
},
{
name: 'AA',
type: 'line',
data: [686.17, 847.26, 895.22, 865.28, 886.72]
}
]
};
myChart.setOption(option);
}
//湖南高速公路
function echart_4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_4'));
option = {
title: {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
left: 'center',
show: false
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['费用1', '费用2', '费用3', '费用4', '费用5', '费用6', '费用7', '费用8'],
show: false
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [30, 90],
center: ['50%', '50%'],
roseType: 'area',
data: [
{ value: 10, name: '费用1' },
{ value: 5, name: '费用2' },
{ value: 15, name: '费用3' },
{ value: 25, name: '费用4' },
{ value: 20, name: '费用5' },
{ value: 35, name: '费用6' },
{ value: 30, name: '费用7' },
{ value: 40, name: '费用8' }
]
}
]
};
myChart.setOption(option);
// 使用刚指定的配置项和数据显示图表。
window.addEventListener("resize", function () {
myChart.resize();
});
}
//报警TOP5
function echart_5() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_5'));
function showProvince() {
var option = {
color: ['#3398DB'],
legend: {
top: "0%",
textStyle: {
color: "rgba(255,255,255,0.9)"//图例文字
},
show: false
},
xAxis: {
type: 'category',
data: ['车间1', '车间5', '车间2', '车间3', '车间6'],
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
axisLabel: {
textStyle: { color: "rgba(255,255,255,1)", fontSize: '14', },
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: { color: "rgba(255,255,255,1)", fontSize: '14', },
},
},
series: [{
data: [10, 15, 8, 7.2, 6.3],
type: 'bar',
label: {
show: true,
color: '#fff',
formatter: '{c}%'
}
}]
};
myChart.setOption(option);
}
showProvince();
// 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
//#region 点击跳转
// $('#chart_map').click(function () {
// window.location.href = './page/index.html';
// });
// $('.t_btn2').click(function () {
// window.location.href = "./page/index.html?id=2";
// });
// $('.t_btn3').click(function () {
// window.location.href = "./page/index.html?id=3";
// });
// $('.t_btn4').click(function () {
// window.location.href = "./page/index.html?id=4";
// });
// $('.t_btn5').click(function () {
// window.location.href = "./page/index.html?id=5";
// });
// $('.t_btn6').click(function () {
// window.location.href = "./page/index.html?id=6";
// });
// $('.t_btn7').click(function () {
// window.location.href = "./page/index.html?id=7";
// });
// $('.t_btn8').click(function () {
// window.location.href = "./page/index.html?id=8";
// });
// $('.t_btn9').click(function () {
// window.location.href = "./page/index.html?id=9";
// });
//#endregion
});