echart手动计算y轴标尺最大值及间隔和去除y轴因为数据过大超出图表显示范围
问题描述:1,y轴的数据因为过大,超出了图标显示范围。2,自动计算y轴的最大最小值,并更改坐标中两个标示数字的间距大小问题1图片显示:解决方法:这里我主要写一些echart的参数配置以及计算,vue里面的东西涉及的并不多问题一的解决方法:因为你是用了多个y轴,所以要给每一条数据都标示他是按哪个坐标轴来显示的如下图, yAxisIndex: 1, 指定是这条数据中是以 **yAxis【】**中的下标
·
问题描述:
1,y轴的数据因为过大,超出了图标显示范围。
2,自动计算y轴的最大最小值,并更改坐标中两个标示数字的间距大小
问题1图片显示:
解决方法:
这里我主要写一些echart的参数配置以及计算,vue里面的东西涉及的并不多
问题一的解决方法:因为你是用了多个y轴,所以要给每一条数据都标示他是按哪个坐标轴来显示的如下图, yAxisIndex: 1, 指定是这条数据中是以 **yAxis【】**中的下标为1的对象所代表的的坐标轴为基准的。yAxis【】第一个对象是图标左侧的y轴,第二个对象是右侧的y轴。
问题2的解决方法:
这个我就不需要在介绍了吧!全是js代码。
完整代买如下:如果你你不知道echart怎么引用可以点击以下链接。
添加链接描述
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['活跃用户', '签到用户', '签到率']
},
xAxis: [
{
// 底部x轴数据
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '签到率',
min: 0,
max: 100,
interval: 10,
splitLine:{
show:false // 这个用来开关是否显示坐标轴里面的 横向曲线标尺
},
// boundaryGap:true,
axisLabel: {
formatter: '{value} %'
}
},
{
type: 'value',
name: '活跃/签到用户',
// boundaryGap: ['0%', '100%'],
min: 0,
max: function (value) {
return Math.ceil(Number(value.max) / 10) * 10 ;
},
splitNumber: 10, // 将坐标轴分成几份进行标示数字
// interval: function (value) {
// return Number(value.max) / 10;
// },
// interval: 10,
// boundaryGap:true,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '活跃用户',
type: 'bar',
color: ['#5E9CD3'],
yAxisIndex: 1,
barGap: '0%', /* 多个并排柱子设置柱子之间的间距 */
data: []
},
{
name: '签到用户',
color: ['#EB7D3C'],
type: 'bar',
yAxisIndex: 1,
barGap: '0%', /* 多个并排柱子设置柱子之间的间距 */
data: []
},
{
name: '签到率',
type: 'line',
color: ['#94CE58'],
yAxisIndex: 0, // 这个是他的数据对应的两个y轴标尺的第1个,也就是name是签到率的那个
data: []
}
]
}
};
},
更多推荐
已为社区贡献6条内容
所有评论(0)