echarts数值过多时X轴滚动显示，拖动一个表控制两个表同时滚动
// 两个图表都添加下面这个代码
axisPointer: {
// 设置为 dataZoom，并指定 dataZoom 的 id
type: 'dataZoom',
dataZoomId: this.chartId
},
完整代码
// 初始化生物多样性
initBiologyChart() {
this.biologyChart = this.$echarts.init(document.getElementById(this.chartId))
var option = {
xAxis: {
type: 'category',
data: this.option.xAxis.data,
axisPointer: {
// 设置为 dataZoom，并指定 dataZoom 的 id
type: 'dataZoom',
dataZoomId: this.chartId
},
axisLine: { //x轴显示
"show": true,
},
axisTick: {
"show": false //去掉x轴刻度线
},
//坐标轴颜色
axisLine: {
lineStyle: {
// background: rgba(186,231,255,0.4);
color: 'rgba(186,231,255,0.4)',
width: 2
}
},
// x轴文字旋转
axisLabel: {
rotate: 0,
interval: 0,
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
color: "rgba(230,247,255,0.5)" //坐标轴的文本颜色
},
},
yAxis: {
name: this.option.yAxis.name,
type: 'value',
minInterval: 1,
min: 0, // 配置 Y 轴刻度最小值
// max: 40, // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: 'rgba(230,247,255,0.5)', // 字体颜色
fontSize: 12, // 字体大小
fontWeight: '400',
//关键代码
padding: [0, 0, -20, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: true, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(230,247,255,0.2)'],
width: 1,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
showMaxLabel: false, // 坐标轴不显示最大值
color: "rgba(230,247,255,0.5)", //刻度线标签颜色
fontSize: 12,
// formatter: function (value) {
// if (value / 10 % 2 === 1) {
// return value;
// } else {
// return ''
// }
// }
},
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '20px',
right: '20px',
bottom: '10px',
top: '25px',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
//滚动条样式
dataZoom: [
{
id: this.chartId,
type: 'slider',
show: this.isShowScroll,
// start: 0,//默认为0
// end: 50,//默认为100
startValue: 0, // 从头开始。
endValue: 4, // 一次性展示6个。
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 4,//组件高度
bottom: 0,//右边的距离
borderColor: "#e3e3e3",
fillerColor: '#51B7F9',
borderRadius: 10,
backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
// zlevel: 10,
},
//以下重点： 让鼠标滚动从缩放变成移动
// {
// type: 'inside',
// xAxisIndex: [0],
// zoomOnMouseWheel: false, //滚轮不触发缩放
// moveOnMouseMove: true, //鼠标移动触发平移
// moveOnMouseWheel: true, //鼠标滚轮触发平移
// },
],
series: [
{
data: this.option.series[0].data,
type: 'bar',
barWidth: 12, //设置柱子宽度
color: 'blue',
showBackground: false,
backgroundStyle: {
color: 'rgba(190,216,240,0.06)'
},
label: { //在柱状图上显示数据
show: true,
position: 'top',
color: '#fff',
fontWeight: 500,
fontSize: 14,
},
markPoint: {
symbol: 'rect',
symbolSize: '15',
},
itemStyle: { // 柱状图渐变
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 0, //左
y2: 1, //上
colorStops: [
{
offset: 0,
color: '#1A96F9' // 0% 处的颜色
},
{
offset: 1,
color: '#4CECFF' // 100% 处的颜色
}
]
},
},
},
]
};
this.biologyChart.setOption(option);
},
// 初始化生物多样性背景图
initBiologyBck() {
this.bckchart = this.$echarts.init(document.getElementById(this.chartBgId))
var option = {
xAxis: {
type: 'category',
data: this.option.xAxis.data,
axisPointer: {
// 设置为 dataZoom，并指定 dataZoom 的 id
type: 'dataZoom',
dataZoomId: this.chartId
},
axisLine: { //x轴显示
"show": false,
},
axisTick: {
"show": false //去掉x轴刻度线
},
// x轴文字旋转
axisLabel: {
rotate: 0,
interval: 0,
interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
color: "rgba(0,0,0,0)" //坐标轴的文本颜色
},
//坐标轴颜色
axisLine: {
show: false,
lineStyle: {
color: '#00bbff',
width: 2
}
},
},
yAxis: {
name: '',
type: 'value',
minInterval: 1,
min: 0, // 配置 Y 轴刻度最小值
max: Math.ceil(Math.max(...this.option.series[0].data)), // 配置 Y 轴刻度最大值
// splitNumber:10, // 配置 Y 轴数值间隔
nameTextStyle: {
color: 'rgba(230,247,255,0.5)',
fontSize: 16, // 字体大小
fontWeight: 'bolder',
//关键代码
padding: [0, 0, 0, -30] //标题位置调整 上 右 下 左
},
splitLine: { //分割线
show: false, //控制分割线是否显示
lineStyle: { //分割线的样式
color: ['rgba(255,255,255,0.3)'],
width: 2,
type: 'dashed'
}
},
axisLine: { //y轴不显示
"show": false
},
axisTick: { //y轴刻度线不显示
"show": false
},
axisLabel: {
color: "rgba(255,0,0,0)", //刻度线标签颜色
fontSize: 12,
},
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '20px',
right: '20px',
bottom: '10px',
top: '25px',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
//滚动条样式
dataZoom: [
{
id: this.chartId,
type: 'slider',
show: this.isShowScroll,
// start: 0,//默认为0
// end: 50,//默认为100
startValue: 0, // 从头开始。
endValue: 4, // 一次性展示6个。
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 4,//组件高度
bottom: 0,//右边的距离
borderColor: "#e3e3e3",
fillerColor: '#51B7F9',
borderRadius: 10,
backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter',
// zlevel: 10,
},
//以下重点： 让鼠标滚动从缩放变成移动
// {
// type: 'inside',
// xAxisIndex: [0],
// zoomOnMouseWheel: false, //滚轮不触发缩放
// moveOnMouseMove: true, //鼠标移动触发平移
// moveOnMouseWheel: true, //鼠标滚轮触发平移
// },
],
series: [
{
data: [0, 0, 0, 0, 0],
type: 'bar',
barWidth: 40, //设置柱子宽度
showBackground: true,
backgroundStyle: {
color: 'rgba(190,216,240,0.06)'
}
},
]
};
this.bckchart.setOption(option);
},
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
