1.设置一个或者多个y轴对齐
实例
方法代码
function _getMaxValue(arr) {
const max = Math.max(...arr);
// 这样处理是为了不让最大值刚好到坐标轴最顶部
return Math.ceil(max / 9.5) * 10;
}
function _getMinValue(arr) {
const min = Math.min(...arr);
// 这样处理是为了不让最大值刚好到坐标轴最底部
return Math.floor(min / 12) * 10;
}
使用代码
mainStat(seriesData,changeData,xAxisData){
var chartDom = document.getElementById('mainStat');
var myChart = echarts.init(chartDom);
var option;
// let seriesData = []
// let changeData = []
// let xAxisData = []
// xAxisData=getdiffdate(this.cTimeData[0],this.cTimeData[1],7);
// seriesData = [12442,2314,1241,4442,5234,9563,4223]
// changeData = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// console.log(xAxisData);
const min1 =_getMinValue(changeData),
min2 = _getMinValue(seriesData),
max1 = _getMaxValue(changeData),
max2 = _getMaxValue(seriesData);
option = {
grid:{
x:40,
y:30,
x2:35,
y2:40,
containLabel:true
// borderWidth:1,
},
// legend: {
// x:'right',
// data: ['日常日志输出数量'],
// textStyle: {color: 'rgba(255, 255, 255, 0.5)'},
// },
tooltip:{
show:true,
trigger: 'axis',
formatter: function (params) {
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesName=='变化率'){
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
}else {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value
}
}
return relVal
}
},
xAxis: {
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval:0,
rotate:20//角度顺时针计算的
},
// boundaryGap: false,
data: xAxisData,
lineStyle:{
//文字颜色
background: '#0C347C',
// color: 'rgba(235, 235, 235, 1)',
color: '#0C347C',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily: "Microsoft YaHei UI",
//字体大小
fontSize:'15px',
},
axisLine: {
lineStyle:{
//文字颜色
color: '#1ADBFB',
// color: '#0C347C',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily: "Microsoft YaHei UI",
//字体大小
fontSize:'15px',
},
}
},
yAxis: [
{
name: '数量',
type: 'value',
plitNumber: 5,
interval: (max2 - min2) / 5,
min: min2,
max: max2,
splitLine: {
show: true,
lineStyle:{
color: ['rgba(221, 221, 221, 0.3)'],
width: 1,
type: 'solid'
},
},
axisLine: {
show: true,
lineStyle:{
//文字颜色
// background: '#0C347C',
color: '#908B8B',
//字体风格,'normal','italic','oblique'
fontStyle:'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight:'bold',
//字体系列
fontFamily: "Microsoft YaHei UI",
//字体大小
fontSize:'15px',
},
},
},
{
type: 'value',
name: '变化率',
min: min1,
max: max1,
splitNumber: 5,
interval: (max1 - min1) / 5,
position: 'right',
splitLine: {
show: false,
lineStyle:{
color: ['rgba(221, 221, 221, 0.3)'],
width: 1,
type: 'solid'
},
},
axisLine: {
show: true,
lineStyle: {
color: '#908B8B'
}
},
axisLabel: {
formatter: '{value}%'
},
},
],
series: [
{
name:'数量',
data: seriesData,
type: 'bar',
barWidth : 40,//柱图宽度
itemStyle: {
borderColor:"#00C1DE",
borderWidth:3,
barBorderRadius:15,
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#fff',
fontSize: 16
}
},
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 168, 255,0.2)',
border: '1px solid #7DD8FE',
},{
offset: 0.34,
color: 'rgba(143, 223, 254,0.5)',
border: '1px solid #7DD8FE',
},{
offset: 1,
color: 'rgba(143, 223, 254,1)',
border: '1px solid #7DD8FE',
}])
}
},
},
{
name: '变化率',
type: 'line',
yAxisIndex: 1,
data: changeData,
symbolSize: 7, // 拐点圆的大小
label: {
show: true,
position: 'top',
formatter: (a)=>{
return changeData[a.dataIndex]+'%'
},
},
symbol:'circle',
itemStyle : {
normal:{
color:'rgba(60,179,113,1)', //折点颜色
symbolSize:'rgba(60,179,113,1)',
lineStyle:{
width: 2,
color:'rgba(60,179,113,1)' //折线颜色
},
}
},
markLine : {
silent: true,
symbol:"none",//去掉箭头
lineStyle: {
color: '#333'
},
label:{
position:"end", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
},
data : [
{
silent:false, //鼠标悬停事件 true没有,false有
lineStyle:{
//警戒线的样式 ,虚实 颜色
// type:"solid",
width:2,
color:"#F9F900"
},
yAxis: "20" //警戒线在y轴的坐标
},
{
silent:false, //鼠标悬停事件 true没有,false有
lineStyle:{
//警戒线的样式 ,虚实 颜色
type:"solid",
width:1,
color:"#00fbfc"
},
yAxis: "0" //警戒线在y轴的坐标
},
{
silent:false, //鼠标悬停事件 true没有,false有
lineStyle:{
//警戒线的样式 ,虚实 颜色
// type:"solid",
width:2,
color:"#F9F900"
},
yAxis: "-20" //警戒线在y轴的坐标
}
]
},
},
]
};
option && myChart.setOption(option);
},