VUE ECharts 自定义Y轴刻度数据间隔简单实现(二)

依靠对yAxis设置 max/最大值、min/设置最小值、interval/刻度间距来实现

实现效果:

VUE ECharts 自定义Y轴刻度数据间隔简单实现(二)_第1张图片

 实现代码为:

//数据
const emailData = [44,43,49,50,50,51,50,60,45,50,48,53];
const xzhou = ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  legend: {
    data: ['Email']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
      type: 'category',
      // boundaryGap: false, // 控制两边儿是否留白
      data: xzhou,
      splitLine:{ //坐标轴刻度相关设置。
        show :true,
      },
  }],
  yAxis: [{
      type: 'value',
      axisLine:{//坐标轴轴线相关设置
        show :true,
        lineStyle:{
          color:'#000000'
        }
      },
      axisTick:{ //坐标轴刻度相关设置。
        show :true,
      },
      splitLine:{   //设置分割线的样式(图表横线颜色)
        lineStyle: {
          color: ['#000000','#fa6263','#4371fa','#43fa71','#000000','#43fa71','#4371fa','#fa6263'],
          width: 1, // 分隔线线宽
         	// type: 'dashed', // 线的类型
         	opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
        }
      },
      max: 62.6,//设置最大值
      min: 41.8,//设置最小值
      interval:2.6,//设置刻度间距
  }],
  series: [
    {
      name: 'Email',
      type: 'line',
      data: emailData,
      label: {
        normal: {
          show: true,
          formatter: (params) => {
            //界面显示原数值
            return `${xzhou[params.dataIndex]}数据:${emailData[params.dataIndex]}`;
          },
          color: '#000000',
          position: 'top'
        }
      }
    }
  ]
};

你可能感兴趣的:(echarts,echarts,javascript)