【ECharts】Y轴

本文介绍: ☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~

y轴显示

y轴显示

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    // 整条y轴
    axisLine:{
        show:true
    },
    // y轴上的小横线
    axisTick:{
        show:true
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

y轴名称 样式

y轴添加名称、设置颜色和粗细。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name:'评分',
    type: 'value',
    axisLine:{
        show: true, // 是否显示
        lineStyle: { 
          color: '#A23400',
          width: '1'
        } 
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

y轴切分成3份

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
        {
            type: 'value',
            splitNumber: 3, 
        }, 
    ],
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260],
            
        },
    ]
};

y轴文本 自定义

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel : {
        textStyle:{
          color: 'purple'
        },
        // formatter: '{value} 个',
        formatter: function (value) {
            var texts = [];
            if(value==0){
                texts.push('没有点击');
            }
            else if (value <=50) {
                texts.push('好');
            }
            else if (value<= 150) {
                texts.push('很好');
            }
            else if(value<= 200){
                texts.push('非常好');
            }
            else{
                texts.push('完美');
            }
            return texts;
        }
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

y轴文本左对齐

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
    axisLabel: { // y轴文字的配置
        show: true,
        interval: 0,
        margin:80,
        textStyle: {
            align:'left',
            baseline:'middle'
        },
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

双y轴刻度不一致

echart3.0中，右侧y轴需要自己去定义 max、min、interval。系统不再自动计算适配。

数据已知的情况：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
        {
            name: "次数",
            type: 'value',
        }, 
        {
            name: "增长",
            type: 'value',
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %',
            },
            max: 30,
            min:0,
        }
    ],
    series: [
        {
            type: 'line',
            yAxisIndex: 0,
            data: [150, 230, 224, 218, 135, 147, 260],
            
        },
        {
            type: 'bar',
            yAxisIndex:  1,
            data: [10, 23, 22, 21, 13, 14, 20],
           
        }
    ]
};

数据未知的情况

刻度没有取整的情况

y轴坐标线

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
        splitLine: { 
            show: true,
            lineStyle:{
                color:['red','blue'],
            }
        }
    }, 
    series: [
        {
            type: 'line',
            yAxisIndex: 0,
            data: [150, 230, 224, 218, 135, 147, 260],
            
        },
    ]
};

y轴不从0开始

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    scale: true
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};