echarts 实现两表联动联动
2018-07-27 本文已影响13人
butterflyer
具体效果图
QQ20180727-151544-HD.gif
实际上就是把两个option合并为一个。
option: {
backgroundColor: '#ffffff',
grid: [{ //这是控制上面的bar
left: '6%',
right: '3%',
top: '5%',
bottom: '12%',
height: '35%',
containLabel: false
},
{ //控制下面的line
left: '6%',
right: '3%',
top: '50%',
bottom: '12%',
height: '35%',
containLabel: false
}],
dataZoom: [ { //这个地方是控制下面的滑动条。
show: true,
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1]
},
{
type: 'inside',
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1]
} ],
xAxis: [{ //x轴要写两份
type: 'category',
name: '',
silent: false,
axisLine: {
onZero: true,
lineStyle: {
color: '#eeeeee',
}
},
splitLine: {
show: false,
lineStyle: {
color: "#eeeeee"
}
},
axisLabel: {
color: '#333',
fontSize: this.getXFontSize(),
// fontSize: this.getXFontSize(),
},
splitArea: {
show: false
},
},
{
type: 'category',
gridIndex: 1, //所在的 grid 的索引，默认位于第一个 grid。
boundaryGap: false,
splitLine: {
lineStyle: {
color: "#eeeeee"
}
},
axisLine: {
lineStyle: {
color: '#eeeeee',
}
},
nameTextStyle: {
color: "#333",
},
axisLabel: {
color: '#333',
fontSize: this.getXFontSize(),
},
}
],
yAxis: [{//y轴也是
inverse: 0,
splitArea: {
show: false
},
axisLabel: {
color: '#333',
fontSize: this.getXFontSize(),
formatter: function(value) {
var value = Math.abs(value);
if (value < 1000) {
return value;
} else if (value > 1000 && value <= 1000000) {
return value / 1000 + 'k';
} else if (value > 1000000 && value <= 1000000000) {
return value / 1000000 + 'm';
} else if (value > 1000000000 && value <= 1000000000000) {
return value / 1000000000 + 'b';
} else if (value > 1000000000000 && value <= 1000000000000000) {
return value / 1000000000000 + 't';
} else if (value > 1000000000000000 && value <= 1000000000000000000) {
return value / 1000000000000000 + 'q';
} else if (value > 1000000000000000000 && value <= 1000000000000000000000) {
return value / 1000000000000000000 + 's';
}
return Math.abs(value); //负数取绝对值变正数
},
// fontSize: this.getXFontSize(),
},
axisLine: {
// onZero: true,
lineStyle: {
color: '#eeeeee',
}
},
splitLine: {
lineStyle: {
color: "#eeeeee"
}
},
},
{
type: 'value',
gridIndex: 1,
splitLine: {
lineStyle: {
color: "#eeeeee"
}
},
axisLine: {
lineStyle: {
color: '#eeeeee',
}
},
nameTextStyle: {
color: "#333",
},
axisLabel: {
color: '#333',
fontSize: this.getXFontSize(),
formatter: function(value) {
var value = Math.abs(value);
if (value < 1000) {
return value;
} else if (value > 1000 && value <= 1000000) {
return value / 1000 + 'k';
} else if (value > 1000000 && value <= 1000000000) {
return value / 1000000 + 'm';
} else if (value > 1000000000 && value <= 1000000000000) {
return value / 1000000000 + 'b';
} else if (value > 1000000000000 && value <= 1000000000000000) {
return value / 1000000000000 + 't';
} else if (value > 1000000000000000 && value <= 1000000000000000000) {
return value / 1000000000000000 + 'q';
} else if (value > 1000000000000000000 && value <= 1000000000000000000000) {
return value / 1000000000000000000 + 's';
}
return Math.abs(value); //负数取绝对值变正数
},
},
}
],
tooltip: {
trigger: 'axis'
},
series: [{ //series中前两个数组是bar
name: 'In',
type: 'bar',
stack: 'one',
barMaxWidth: '60px',
itemStyle: {
normal: {
color: '#2BCDF1'
},
emphasis: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
},
},
{
name: 'Out',
type: 'bar',
stack: 'one',
barMaxWidth: '30px',
// label: {
// normal: {
// show: true,
// position: 'left',
// formatter: function(value) {
// return (Math.abs(value.data));
// }
// }
// },
itemStyle: {
normal: {
color: '#FF6C8C'
},
emphasis: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
},
},
{//line 的数据源
name: '',
type: 'line',
stack: '',
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
normal: {
width: 0.5
}
},
itemStyle: {
normal: {
color: '#2F98F8',
}
}
}
]
},
