echarts---x轴数据过多,设置x轴左右滑动显示
显示滑动条的左右滑动显示
在option中添加dataZoom配置
dataZoom: [{
type: 'slider', // 设置为滑动条型式
show: true, // 显示dataZoom组件
start: 0, // 默认显示的起始位置为0
end: 30, // 默认显示的结束位置为100
handleSize: 8, // 滑动条的手柄大小
handleStyle: {
color: '#DCE2E8' // 滑动条的手柄颜色
},
xAxisIndex: [0], // 表示控制第一个x轴
filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
}],
x轴中设置axisLabel
axisLabel: {
rotate: 45, // X 轴标签文字旋转角度
//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
interval: 0,
textStyle: {
color: "#556677",
},
fontSize: 12,
formatter: function (value, index) {
if (index >= 12) {
return ''; // 超过12条数据的标签不显示
} else {
return value;
}
}
},
效果
完整代码:
option = {
//color: '#4dd0c8', //折线颜色
title: {
text: '标题'
},
// 配置提示信息：
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true,
},
//图表显示区域
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
// 显示边框
show: false,
containLabel: true
},
dataZoom: [{
type: 'slider', // 设置为滑动条型式
show: true, // 显示dataZoom组件
start: 0, // 默认显示的起始位置为0
end: 30, // 默认显示的结束位置为100
handleSize: 8, // 滑动条的手柄大小
handleStyle: {
color: '#DCE2E8' // 滑动条的手柄颜色
},
xAxisIndex: [0], // 表示控制第一个x轴
filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
}],
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true, //去除轴线
lineStyle: {
color: "#DCE2E8",//设置x轴轴线颜色
}
},
axisLabel: {
rotate: 45, // X 轴标签文字旋转角度
//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
interval: 0,
textStyle: {
color: "#556677",
},
fontSize: 12,
formatter: function (value, index) {
if (index >= 12) {
return ''; // 超过12条数据的标签不显示
} else {
return value;
}
}
},
boundaryGap: false, //去除轴间距
data: ['06-04', '06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12', '06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'],
},
yAxis: {
type: 'value',
axisTick: {
show: false, //去除y轴刻度线
},
axisLabel: {
textStyle: {
color: "#556677",
},
},
axisLine: {
show: true, //显示y轴轴线
lineStyle: {
color: "#DCE2E8",
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false,
}
},
series: [{
data:[1289886.67, 626059.41, 642731.08, 654504.52, 681944.61, 880283.5, 1477209.16, 1363323.44, 625328.36, 663323.71, 699980.69, 742812.11, 967688.17, 1446161.37, 1543749.14, 646472.84, 748964.15, 936463.81, 1612093.01, 1371712.41, 1233419.16, 702205.29, 712268.52, 783523.87, 854010, 813679.34, 1000449.75, 1448029.06, 1353368.1, 782741.25],
type: 'line',
smooth: true,
symbol: 'circle',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#cab8fe' //折线点上对应字体颜色
}
},
// lineStyle: {
// color: 'rgba(0,0,0,0)'// 折线颜色设置为0，即只显示点，不显示折线
// },
color: "#4dd0c8", //折线点颜色 #fc5531
}
},
}]
};
不显示滑动条的左右滑动显示
option = {
title: {
text: '30日内金额营收(万)',
textStyle: {
top: 10,
color: "#616161", //颜色
fontStyle: "normal", //风格
fontWeight: "normal", //粗细
fontFamily: "Microsoft yahei", //字体
fontSize: 14, //大小
align: "center", //水平对齐
},
left: "1%",
top: "3%",
},
// 配置提示信息：
tooltip: {
show: true,
trigger: 'axis',
axisPointer: { // 坐标轴指示器配置项。
type: 'cross', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
padding: 10,
backgroundColor: '#fff',
textStyle: {
color: '#556677',
},
showContent: true,
},
// 图例配置选项 即左上角标签
// legend: {
// data: legend
// },
//图表显示区域
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
// 显示边框
show: false,
containLabel: true
},
dataZoom: [
{
show: false,
startValue: '06-28', //起始数据
},
{
zoomOnMouseWheel: false,
type: "inside",
},
],
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
// show: true, //显示轴线
lineStyle: {
color: "#DCE2E8",//设置x轴轴线颜色
}
},
axisLabel: {
// rotate: 0, // X 轴标签文字旋转角度
//坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。
interval: 0,
textStyle: {
color: "#556677",
},
fontSize: 12,
margin: 15,
},
axisPointer: {
label: {
padding: [0, 0, 10, 0],
margin: 15,
fontSize: 12,
backgroundColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#fff",
},
{
offset: 0.86,
color: "#fff",
},
{
offset: 0.86,
color: "#33c0cd",
},
{
offset: 1,
color: "#33c0cd",
},
],
global: false,
},
},
},
boundaryGap: false, //去除轴间距
data:['06-04', '06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11', '06-12', '06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03'],
},
yAxis: {
type: 'value',
axisTick: {
show: false, //去除y轴刻度线
},
axisLabel: {
padding:[0,15,0,0], //设置y轴文字距离轴线距离
textStyle: {
color: "#556677",
},
},
axisLine: {
show: true, //显示y轴轴线
lineStyle: {
color: "#DCE2E8",
},
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false,
}
},
series: [{
name: '营业收入',
data: [1289886.67, 626059.41, 642731.08, 654504.52, 681944.61, 880283.5, 1477209.16, 1363323.44, 625328.36, 663323.71, 699980.69, 742812.11, 967688.17, 1446161.37, 1543749.14, 646472.84, 748964.15, 936463.81, 1612093.01, 1371712.41, 1233419.16, 702205.29, 712268.52, 783523.87, 854010, 813679.34, 1000449.75, 1448029.06, 1353368.1, 782741.25],
type: 'line',
smooth: true,
symbol: 'circle',
yAxisIndex: 0,
symbolSize: 1,
showSymbol: true,
lineStyle: {
width: 4,
// 设置折线颜色渐变
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff', // 开始位置颜色
},
{
offset: 1,
color: '#9E87FF',// 结束位置颜色
},
]),
roam: false,
},
itemStyle: {
normal: {
label: {
show: true,
position: "top",
// textStyle: {
// color: '#cab8fe' //折线点上对应字体颜色
// }
},
// lineStyle: {
// color: 'rgba(0,0,0,0)'// 折线颜色设置为0，即只显示点，不显示折线
// },
color: "#9E87FF",//折线点颜色 #fc5531
borderColor: "#9E87FF",
}
},
}]
}
