最基础eacharts图带数字，百分比,tab切换

 切换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
}
]
}