携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
最近在做大屏，总结一下项目中遇到的一些技术。在大屏中实现滚动的双坐标滚动的图表，我们一起看看吧~
双坐标轴
左边Y轴柱状图
yAxis 第一个数组
{
type: 'value',
name: '公里',
},
对应的serices的数据的yAxisIndex为0，可不设置
右边Y轴折线图
yAxis 第二个数组
{
type: 'value',
name: '人数',
},
对应的serices的数据的yAxisIndex为1，需要设置
X轴数据两行展示
根据UI图要求，展示2行，这个根据实际要求来，也可以用rotate，旋转角度来实现
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 4; // 一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
// 两行展示
for (var p = 0; p < 2; p++) {
var tempStr = "";
var start = p * provideNumber;// 0|1*4=0-4
var end = start + provideNumber;// 4-8
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
// 换行时....
if(newParamsName.length > 9){
newParamsName = newParamsName.substring(0, newParamsName.length-1)+'...'+' '
}
} else {
newParamsName = params;
}
return newParamsName
},
数据比较多，添加datazoom
startValue:表示当前展示的开始的值的索引,endValue: 表示当前展示的结束的值的索引
dataZoom: [
{
type: "slider",
show: true,
startValue: 0,
endValue: 4,
xAxisIndex: [0],
height: 20,
bottom: 10
}
],
滚动展示
用定时器来实现滚动，设置datazoom的startValue和endValue，到最后一个的时候开始值赋值为第一个。
setInterval(()=>{
if (this.lineOption.dataZoom[0].endValue === xAxis.length - 1) {
this.lineOption.dataZoom[0].endValue = 4;
this.lineOption.dataZoom[0].startValue = 0;
} else {
this.lineOption.dataZoom[0].endValue = this.lineOption.dataZoom[0].endValue + 1;
this.lineOption.dataZoom[0].startValue = this.lineOption.dataZoom[0].startValue + 1;
}
}, 2000)
清除定时器
这个很重要，一开始没有清除，导致在不停的切换tab的时候，图表越来越快。
clearInterval(this.lineInterval);
完整代码
this.lineOption = {
color: ['#EB6161','#009CFF','#00FFC6'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
textStyle: {
color: '#709FD9',
},
top: 6,
left: '10%',
icon: 'circle',
data: ['全部', '男生','女生']
},
xAxis: [
{
name: '学校',
type: 'category',
data: xAxis,
axisPointer: {
type: 'shadow'
},
nameTextStyle: {
color: '#709FD9'
},
axisLabel: {
interval: 0,
show: true,
inside: false,
rotate: 0,
showMinLabel: null,
showMaxLabel: null,
margin: 8,
fontSize: 12,
color: '#709FD9',
ellipsis: '...',
splitNumber: 6,
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 4; // 一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
// 两行展示
for (var p = 0; p < 2; p++) {
var tempStr = "";
var start = p * provideNumber;// 0|1*4=0-4
var end = start + provideNumber;// 4-8
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
// 换行时....
if(newParamsName.length > 9){
newParamsName = newParamsName.substring(0, newParamsName.length-1)+'...'+' '
}
} else {
newParamsName = params;
}
return newParamsName
},
},
axisLine:{
lineStyle:{ // 主轴
color: '#01528B',
}
},
}
],
yAxis: [
{
type: 'value',
name: '公里',
min: 0,
nameTextStyle: {
color: '#709FD9'
},
axisLabel: {
show: true,
inside: false,
rotate: 0,
showMinLabel: null,
showMaxLabel: null,
margin: 8,
fontSize: 12,
color: '#709FD9'
},
splitLine: {
lineStyle: {
color: ['#01528B']
}
}
},
{
type: 'value',
name: '人数',
min: 0,
nameTextStyle: {
color: '#709FD9'
},
axisLabel: {
show: true,
inside: false,
rotate: 0,
showMinLabel: null,
showMaxLabel: null,
margin: 8,
fontSize: 12,
color: '#709FD9'
},
splitLine: {
lineStyle: {
color: ['#01528B']
}
}
}
],
series: [
{
name: '全部',
type: 'bar',
barWidth: 12,
data: dis
},
{
name: '男生',
type: 'bar',
barWidth: 12,
data: boyDis
},
{
name: '女生',
type: 'bar',
barWidth: 12,
data: girlDis
},
{
name: '全部',
type: 'line',
yAxisIndex: 1,
data: totalSize
},
{
name: '男生',
type: 'line',
yAxisIndex: 1,
data: boySize
},
{
name: '女生',
type: 'line',
yAxisIndex: 1,
data: girlSize
},
],
dataZoom: [
{
type: "slider",
show: true,
startValue: 0,
endValue: 4,
xAxisIndex: [0],
height: 20,
bottom: 10
}
],
};
if(xAxis.length > 5){
this.lineInterval = setInterval(()=>{
if (this.lineOption.dataZoom[0].endValue === xAxis.length - 1) {
this.lineOption.dataZoom[0].endValue = 4;
this.lineOption.dataZoom[0].startValue = 0;
} else {
this.lineOption.dataZoom[0].endValue = this.lineOption.dataZoom[0].endValue + 1;
this.lineOption.dataZoom[0].startValue = this.lineOption.dataZoom[0].startValue + 1;
}
}, 2000)
}
