echarts柱形图倒立，两边都是正数
生活随笔
收集整理的這篇文章主要介紹了
echarts柱形图倒立，两边都是正数
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
//流失用戶監(jiān)控柱形圖
var itemStyle = {normal: {},
emphasis: {barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
analyseBarChartOption = {// backgroundColor: '#eee',
title: {text: '流失用戶監(jiān)控',
x:'center'
},
legend: { //小標(biāo)簽
data: ['流失用戶', '新增用戶','凈增用戶'],
x: 'center', //標(biāo)簽位置
y: 'bottom',
itemGap: 15 //標(biāo)簽之間間距
// itemHeight: 19,
// itemWidth: 20,
// textStyle: {
// color: '#999'
// }
},
tooltip: {trigger: 'axis',
padding: 10,
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'line' // 默認(rèn)為直線，可選為：'line' | 'shadow'
},
formatter:function(params){ // 改鼠標(biāo)懸浮提示值格式
var relVal = params[0].name+"<br/>";
relVal += params[0].seriesName+ ' : ' + Math.abs(params[0].value) +"<br/>";
relVal += params[1].seriesName+ ' : ' +Math.abs(params[1].value)+"<br/>";
relVal += params[2].seriesName+ ' : ' +Math.abs(params[2].value)+"<br/>";
return relVal;
}},
dataZoom: { //滾動(dòng)條
show: true,
y: 265,
// realtime: true,
start: 30,
end: 70,
height: 12,
handleColor: '#1a8edc',
handleSize: 5,
fillerColor: '#a5cdea'
},
xAxis: {// name: 'X Axis',
silent: false,
// axisLine: {onZero: true}, // 定位到垂直方向的0值坐標(biāo)上
axisLine: {show: false},
splitLine: {show: false},
splitArea: {show: false},
axisTick: { //刻度
show: false
},
axisLabel:{ //x軸數(shù)據(jù)
textStyle: { //x軸數(shù)據(jù)字體設(shè)置
color: '#666'
}},
data : function (){ var list = [];
for (var i = 1; i <= 11; i++) {list.push(i + '日');
}return list;
}()},
yAxis : [{inverse: true,
splitArea: {show: false}, //背景區(qū)域
splitLine: { //背景網(wǎng)格線
lineStyle: {color: '#9ecbcc',
width: 1
}},
type : 'value',
axisLabel:{ //Y軸數(shù)據(jù)
formatter:function(value){return Math.abs(value); //負(fù)數(shù)取絕對(duì)值變正數(shù)
// if (value<0) { //另一寫法
// return -value;
// }else {
// return value;
// }
},
textStyle: { //Y軸數(shù)據(jù)字體設(shè)置
color: '#666'
}},
axisTick: { //刻度
show: false
},
axisLine: { //坐標(biāo)軸
show:true,
lineStyle: { //坐標(biāo)軸線設(shè)置
width: 1,
color: '#ccc'
}}},
{type : 'value', //曲線y軸
// name : '溫度',
axisLine: { //坐標(biāo)軸
show:true,
lineStyle: { //坐標(biāo)軸線設(shè)置
width: 1,
color: '#ccc'
}},
splitLine: { //背景網(wǎng)格線
show: false
},
axisLabel : { //y軸數(shù)據(jù)
show:false, //是否展示
formatter: '{value} °C'
},
axisTick: { //刻度
show: false,
lineStyle: {color: '#76AFF4',
width: 1
}}}],
grid: {left: 100 //整體偏移
},
series: [{name: '流失用戶',
type: 'bar',
stack: 'one',
itemStyle: itemStyle,
data:[70, 172, 105, 80, 116, 180, 190,120,110,115,90]},
{name: '新增用戶',
type: 'bar',
stack: 'two',
itemStyle: itemStyle,
data:[-90, -172, -105, -80, -116, -180, -190,-120,-110,-115,-60]},
{name:'凈增用戶',
type:'line',
yAxisIndex: 1,
itemStyle: {normal: {color: '#519933'
}},
data:[75,-72, 120, -90, 80, -100, 190, -160, 135, -70,50]}]
};
附圖;
附圖;
總結(jié)
以上是生活随笔為你收集整理的echarts柱形图倒立，两边都是正数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅谈一种Android客户端架构设计
- 下一篇： Html 让文字显示在图片的上面