问题描述:
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: []
          }
        ]
      }
    };
  },
Logo

前往低代码交流专区

更多推荐