//数字跳动
// 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_22();
echart_24();
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_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}
{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:'数量',
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:58, name:'控制柜'},
{value:0, name:'曝气机'},
{value:0, name:'管网监测点'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
function echart_24() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_24'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{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:58, name:'控制柜'},
{value:0, name:'曝气机'},
{value:0, name:'管网监测点'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//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}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:-10,
max:10,
splitNumber: 2, // 分割段数，默认为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: 3, 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}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:100,
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: 0, 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}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:100, //表盘最大值
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: 71, 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}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:1000,
max:1100,
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: 1016, 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}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:10,
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: 1, name: '风力'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
}
function echart_56() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_56'));
var option = {
tooltip : {
formatter: "{a}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:100,
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: 10, name: '风速'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
function echart_57() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_57'));
var option = {
tooltip : {
formatter: "{a}
{b} : {c}"
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0,
max:10,
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: 0, name: '降雪量'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
}
function echart_58() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_58'));
var option = {
tooltip : {
formatter: "{a}
{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: 0, name: '是否有雾'}]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
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: [0, 0, 0, 0, 0, 0],
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: 'shanxi',
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";
// });
});