$(function (){
//ups部分
var myChart = echarts.init(document.getElementById('result'))
var option = {
title : {
text: '實驗結果評測',
x:'center',
y:'top',
top:'7%',
textAlign:'left',
textStyle:{
fontWeight:'normal',
color:'#000',
fontSize:'15'
}
},
grid: {
top: '20%',
left: '50%',
right: '50%',
bottom: '1%',
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable : true,
series : [
{
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
},
name:'訪問來源',
type:'pie',
radius : ['25%','35%'],
center: ['47%', '50%'],
label:{show:true},
labelLine:{show:true,length:100},
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
],
labelLine: {
normal: {
smooth: 0.2, //此處是改變折線的長度
length: 5,
length2: 4
}
},
itemStyle:{
normal:{
color:function(params){
var colorList=['#5eaee3','#9abd5f','#fa8564'];
return colorList[params.dataIndex];
}
},
},
data:[
{value:335, name:'不合格:30臺'},
{value:310, name:'正常:35臺'},
{value:234, name:'異常:35臺'}
]
}
]
};
myChart.setOption(option);
//點擊事件
myChart.on('click', function (param){
/* var name=param.name;
if(name=="不合格:30臺"){
window.location.href="http://www.wellinte.com/";
}else if(name=="正常:35臺"){
window.location.href="http://www.wellinte.com/";
}else if(name=="異常:35臺"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
myChart.on('click');
//壽命評估
var life=document.getElementById('reasonLife');
//用於使chart自適應高度和寬度,經過窗體高寬計算容器高寬
var lifeHeight = function () {
life.style.width =(window.clientWidth-100)+'px';
life.style.height =(window.clientHeight-100)+'px';
};
//設置容器高寬
lifeHeight();
var reasonLife = echarts.init(life);
var option = {
title : {
text: '壽命評估',
x:'center',
y:'top',
textAlign:'left',
top:'5%'
},
tooltip : {
trigger: 'axis',
axisPointer:{
type:'none',
},
},
/*legend: {
data:['蒸發量']
},*/
grid: {
top: '20%',
left: '8%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {
right:'3%',
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['前期','中期','末期','損耗期']
}
],
yAxis :{
axisLine:{show:false},
nameLocation:'middle',
nameGap:35,
name:'個數(個)',
type : 'value'
},
series : [
{
name:'壽命評估',
type:'bar',
barWidth : 50,
data:[150,100,40,60],
itemStyle:{
normal:{
color:function(params){
var colorList=['#ffc100','#9abd5f','#56bdde','#fa8564'];
return colorList[params.dataIndex];
}
}
}
},
],
};
reasonLife.setOption(option,true);
//點擊事件
reasonLife.on('click', function (param){
/* var name=param.name;
if(name=="前期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="中期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="末期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="損耗期"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
reasonLife.on('click');
//以上爲ups部分
//如下爲儀表部分
var ochart=document.getElementById('reason');
//用於使chart自適應高度和寬度,經過窗體高寬計算容器高寬
var place = function () {
ochart.style.width = (window.clientWidth-100)+'px';
ochart.style.height =(window.clientHeight-100)+'px';
};
//設置容器高寬
place();
var reason = echarts.init(ochart);
var option = {
title : {
text: '壽命預警分類',
x:'center',
y:'top',
textAlign:'left',
top:'5%'
},
tooltip : {
trigger: 'axis',
axisPointer:{
type:'none',
},
},
/* legend: {
data:['蒸發量']
},*/
grid: {
top: '20%',
left: '8%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {
right:'3%',
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['A級','B級','C級']
}
],
yAxis :{
axisLine:{show:false},
nameLocation:'middle',
nameGap:35,
name:'個數(個)',
type : 'value'
},
series : [
{
name:'個數',
type:'bar',
barWidth : 50,
data:[160,80,40],
itemStyle:{
normal:{
color:function(params){
var colorList=['#ffc100','#9abd5f','#56bdde','#fa8564'];
return colorList[params.dataIndex];
}
}
}
},
]
};
reason.setOption(option);
//點擊事件
reason.on('click', function (param){
/* var name=param.name;
if(name=="A級"){
window.location.href="http://www.wellinte.com/";
}else if(name=="B級"){
window.location.href="http://www.wellinte.com/";
}else if(name=="C級"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
reason.on('click');
//用於使chart自適應高度和寬度
window.onresize = function () {
//重置容器高寬
reason.resize()|| reasonLife.resize();;
place() || lifeHeight();;
};
});echarts