切换tab按钮通过显示隐藏展示不同charts图

html部分

<div class="panel-run-status">

<div class="panel panel-default">

<div class="panel-heading">

<span>运行概况</span>

</div>

<div class="tab-status">

<span class="activeStatus rdsInstance">

<i class="iconfont icon-instance"></i>

<i>实例</i>

</span>

<span class="rdsServer">

<i class="iconfont icon-fuwuqi1"></i>

<i>服务器</i>

</span>

<span class="rdsMiddle">

<i class="iconfont icon-zhongjianjian"></i>

<i>中间件</i>

</span>

</div>

<div class="panel-body no-padding-left" id="runStatus">

</div>

<div class="panel-body no-padding-left hidden" id="runServer">

</div>

<div class="panel-body no-padding-left hidden" id="runMiddleware">

</div>

</div>

</div>

 

其中一个charts图，另外两个图，方法类似，就像平时画eacharts图一样，再写两个

var spNum = 5;

var data = [{count:1,name:'故障',status:'1'},{count:2,name:'异常',status:'2'},{count:3,name:'预警',status:'3'},{count:4,name:'正常',status:'4'}]

var honorData4 = [];

var myColor = ["#F25B76","#F4D943","#F6BF60", "#5ECB9B"];

var legendData = [],

honorXAxisData = ['故障','预警','异常','正常'];

var sumData1 = null;

data.map(function(item, y) {

honorData4.push(item.count)

sumData1+=item.count

console.log(sumData1)

});

var isMax =sumData1;

var _max = sumData1;

var bjData1 = [isMax, isMax, isMax, isMax];

var fomatter_fn = function(v) {

console.log(v)

if(v.value==0){

v.value = ''

return (v.value='')

}else{

return (v.value)

}

}

var _label = {

normal: {

show: true,

position: 'inside',

formatter: fomatter_fn,

textStyle: {

color: '#fff',

fontSize: 12

}

}

};

var option = {

tooltip: {

trigger: "axis",

axisPointer: {

type: "none"

},

borderColor: "#ddd",

textStyle: {

fontSize: 14

},

formatter: function(p) {

var relVal = p[0].name;

var sum = 0;

for (var z = 0; z < p.length; z++) {

if (!(p[z].seriesName == 1001 || p[z].seriesName == 1000)) {

sum += p[z].value;

}

}

for (var i = 0; i < p.length; i++) {

if (!(p[i].seriesName == 1001 || p[i].seriesName == 1000)) {

relVal += "<br>" + p[i].marker + p[i].seriesName + " " + p[i].value + " " + "(" + ((100 * parseFloat(p[i].value)) / parseFloat(_max)).toFixed(2) + "%)";

}

}

return relVal;

}

},

backgroundColor: "#f666",

legend: {

show:false,

data: ['正常','故障','预警','异常'],

icon: "rect",

itemWidth: 10,

　　 itemHeight: 10,

selectedMode: false,

textStyle: {

color: "#666666",

fontSize: 14

}

},

grid: {

left: "14%",

right: "10%",

bottom: "5%",

top: "20%",

containLabel: true

},

xAxis: [{

type: "value",

show: false,

splitNumber: spNum,

interval: _max / spNum,

max: _max,

axisLabel: {

show: false,

formatter: function(v) {

var _v = (v / _max * 100).toFixed(0);

return _v == 0 ? _v : _v + '%';

}

},

axisLine: {

show: false

},

axisTick: {

show: false

},

splitLine: {

show: false

}

}

],

yAxis: [{

type: "category",

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

color: "#333333",

fontSize: 14,

fontWeight: 400,

interval: 0

},

offset: 20,

data: honorXAxisData

},

{

type: "category",

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

color: "#fff",

fontSize: 10,

fontWeight: 300,

interval: 0

}

}

],

series: [

{

name: " ",

type: "bar",

label: _label,

barWidth: 12,

stack: "总量",

itemStyle: {

normal: {

color: function(params) {

var num = myColor.length;

return myColor[params.dataIndex % num]

},

}

},

zlevel: 10,

data: honorData4

},

{

name: "1000",

type: "bar",

barGap: "-100%",

barWidth: 12,

itemStyle: {

normal: {

color: '#efefef'

}

},

xAxisIndex: 0,

// yAxisIndex: 1,

data: bjData1,

emphasis: {

itemStyle: {

color: '#efefef'

}

},

zlevel: 5

}

]

}