echart 图表问题
程序员文章站
2022-04-19 22:34:36
...
echart 网址 : http://echarts.baidu.com/index.html
纵坐标的最大值
//计算最大值
var getMax=function(arr,ifnumber){
var newArr=[];
for (var i = 0; i < arr.length; i++) {
newArr.push(arr[i]);
}
for (var i = 0; i < newArr.length; i++) {
if(isNaN(newArr[i])){
newArr[i]=0;
}
}
if (isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=1) {
if(ifnumber==undefined || ifnumber==''){
return 1;
}else{
return 10;
}
}else if(isNaN(Math.max.apply(null,newArr))||Math.max.apply(null,newArr)<=10){
return 10;
}else{
var max = Math.max.apply(null,newArr);
//获得数组的最大值
var num = Math.ceil(max / Math.pow(10,String(Math.ceil(max)).length-1) );
max = Math.pow(10,String(Math.ceil(max)).length-1 )*num;
return max;
}
}堆叠柱状图
比较完整
任何要显示给用户看的数据或者数据格式都要在tooltips设置 formatter: function (params)，params参数是个神奇的参数
data:[
[日期],
[数据百分比],
[数据总量],
[legend 值]
]
var allSeries=[],
lengdata = [],
biao=[],
all=[],
topp='',
len = data.length,
lenfo = data[len-1].length;
var j=0;
//Series显示的数据
for(var i=0;i<lenfo-1;i++){
lengdata[i] = data[len-1][i+1];
allSeries[i] = {};
allSeries[i].name =data[len-1][i+1];
allSeries[i].type = 'bar';
//类型为柱状图
allSeries[i].stack = '总量';
allSeries[i].barMinWidth = 10;
柱子的大小
allSeries[i].barMaxWidth =28;
allSeries[i].barGap =3;
allSeries[i].left =20;
allSeries[i].itemStyle = {"normal":{"barBorderRadius":0}};
allSeries[i].data = data[i+1];
}
for(var i=lenfo;i<len-1;i++){
//显示的数量值
biao[j] = data[i];
j++;
}
if (data[len-1][0].search('TM Number') == '-1' ) {
topp = 25; }
else{
topp =22;
}
var chart = echarts.init(document.getElementById(containerId, 'infographic'));
chart.setOption({
tooltip : {
trigger: 'axis',
//指示器
axisPointer:{
type: 'line',
lineStyle: {
color: '#008FD4',
width: '2'
}
},
position: function (point, params, dom, rect, size) {
// 固定在顶部
return [point[0]+15, point[1]+15];
},
//鼠标移入显示的值
formatter: function (params) {
var jj="";
for (var i = 0; i < params.length; i++) {
var index = params[i].dataIndex;
var biaodata='';
if (params[i].seriesName =='other' || params[i].seriesName =='sone' ) {
biaodata = biao[0][index] ;
}
else
biaodata = biao[6][index];
jj +='<br/>' + '<div style="width: 15px;height: 10px;border-radius:2px;background:'+params[i].color+';display: inline-block;"></div>'+' '+params[i].seriesName+':'+params[i].value+'%('+biaodata+')';
}
return params[0].name+ jj;}
},
//左上角的标题
title:{
text:data[len-1][0],
x:'left',
textStyle:{
color:data[len-1][0]=='Abnormal server!'?'red':'#000',
fontSize:14,
fontWeight:'normal'
}
},
color:['#218ce7','#9127fd' ,'#37b44a', '#f99a13', '#fdf027', '#f31f3d', '#20ebb9' , '#585eaa','#b22c46', '#96582a'],
//右上角显示的各种类型
legend: {
data:lengdata,
itemHeight:8,
itemGap:8,
width: '100%',
itemWidth: 16,
left:'right',
top:topp,
// bottom:bott,
formatter: function (name) {
return echarts.format.truncateText(name, 70, '14px Microsoft Yahei', '…');
},
tooltip: {
show: true
}
},
grid: {
left: 20,
right:25,
bottom: '7%',
containLabel: true
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#cccccc',
}
},
splitLine:{
show:true,
lineStyle:{
color:'#e5e5e5',
}
},
max:100,
axisLabel:{
//显示y轴的格式和颜色
textStyle:{color:'#666666'},
formatter: function (value) {
return value +'%';
}
}
},
xAxis: {
type: 'category',
splitLine:{
show:true,
lineStyle:{
color:'#e5e5e5',
}
},
data:data[0],
//minInterval: 0,\
axisLabel:{
textStyle:{color:'#666666'},
interval: 6,
splitNumber: 15,
},
axisLine:{
lineStyle:{
color:'#cccccc',
}
}
},
series: allSeries
});
}
折线图
if(data==''){
data=[[],[],[]]
}
var percentage = '';
var nameType = '';
var titleName = data[2][0];
if(data[2][0].search('比例')!='-1'){
percentage = '%' ;
nameType = 'Ratio';
}else(data[2][0].search('AvgRat') !='-1'|| data[2][0].search('平均比')!='-1'){
percentage = '%' ;
nameType = 'Average';
if(data[2][0].search('AvgRat')){
titleName = data[2][0].replace(/AvgRat/,'Average');
}
}
var chart = echarts.init(document.getElementById(containerId), 'infographic');
chart.setOption({
title:{
text:titleName,
x:'left',
textStyle:{
color:data[2][0]=='Abnormal server!'?'red':'#000'
}
},
grid:{
top:50,
left:20,
right:25
},
legend:{
data:[data[2][1]],
x:'right',
selectedMode:false
},
tooltip:{
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
if (isNaN(params[i].value)) {
params[i].value='--';
}
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value+percentage;
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 0)
return 'loading';
}
},
xAxis:[{
type : 'category',
data : data[0],
axisLabel:{
interval: 6,
//rotate: 32, x轴旋转的角度
},
}],
yAxis:[{
type:'value',
min:0,
name:nameType,
nameGap:12,
axisLabel: {
formatter: function (value) {
return value + percentage;
}
},
//max为null 就是自动显示最大值；
max:percentage=="%"?getMax(data[1]):null,
}],
series:[{
name:data[2][1],
itemStyle:{
normal:{
color:"#54acd5"
}
},
silent:true,
type:'line',
data:data[1],
showAllSymbol:true
}]
});双曲线折线图
var chart = echarts.init(document.getElementById(containerId), 'infographic');
chart.setOption({
title:{
text:data[4][0],
textStyle:{
color:data[4][0]=='Abnormal server!'?'red':'#000'
},
itemGap:5,
//subtext:revisableGloblePara.date,
},
grid:{
top:70,
right:25
},
legend:{
top:20,
data:[data[4][1],data[4][2],data[4][3]],
x:"right"
},
tooltip:{
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
if (isNaN(params[i].value)) {
params[i].value='--';
}
if ( params[i].componentSubType=='bar') {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value;
} else {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value+'%';
}
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 0)
return 'loading';
}
},
xAxis:[{
type : 'category',
axisLabel:{
interval: 6
},
data:data[0],
}],
yAxis:[
{
type: 'value',
min:0,
max:getMax([getMax(data[1]),getMax(data[2]),getMax(data[3])]),
nameGap:12,
name:'Ratio',
axisLabel: {
formatter: function (value) {
return value + '%';
}
},
}],
series:[{
name:data[4][1],
type:'line',
silent:true,
barMinWidth:10,
barMaxWidth:28,
itemStyle:{
normal:{
color:"#54acd5"
}
},
data:data[1],
showAllSymbol:true
},
{
name:data[4][2],
silent:true,
itemStyle:{
normal:{
color:"#f99660"
}
},
type:'line',
//yAxisIndex:1,
data:data[2],
showAllSymbol:true
},
{
name:data[4][3],
silent:true,
itemStyle:{
normal:{
color:"#85c56c"
}
},
type:'line',
//yAxisIndex:1,
data:data[3],
showAllSymbol:true
}]
});柱状图和两条折线图
var x=[];
for (var i=0;i<data[0].length;i++) {
var a='\n\n\n\n\n\n'+data[0][i];
x.push(a);
}
var chart = echarts.init(document.getElementById(containerId), 'infographic');
chart.setOption({
title:{
text:data[4][0],
textStyle:{
color:data[4][0]=='Abnormal server!'?'red':'#000'
},
itemGap:5,
subtext:revisableGloblePara.date,
},
grid:{
top:70
},
legend:{
data:[data[4][1],data[4][2],data[4][3]],
x:"right",
top:15,
},
tooltip:{
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
if (isNaN(params[i].value)) {
params[i].value='--';
}
if ( params[i].componentSubType=='bar') {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value;
} else {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value+'%';
}
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 0)
return 'loading';
}
},
xAxis:[{
type : 'category',
margin:-25,
axisLabel:{
margin:-25,
interval: 0,
rotate: 32,
splitNumber: 15,
},
data:x,
}],
yAxis:[{
type: 'value',
min:0,
max:getMax(data[1],true),
interval:getMax(data[1],true)/5,
name:'Number',
nameGap:12,
},
{
type: 'value',
min:0,
max:getMax([getMax(data[2]),getMax(data[3])]),
nameGap:12,
name:'Ratio',
axisLabel: {
formatter: function (value) {
return value + '%';
}
},
}],
series:[{
name:data[4][1],
type:'bar',
silent:true,
barMinWidth:10,
barMaxWidth:28,
itemStyle:{
normal:{
color:"#54acd5"
}
},
data:data[1]
},
{
name:data[4][2],
silent:true,
itemStyle:{
normal:{
color:"#f99660"
}
},
type:'line',
yAxisIndex:1,
data:data[2],
showAllSymbol:true
},
{
name:data[4][3],
silent:true,
itemStyle:{
normal:{
color:"#a4bf6a"
}
},
type:'line',
yAxisIndex:1,
data:data[3],
showAllSymbol:true
}]
});柱状图和1条折线图
var chart = echarts.init( document.getElementById(containerId) , 'infographic' );
chart.setOption({
title:{
text:data[3][0],
x:'left',
textStyle:{
color:data[3][0]=='Abnormal server!'?'red':'#000'
}
},
grid:{
top:50,
right:25
},
legend: {
data:[data[3][1],data[3][2]],
x:"right"
},
tooltip:{
trigger: 'axis',
formatter: function (params, ticket, callback) {
var res = params[0].name;
for (var i = 0; i < params.length; i++) {
if (isNaN(params[i].value)) {
params[i].value='--';
}
if ( params[i].componentSubType=='bar') {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value;
} else {
res += '<br/><div style="display:inline-block;height:10px;width:10px;border-radius:5px;background-color:' + params[i].color + '"></div>  ' + params[i].seriesName + ' : ' + params[i].value+'%';
}
}
setTimeout(function () {
// 仅为了模拟异步回调
callback(ticket, res);
}, 0)
return 'loading';
}
},
xAxis:[{
type : 'category',
data : data[0],
axisLabel:{
interval:6,
}
}],
yAxis:[{
type:'value',
min:0,
max:getMax(data[1],true),
interval:getMax(data[1],true)/5,
name:'Number',
nameGap:12,
},
{
type : 'value',
min:0,
name:'Ratio',
axisLabel: {
formatter: function (value) {
return value + '%';
}
},
nameGap:12,
interval:getMax(data[2])/5,
max:getMax(data[2]),
}],
series:[{
name:data[3][1],
silent:true,
type:'bar',
barMinWidth:10,
barMaxWidth:28,
itemStyle:{
normal:{
color:"#54acd5"
}
},
data:data[1]
},
{
name:data[3][2],
silent:true,
itemStyle:{
normal:{
color:"#f99660"
}
},
type:'line',
yAxisIndex:1,
data:data[2],
showAllSymbol:true
}]
});圆环
var mark=[];
for(var i=0;i<frdata.length;i++){
mark.push(frdata[i].name);
}
var chart = echarts.init(document.getElementById(containerId1), 'infographic');
var option={
title:{
text:'Cause\nClass',
x:'center',
y:'50px',
textStyle:{
color:"#333",
fontSize:14
}
},
tooltip:{
position:['0%','100px'],
trigger:'item',
formatter:"{b}<br>{c}({d}%)",
},
legend:{
orient : 'vertical',
y:'bottom',
data:mark,
selectedMode:false,
formatter: function (name) {
return echarts.format.truncateText(name, 200, '…');
},
tooltip: {
show: true
}
},
toolbox:{
show:false,
feature:{
mark : {show: true},
magicType : {
show: true,
type: ['pie', 'funnel'],
option:{
funnel:{
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
}
},
series : [
{
type:'pie',
minAngle:3,
center:['50%',"70"],
radius : ['45px', '61px'],
itemStyle : {
normal : {
label : {
show : false
},
},
emphasis : {
label : {
show : false,
}
}
},
data:frdata
}
]
};