//数字跳动
// var num = document.getElementByName("id").innerText;
// // alert(num);
// function modify(){
// //修改
// num=parseInt(num)+1;
// // alert("00000"+num);
// document.getElementByName("id").innerText=num;
// };
// window.setInterval("modify()",60000);
var s;
function resize() {
s = window.screen.width / 1920;
document.body.style.transformOrigin = '0 0';
document.body.style.transform = 'scale(' + s + ',' + s + ')';
document.body.style.width = window.innerWidth / s + 'px';
document.body.style.height = window.innerHeight / s + 'px';
}
window.onresize = function () {
resize();
}
resize();
var docs = document.getElementsByName("id");
function modify(){
//修改
for (var i = 0; i < docs.length; i++) {
var num = docs[i].innerText;
num=parseInt(num)+1;
docs[i].innerText=num;
}
}
window.setInterval("modify()",60000);
$(function () {
echart_1();
echart_2();
echart_22();
echart_24();
echart_15();
echart_3();
echart_33();
echart_5();
echart_52();
echart_53();
echart_54();
echart_55();
echart_56();
echart_57();
echart_58();
echart_6();
echart_7();
echart_8();
echart_91();
echart_92();
// modify();
function echart_1() {
var myChart = echarts.init(document.getElementById('chart_1'));
var option = {
// title: {
// text: 'ECharts 入门示例'
// },
color:['#ef5f2b','#4a6ac4','#77cd63','#a325c0','#369ebc','#e2a83f'],
tooltip: {},
legend: {
data:['GSM','WCDMA','LTE','WLAN','NB-LOT','LORA'],
textStyle:{
color:"#fff",
fontSize: 10
},
icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
itemGap: 10,// 设置间距
padding: [40, 10, 15, 20] // [5, 10, 15, 20]
},
dataset: {
source: [
['x','需整改','需增补','需新建','需扩容'],
['GSM', 10, 0, 0, 0, 0, 0],
['WCDMA', 20, 0, 0, 0, 0, 0],
['LTE', 125, 124, 226, 38, 45, 29],
['WLAN', 38, 36, 148, 13, 25, 10],
['NB-LOT', 25, 43, 38, 30],
['LORA', 28, 31, 26, 12]
]
},
xAxis: [
{
// data: ['需整改','需增补','需新建','需扩容'],
type: 'category', gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 13
}
},
}
],
yAxis: [
{
gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10
}
},
}
],
grid: [
{top: '22%',
bottom: '20%',
// left: '10%',
// right:'5%'
},
],
series: [
// These series are in the first grid.
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
// These series are in the second grid.
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// window.addEventListener("resize", function () {
// myChart.resize();
// })
}
function echart_22() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_22'));
option = {
title: {
text: '在网直放站现状',top:'10%',left:'center',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},
},
color:['#218BB4','#5AA949','#C23531','#7121B4'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
textStyle:{
color:"#fff",
fontSize: 10
},
orient: 'vertical',
left: 'center', //图例距离左的距离
top:'24%',
data:['干线放大器','模拟直放站','','无线直放站','数字直放站'],//图例换行
},
grid: {
left: '-20%',//生成的图片和左边的间距
// right: '2%',//生成的图片和右边的间距’,
// bottom: '10%',//生成的图片和底部的间距
top: '20%',//生成的图片和顶部的间距
containLabel: true//为ture才会生效以上的设置
},
series: [
{
name:'count',
type:'pie',
radius: ['30%', '55%'],
center: ['50%', '70%'], //在div中位置
avoidLabelOverlap: false,
label: {
normal: {
show: true,
formatter: '{d}%', //显示的内容
position: 'inner',
textStyle: {
fontSize: '10',
color:'#fff'
}
},
// emphasis: {
// show: true,
// textStyle: {
// fontSize: '12',
// fontWeight: 'bold'
// }
// }
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:10, name:'干线放大器'},
{value:5, name:'无线直放站'},
{value:15, name:'模拟直放站'},
{value:70, name:'数字直放站'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function echart_2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_2'));
option = {
title: {
text: '在网分布系统现状',top:'10%',left:'center',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},
},
color:['#218BB4','#5AA949','#7121B4','#C23531'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
textStyle:{
color:"#fff",
fontSize: 10
},
orient: 'vertical',
left: 'center', //图例距离左的距离
top:'24%',
data:['已归档站点','已拆除站点','','在建站点','改造站点'],//图例换行
},
grid: {
left: '-20%',//生成的图片和左边的间距
// right: '2%',//生成的图片和右边的间距’,
// bottom: '10%',//生成的图片和底部的间距
top: '25%',//生成的图片和顶部的间距
containLabel: true//为ture才会生效以上的设置
},
series: [
{
name:'count',
type:'pie',
radius: ['30%', '55%'],
center: ['50%', '70%'], //在div中位置
avoidLabelOverlap: false,
label:{
normal: {
show: true,
position: 'inner',
formatter: '{d}%', //显示的内容
textStyle: {
fontSize: '10',
color:'#fff'
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:70, name:'已归档站点'},
{value:5, name:'已拆除站点'},
{value:10, name:'在建站点'},
{value:15, name:'改造站点'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//echart_3
function echart_3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_3'));
myChart.clear();
option = {
// title: {
// text: '在网分布系统现状
// 在网直放站现状
// 分地市分布系统现状'
// },
title: {
text: '分地市分布系统现状',top:'0%',left:'center',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},
},
tooltip: {
trigger: 'axis'
},
textStyle : {
fontWeight : 'normal', //显示字体粗细等
fontSize : 10
},
legend: {
data:['已归档站点数','已拆除站点数','在建站点','改造站点'],
textStyle:{
fontSize: 10,
color: '#fff'
},
top: '10%'
},
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
color: ['#FF4949','#FFA74D','#77cd63','#44AFF0',],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['杭州','衢州','舟山','宁波','温州','嘉兴','金华','绍兴','丽水','台州','湖州'],
splitLine: {
show: false
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
// name: '数量',
type: 'value',
splitLine: {
show: false
},
axisLabel: { //y轴文字样式
textStyle: {
fontSize: 10
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [
{
name:'已归档站点数',
type:'line',
data:[4550, 1260, 710, 3970, 3467, 3400, 2989, 2019, 1800, 1802, 1780]
},
{
name:'已拆除站点数',
type:'line',
data:[905, 1, 1, 230, 480, 400, 20, 0, 0, 0, 0]
},
{
name:'在建站点',
type:'line',
data:[600, 450, 140, 600, 520, 450, 490, 300, 0, 500, 0]
},
{
name:'改造站点',
type:'line',
data:[700, 490, 150, 660, 520, 450, 490, 300, 0, 500, 0]
}
]
};
myChart.setOption(option);
}
function echart_33() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_33'));
myChart.clear();
var option = {
title: {
text: '材料数量统计',top:'4%',left:'center',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},
},
color: ['#38b3f1'],
tooltip: {
trigger: 'axis',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
// shadowOffsetX: 10
// }
},
textStyle: {
color: '#ccc'
},
grid: {
top: '20%',
left: '3%',
right: '3%',
bottom: '1%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ["合路器","功分器","耦合器","全向吸顶天线","定向吸顶天线","板状天线","美化天线","八木天线"],
axisTick: {
alignWithLabel: true
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10,
interval: 0
}
},
}],
yAxis: [{
type: 'value',
axisLabel: { //y轴文字样式
textStyle: {
fontSize: 10
}
},
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '40%',
// barGap:'10%',
barCategoryGap : '5%',
data: ["37077","1404960","2012952","2593964","162313","648970","35953","625"]
}]
};
myChart.setOption(option);
}
function echart_24() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_24'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: {
text: '现网规模',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},left:'center'
},
color:['#ef5f2b','#4a6ac4','#77cd63'],
legend: {
orient: 'vertical',
x: 'left',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
textStyle:{
color:"#fff",
fontSize: 10
},
orient: 'horizontal',
left: 'center', //图例距离左的距离
top:'20%',
data:['宏站','室分','微站'],//图例换行
},
grid: {
left: '-20%',//生成的图片和左边的间距
// right: '2%',//生成的图片和右边的间距’,
// bottom: '10%',//生成的图片和底部的间距
top: '20%',//生成的图片和顶部的间距
containLabel: true//为ture才会生效以上的设置
},
series: [
{
name:'count',
type:'pie',
radius: ['30%', '55%'],
center: ['48%', '65%'], //在div中位置
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inner',
formatter: '{d}%', //显示的内容
},
emphasis: {
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:60, name:'宏站'},
{value:30, name:'室分'},
{value:10, name:'微站'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function echart_15() {
var myChart = echarts.init(document.getElementById('chart_15'));
var option = {
title: {
text: '档期规模',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
align:'center' //水平对齐
},left:'center'
},
color:['#ef5f2b','#4a6ac4','#77cd63'],
tooltip: {},
legend: {
data:['宏站','室分','微站',],
textStyle:{
color:"#fff",
fontSize: 10
},
icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
itemGap: 10,// 设置间距
padding: [40, 10, 4, 20] // [5, 10, 15, 20]
},
dataset: {
source: [
['x','当期规模数','当期拍照数','当期在网数'],
['宏站', 1250, 1400, 1100],
['室分', 750, 760, 450],
['微站', 980, 980, 580]
]
},
xAxis: [
{
type: 'category', gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10
}
},
}
],
yAxis: [
{
gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10
}
},
}
],
grid: [
{
top: '60',
right: '5',
bottom:'20'
}
],
series: [
// These series are in the first grid.
{type: 'bar', seriesLayoutBy: 'row', barWidth:12, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:12, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:12, barGap:'10%',},
// These series are in the second grid.
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// window.addEventListener("resize", function () {
// myChart.resize();
// })
}
//ditu
// function echart_4() {
// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('chart_4'));
// }
function echart_5() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_5'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
center: ["50%", "60%"], // 仪表位置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
show:false
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 554, name: '位置告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*20).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [600,580,620,670,550,560,600,670,700,750,610,670,723,590,780,770,790,820,870,890,920,990];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_52() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_52'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
center: ["50%", "60%"], // 仪表位置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show: false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 242, name: '数字型号异常告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [300,380,420,370,450,360,500,470,500,550,410,570,423,590,480,470,540,620,570,690,770,650];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_53() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_53'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000, //表盘最大值
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
center: ["50%", "60%"], // 仪表位置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 62, name: '监控无响应告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
data= [40,88,267,100,55,65,178,82,30,66,76,67,45,79,89,90,200,120,300,230,56,70];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_54() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_54'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
center: ["50%", "60%"], // 仪表位置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 256, name: '接收电平强度告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [600,240,300,278,330,380,440,670,500,559,340,400,278,389,456,290,390,400,450,470,700,720];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_55() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_55'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 53, name: '光收发告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [100,180,220,320,450,160,200,270,300,450,610,270,323,490,320,370,490,520,670,700,720,890];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_56() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_56'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '65%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 48, name: '功放过温告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
data= [20,180,220,170,50,90,100,180,300,150,210,170,50,70,110,77,59,30,50,190,210,390];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_57() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_57'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '65%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 554, name: '下行输入欠功率告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [600,580,700,770,850,960,500,670,700,450,670,470,780,490,520,600,690,700,750,870,670,800];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_58() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_58'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:1000,
splitNumber: 10, // 分割段数，默认为5
radius: '68%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
show:false,
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 46, name: '门禁告警'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
data= [10,230,320,170,55,300,400,67,100,150,210,370,423,90,180,270,390,420,70,190,220,390];
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}
function echart_6(){
var myChart = echarts.init(document.getElementById('chart_6'));
option = {
// backgroundColor: '#18163B',
title: {
text: '通过告警算法预测故障原因',
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:12, //大小
},left:'center'
},
grid: {
top: '10%',
right: '5%',
left: '10%',
bottom: '30%'
},
xAxis: [{
type: 'category',
color: '#fff',
data: ['参数', '延伸系统', '老旧隐患','设备', '传输/线路', '动力'],
axisPointer: {
type: 'line'
},
axisLine: {
lineStyle: {
color: '#272456'
}
},
axisLabel: {
margin: 10,
color: '#fff',
textStyle: {
fontSize: 10
},
},
}],
yAxis: [{
min: 0,
max: 600,
splitNumber : 4,
axisLabel: {
formatter: '{value}',
color: '#fff',
interval:0,
textStyle: {
fontSize: 10
},
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: '#272456'
}
}
}],
series: [{
type: 'bar',
data: [80, 150, 250, 240, 320, 550],
barWidth: '10px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#41E1D4' // 0% 处的颜色
}, {
offset: 1,
color: '#10A7DB' // 100% 处的颜色
}], false),
barBorderRadius: [5, 5, 0, 0],
shadowColor: 'rgba(0,255,225,1)',
shadowBlur: 4,
}
},
// label: {
// normal: {
// show: true,
// lineHeight: 10,
// width: 60,
// height: 20,
// backgroundColor: '#252453',
// borderRadius: 200,
// position: ['-8', '-30'],
// distance: 1,
// formatter: [
// ' {d|●}',
// ' {a|{c}} \n',
// ' {b|}'
// ].join(','),
// rich: {
// d: {
// color: '#3CDDCF',
// },
// a: {
// color: '#fff',
// align: 'center',
// },
// b: {
// width: 1,
// height: 30,
// borderWidth: 1,
// borderColor: '#234e6c',
// align: 'left'
// },
// }
// }
// }
}]
};
myChart.setOption(option);
}
function echart_7(){
var myChart = echarts.init(document.getElementById('chart_7'));
function showProvince() {
myChart.setOption(option = {
backgroundColor:'' ,//设置无背景色
visualMap: {
show: false,
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
// inRange: {
// color: ['yellow', 'lightskyblue', 'orangered']
// }
},
grid: {
// right: '2%',//生成的图片和右边的间距’,
// bottom: '10%',//生成的图片和底部的间距
top: '-20px',//生成的图片和顶部的间距
containLabel: true//为ture才会生效以上的设置
},
series: [{
type: 'map',
mapType: 'zhejiang',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
// itemStyle: {
// normal: {
// borderColor: '#389BB7',
// areaColor: '#fff',
// },
// emphasis: {
// areaColor: '#389BB7',
// borderWidth: 0
// }
// },
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(175,238,238, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(47,79,79, .1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
animation: false,
data: [{
name: '丽水',
}, {
name: '杭州',
}, {
name: '温州',
}, {
name: '宁波',
}, {
name: '舟山',
// value: 88 去掉则透明
}, {
name: '台州',
}, {
name: '金华',
}, {
name: '衢州',
}, {
name: '绍兴',
}, {
name: '嘉兴',
}, {
name: '湖州',
}]
}]
});
}
var currentIdx = 0;
showProvince();
// 使用刚指定的配置项和数据显示图表。
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echart_8(){
var myChart = echarts.init(document.getElementById('chart_8'));
var data = [{
"name": "FDD-1800小区占比",
"value": 10
}, {
"name": "FDD-900小区占比",
"value": 10
}, {
"name": "A频小区占比",
"value": 10
}, {
"name": "E频小区占比",
"value": 10
}, {
"name": "D频小区占比",
"value": 20
}, {
"name": "F频小区占比",
"value": 30
}, ]
option = {
color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],
// backgroundColor: '#000',
title: {
// text: '总数',
// subtext: 7789,
// textStyle: {
// color: '#f2f2f2',
// fontSize: 16,
// // align: 'center'
// },
// subtextStyle: {
// fontSize: 30,
// color: ['#ff9d19']
// },
// x: 'center',
// y: 'center',
},
grid: {
bottom: 150,
left: 100,
right: '10%'
},
// legend: {
// orient: 'vertical',
// top: "middle",
// right: "1%",
// textStyle: {
// color: '#f2f2f2',
// fontSize: 12,
// },
// itemWidth: 15, // 设置宽度
// itemHeight: 8, // 设置高度
// icon: 'roundRect',
// data: data,
// },
series: [
// 主要展示层的
{
radius: ['20%', '51%'],
center: ['45%', '45%'],
type: 'pie',
label: {
normal: {
show: true,
formatter: "{b}",
textStyle: {
fontSize: 10,
},
position: 'outside'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length: 5,
length2: 10
},
emphasis: {
show: true
}
},
// name: "民警训练总量",
data: data,
},
// 边框的设置
{
radius: ['20%', '26%'],
center: ['45%', '45%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}, {
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['45%', '45%'],
radius: ['55%', '55%'],
label: {
normal: {
show: false
}
},
data: [{
value: 9,
name: '',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#0b5263'
}
}
}]
},
]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
// function echart_91() {
// var myChart = echarts.init(document.getElementById('chart_91'));
// var option = {
// title: {
// text: '4G覆盖能力',
// textStyle:{
// color:'#fff', //颜色
// fontStyle:'normal', //风格
// fontWeight:'normal', //粗细
// // fontFamily:'Microsoft yahei', //字体
// fontSize:14, //大小
// align:'center' //水平对齐
// },left:'center'
// },
// color:['#ef5f2b','#4a6ac4'],
// tooltip: {},
// legend: {
// data:['杭州','全省'],
// textStyle:{
// color:"#fff",
// fontSize: 10
// },
// icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
// itemWidth: 8, // 设置宽度
// itemHeight: 8, // 设置高度
// itemGap: 10,// 设置间距
// padding: [40, 10, 4, 20] // [5, 10, 15, 20]
// },
// dataset: {
// source: [
// ['x','MR覆盖率','4G驻留比','VO-LTE驻留比'],
// ['杭州', 98, 100, 98],
// ['全省', 98, 100, 98]
// ]
// },
// xAxis: [
// {
// type: 'category', gridIndex: 0,
// //设置坐标轴字体颜色和宽度
// axisLine: {
// lineStyle: {
// color: "#fff",
// // width: 20,
// }
// },
// axisLabel: { //x轴文字样式
// textStyle: {
// fontSize: 10
// }
// },
// }
// ],
// yAxis: [
// {
// gridIndex: 0,
// //设置坐标轴字体颜色和宽度
// axisLine: {
// lineStyle: {
// color: "#fff",
// }
// },
// axisLabel: { //x轴文字样式
// textStyle: {
// fontSize: 10
// }
// },
// }
// ],
// grid: [
// {
// top: '60',
// right: '5',
// bottom:'20'
// }
// ],
// series: [
// // These series are in the first grid.
// {type: 'bar', seriesLayoutBy: 'row', barWidth:20, barGap:'10%',},
// {type: 'bar', seriesLayoutBy: 'row', barWidth:20, barGap:'10%',},
// // These series are in the second grid.
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // window.addEventListener("resize", function () {
// // myChart.resize();
// // })
// }
// function echart_92() {
// var myChart = echarts.init(document.getElementById('chart_92'));
// var option = {
// title: {
// text: '业务承载',
// textStyle:{
// color:'#fff', //颜色
// fontStyle:'normal', //风格
// fontWeight:'normal', //粗细
// // fontFamily:'Microsoft yahei', //字体
// fontSize:14, //大小
// align:'center' //水平对齐
// },left:'center'
// },
// color:['#ef5f2b','#4a6ac4'],
// tooltip: {},
// legend: {
// data:['业务量','业务占比'],
// textStyle:{
// color:"#fff",
// fontSize: 10
// },
// icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
// itemWidth: 8, // 设置宽度
// itemHeight: 8, // 设置高度
// itemGap: 10,// 设置间距
// padding: [40, 10, 4, 20] // [5, 10, 15, 20]
// },
// dataset: {
// source: [
// ['x','VOLTE话务量（万ERL）','LTE流量TB'],
// ['业务量', 310, 750],
// ['业务占比', 10, 10]
// ]
// },
// xAxis: [
// {
// type: 'category', gridIndex: 0,
// //设置坐标轴字体颜色和宽度
// axisLine: {
// lineStyle: {
// color: "#fff",
// // width: 20,
// }
// },
// axisLabel: { //x轴文字样式
// textStyle: {
// fontSize: 10
// }
// },
// }
// ],
// yAxis: [
// {
// gridIndex: 0,
// //设置坐标轴字体颜色和宽度
// axisLine: {
// lineStyle: {
// color: "#fff",
// }
// },
// axisLabel: { //x轴文字样式
// textStyle: {
// fontSize: 10
// }
// },
// }
// ],
// grid: [
// {
// top: '60',
// right: '5',
// bottom:'20'
// }
// ],
// series: [
// // These series are in the first grid.
// {type: 'bar', seriesLayoutBy: 'row', barWidth:30, barGap:'10%',},
// {type: 'bar', seriesLayoutBy: 'row', barWidth:30, barGap:'10%',},
// // These series are in the second grid.
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // window.addEventListener("resize", function () {
// // myChart.resize();
// // })
// }
//
//点击跳转
// $('#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";
// });
});