/**
* 能耗走势
*/
function initChartEnergy() {
var dom = document.getElementById("i-echart1");
var myChart = echarts.init(dom);
var app = {};
app.title = '能耗走势';
var colors = ['#7c5d1b'];
var option = {
color: colors,
title: {
text: '',
left: 'center',
textStyle: {
color: '#fff',
fontWeight: 'bold',
fontSize: 36,
fontFamily: 'Microsoft YaHei'
},
subtext: ''
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
legend: [],
grid: {
top: 35,
bottom: 30,
right: '10%',
left: '10%'
},
xAxis: [
{
type: 'category',
name: '日期',
axisLabel: {
inside: false,
textStyle: {
color: '#3a7998',
fontSize: 14
}
},
axisTick: {
show: true,
alignWithLabel: true
},
axisLine: {
show: true,
onZero: false,
lineStyle: {
color: '#3a7998'
}
},
axisPointer: {
label: {
formatter: function (params) {
return '日期 ' + params.value
+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
}
}
},
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
},
{
type: 'category',
axisTick: {
alignWithLabel: false,
show: false,
},
axisLine: {
onZero: false,
lineStyle: {
color: '#173147'
}
},
data: []
}
],
yAxis: [
{
type: 'value',
name: '总有功能耗(kW·h)',
//nameGap: 1,
axisLine: {
show: true,
lineStyle: {
color: '#3a7998'
}
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: '#3a7998',
fontSize: 14
}
},
splitLine: {
lineStyle: {
color: '#173147'
}
}
},
{
type: 'value',
scale: true,
axisLine: {
show: true,
lineStyle: {
color: '#3a7998'
}
}
}
],
series: [
{
name: '能耗',
type: 'line',
symbol: 'circle',
smooth: true,
color: ['#836318'],
// symbol:'image://images/echart-bj2.png',
symbolSize: 7,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.2,
color: '#2f242d'
}, {
offset: 1,
color: '#0b1527'
}])
}
},
itemStyle: {
normal: {
color: '#051123',
borderColor: '#e4674a',
borderWidth: 2,
lineStyle: {
width: 1,
color: '#836318',
},
}
},
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
return {
"chart": myChart,
"option": option
};
}
/**
* 气体 二氧化碳
*/
function initChartGasCO2() {
var dom = document.getElementById("i-echart2");
var myChart = echarts.init(dom);
var app = {};
var option = null;
app.title = '';
var current = 0;
var current2 = 200;
var all = current + current2;
var data = [
{
name: 'CO2',
value: current,
itemStyle: {
color: '#e6b83d'
},
// selected:true,
label: {
show: true,
fontSize: '36',
fontWeight: 'bold',
color: '#fff',
lineHeight: 1,
fontFamily: 'DINCond-Bold',
}
},
{
name: '含量',
value: current2,
itemStyle: {
color: '#0e3c6b'
},
label: {
show: false
}
},
];
var a = 0;
for (var i = 0; i < data.length; i++) {
a += (data[i].value) * 0.5;
}
;
data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
//console.log(data);
var option = {
title: {
text: 'CO2(PPM)',
// sublink: '###',
x: 'center',
y: '110',
// bottom: 15,
itemGap: 0,
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'Arial',
fontWeight: 'normal'
},
},
tooltip: {
trigger: 'item',
},
series: [
{
name: '含量',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 210,
data: data,
label: {
normal: {
formatter: function (param) {
// var str = '';
// var c = (param['value']/all)*100;
// c = c.toFixed(2);
// str = str + c + "%" +"\n";
return param['value'];
},
show: false,
position: 'center',
textStyle: {
fontSize: 12,
fontWeight: 'normal',
},
rich: {
b: {
color: '#fe6637',
fontSize: 12,
lineHeight: 20,
align: 'center'
},
d: {
color: '#fff',
align: 'center',
fontSize: 12,
}
}
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
window.onresize = function () {
myChart.resize();
};
return {
"chart": myChart,
"option": option
};
}
function initChartGasPH3() {
var dom = document.getElementById("i-echart3");
var myChart = echarts.init(dom);
var app = {};
var option = null;
app.title = '';
var current = 0;
var current2 = 200;
var all = current + current2;
var data = [
{
name: 'PH3',
value: current,
itemStyle: {
color: '#36b994'
},
// selected:true,
label: {
show: true,
fontSize: '36',
fontWeight: 'bold',
color: '#fff',
lineHeight: 1,
fontFamily: 'DINCond-Bold',
}
},
{
name: '含量',
value: current2,
itemStyle: {
color: '#0e3c6b'
}
},
];
var a = 0;
for (var i = 0; i < data.length; i++) {
a += (data[i].value) * 0.5;
}
;
data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
// console.log(data);
var option = {
title: {
text: 'PH3(PPM)',
// sublink: '###',
x: 'center',
y: '110',
// bottom: 15,
itemGap: 0,
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'Arial',
fontWeight: 'normal'
},
},
tooltip: {
trigger: 'item',
},
series: [
{
name: '进度',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 210,
data: data,
label: {
normal: {
formatter: function (param) {
// var str = '';
// var c = (param['value']/all)*100;
// c = c.toFixed(2);
// str = str + c + "%" +"\n";
return param['value'];
},
show: false,
position: 'center',
textStyle: {
fontSize: 12,
fontWeight: 'normal',
},
rich: {
b: {
color: '#fe6637',
fontSize: 12,
lineHeight: 20,
align: 'center'
},
d: {
color: '#fff',
align: 'center',
fontSize: 12,
}
}
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
window.onresize = function () {
myChart.resize();
};
return {
"chart": myChart,
"option": option
};
}
//气体 氧气
function initChartGasO2() {
var dom = document.getElementById("i-echart4");
var myChart = echarts.init(dom);
var app = {};
var option = null;
app.title = '';
var current = 0;
var all = 100;
var current2 = all - current;
var data = [
{
name: 'O2',
value: current,
itemStyle: {
color: '#e4674a'
},
// selected:true,
label: {
show: true,
fontSize: '36',
fontWeight: 'bold',
color: '#fff',
lineHeight: 1,
fontFamily: 'DINCond-Bold',
}
},
{
name: '含量',
value: current2,
itemStyle: {
color: '#0e3c6b'
}
},
];
var a = 0;
for (var i = 0; i < data.length; i++) {
a += (data[i].value) * 0.5;
}
;
data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,0)'}}});
//console.log(data);
var option = {
title: {
text: 'O2(%)',
// sublink: '###',
x: 'center',
y: '110',
// bottom: 15,
itemGap: 0,
textStyle: {
color: '#fff',
fontSize: 16,
fontFamily: 'Arial',
fontWeight: 'normal'
},
},
tooltip: {
trigger: 'item',
},
series: [
{
name: '含量',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 210,
data: data,
label: {
normal: {
formatter: function (param) {
var str = '';
var c = (param['value'] / all) * 100;
c = c.toFixed(2);
str = str + c + "" + "\n";
return str
},
show: false,
position: 'center',
textStyle: {
fontSize: 12,
fontWeight: 'normal',
},
rich: {
b: {
color: '#fe6637',
fontSize: 12,
lineHeight: 20,
align: 'center'
},
d: {
color: '#fff',
align: 'center',
fontSize: 12,
}
}
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
window.onresize = function () {
myChart.resize();
};
return {
"chart": myChart,
"option": option
};
}
//仓储性质图
function initChartFoodType() {
var dom = document.getElementById("i-echart5");
var myChart = echarts.init(dom);
// var iWidth = document.documentElement.clientWidth;
var app = {};
var option = null;
app.title = '';
var colors = ['#e6b83d', '#36b994', '#e4674a', '#119edc'];
option = {
color: colors,
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
series: [
{
name: '仓储性质',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
labelLine: {
normal: {
// smooth: 0.2,
length: 10,
length2: 20,
}
},
itemStyle: {
normal: {
borderWidth: 8,
borderColor: "#051a36",
label: {
textStyle: {
fontSize: 14,
fontWeight: 'normal',
// color:'#fff',
fontFamily: 'DINCond-Bold',
}
},
},
emphasis: {
borderWidth: 0,
shadowBlur: 0,
shadowOffsetX: 0,
label: {
textStyle: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: 'DINCond-Bold',
}
},
},
},
label: {
normal: {
formatter: ' {per|{d}%} \n {b|{b}} ',
//formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: 'rgba(4,68,107,0.8)',
borderRadius: [3, 3, 3, 3],
padding: [2, 2],
lineHeight: 16,
fontWeight: 'normal',
rich: {
c: {
color: '#fff',
fontSize: 14,
align: 'left',
},
b: {
fontSize: 12,
color: '#fff',
fontWeight: 'normal',
},
d: {
color: '#fff',
fontWeight: 'normal',
fontSize: 14,
},
abg: {
backgroundColor: '#333',
width: 10,
height: 10,
borderRadius: [5, 5, 5, 5]
},
hr: {
borderColor: '#fff',
width: 0,
borderWidth: 0.5,
height: 16,
},
},
},
},
data: [
{value: 194, name: '省级储备粮'},
{value: 318, name: '专项储备粮'},
{value: 236, name: '市区储备粮'},
{value: 252, name: '周转粮'}
]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
return {
"chart": myChart,
"option": option
};
}
//仓库品种图
function initChartFoodVariety() {
var dom = document.getElementById("i-echart6");
var myChart = echarts.init(dom);
// var iWidth = document.documentElement.clientWidth;
var app = {};
var option = null;
app.title = '';
var colors = ['#e6b83d', '#36b994', '#e4674a', '#119edc'];
option = {
color: colors,
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
series: [
{
name: '粮食品种',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
labelLine: {
normal: {
// smooth: 0.2,
length: 10,
length2: 20,
}
},
itemStyle: {
normal: {
borderWidth: 8,
borderColor: "#051a36",
label: {
textStyle: {
fontSize: 14,
fontWeight: 'normal',
// color:'#fff',
fontFamily: 'DINCond-Bold',
}
},
},
emphasis: {
borderWidth: 0,
shadowBlur: 0,
shadowOffsetX: 0,
label: {
textStyle: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: 'DINCond-Bold',
}
},
},
},
label: {
normal: {
formatter: ' {per|{d}%} \n {b|{b}} ',
//formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: 'rgba(4,68,107,0.8)',
borderRadius: [3, 3, 3, 3],
padding: [2, 2],
lineHeight: 16,
fontWeight: 'normal',
rich: {
c: {
color: '#fff',
fontSize: 14,
align: 'left',
},
b: {
fontSize: 12,
color: '#fff',
fontWeight: 'normal',
},
d: {
color: '#fff',
fontWeight: 'normal',
fontSize: 14,
},
abg: {
backgroundColor: '#333',
width: 10,
height: 10,
borderRadius: [5, 5, 5, 5]
},
hr: {
borderColor: '#fff',
width: 0,
borderWidth: 0.5,
height: 16,
},
},
},
},
data: [
{value: 100, name: '小麦'},
{value: 100, name: '早籼稻'},
{value: 100, name: '晚籼稻'},
{value: 0, name: '油菜籽'}
]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
return {
"chart": myChart,
"option": option
};
}
//仓库等级图
function initChartFoodLevel() {
var dom = document.getElementById("i-echart7");
var myChart = echarts.init(dom);
// var iWidth = document.documentElement.clientWidth;
var app = {};
var option = null;
app.title = '';
var colors = ['#4260c9', '#36b994', '#e4674a'];
option = {
color: colors,
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
series: [
{
name: '粮食等级',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
labelLine: {
normal: {
// smooth: 0.2,
length: 10,
length2: 20,
}
},
itemStyle: {
normal: {
borderWidth: 8,
borderColor: "#051a36",
label: {
textStyle: {
fontSize: 14,
fontWeight: 'normal',
// color:'#fff',
fontFamily: 'DINCond-Bold',
}
},
},
emphasis: {
borderWidth: 0,
shadowBlur: 0,
shadowOffsetX: 0,
label: {
textStyle: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: 'DINCond-Bold',
}
},
},
},
label: {
normal: {
formatter: ' {per|{d}%} \n {b|{b}} ',
//formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: 'rgba(4,68,107,0.8)',
borderRadius: [3, 3, 3, 3],
padding: [2, 2],
lineHeight: 16,
fontWeight: 'normal',
rich: {
c: {
color: '#fff',
fontSize: 14,
align: 'left',
},
b: {
fontSize: 12,
color: '#fff',
fontWeight: 'normal',
},
d: {
color: '#fff',
fontWeight: 'normal',
fontSize: 14,
},
abg: {
backgroundColor: '#333',
width: 10,
height: 10,
borderRadius: [5, 5, 5, 5]
},
hr: {
borderColor: '#fff',
width: 0,
borderWidth: 0.5,
height: 16,
},
},
},
},
data: [
{value: 1, name: '一等'},
{value: 1, name: '二等'},
{value: 1, name: '三等'}
]
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
return {
"chart": myChart,
"option": option
};
}
/**
* 背景粒子效果
*/
function initBg() {
//背景粒子效果
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 160,//数量
"density": {
"enable": true, //启用粒子的稀密程度
"value_area": 800 //区域散布密度大小
}
},
"color": {
"value": "#0089f4" //原子的颜色
},
"shape": {
"type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
"stroke": {
"width": 0, //原子的宽度
"color": "#0089f4" //原子颜色
},
"polygon": {
"nb_sides": 5 // 原子的多边形边数
},
"image": {
"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
"width": 100, //图片宽度
"height": 100 //图片高度
}
},
"opacity": {
"value": 1, //不透明度
"random": true, //随机不透明度
"anim": {
"enable": true, //渐变动画
"speed": 1, // 渐变动画速度
"opacity_min": 0, //渐变动画不透明度
"sync": true
}
},
"size": {
"value": 2, //原子大小
"random": true, // 原子大小随机
"anim": {
"enable": false, // 原子渐变
"speed": 4, //原子渐变速度
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false, //连接线
"distance": 150, //连接线距离
"color": "#ffffff", //连接线颜色
"opacity": 0.4, //连接线不透明度
"width": 1 //连接线的宽度
},
"move": {
"enable": true, //原子移动
"speed": 1, //原子移动速度
"direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
"random": true, //移动随机方向
"straight": false, //直接移动
"out_mode": "out", //是否移动出画布
"bounce": false, //是否跳动移动
"attract": {
"enable": false, // 原子之间吸引
"rotateX": 600, //原子之间吸引X水平距离
"rotateY": 600 //原子之间吸引Y水平距离
}
}
},
"interactivity": {
"detect_on": "canvas", //原子之间互动检测 "canvas", "window"
"events": {
"onhover": {
"enable": true, //悬停
"mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
},
"onclick": {
"enable": false, //点击效果
"mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
},
"resize": true // 互动事件调整
},
"modes": {
"grab": {
"distance": 100, //原子互动抓取距离
"line_linked": {
"opacity": 1 //原子互动抓取距离连线不透明度
}
},
"bubble": {
"distance": 250, //原子抓取泡沫效果之间的距离
"size": 2, // 原子抓取泡沫效果之间的大小
"duration": 2, //原子抓取泡沫效果之间的持续事件
"opacity": 1, //原子抓取泡沫效果透明度
"speed": 3
},
"repulse": {
"distance": 400, //击退效果距离
"duration": 0.4 //击退效果持续事件
},
"push": {
"particles_nb": 4 //粒子推出的数量
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);
}