echarts Y轴自定义区间设置不等分的一些思路和例子

JIUU O_o

已于 2025-01-09 11:03:59 修改

阅读量640

点赞数 11

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2025-01-09 10:13:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53675597/article/details/145025119

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

最近遇到了一个echarts 显示的问题，数据Y轴最高是10最低是0，但是0-1之间希望占Y轴比例的一半。下面分享一些实现的思路（底部有最终代码）

下面是等分的图表希望把 0-1 显示拉高

最终效果图

首先把Y轴刻度分为 24 因为我的图表

0-0.1 需要显示占位Y轴的 3/24

0.1-0.2 为 2/24

0.2-0.3 1/24

0.3-0.4 1/24

0.5-0.6 1/24

0.6-0.7 1/24

0.7-0.8 1/24

0.8-1 1/24

1-2 需要显示占位Y轴的 3/24

2-3 为 2/24

3-4 1/24

4-5 1/24

5-6 1/24

6-7 1/24

7-8 1/24

8-9 1/24

9-10 1/24

Y 轴取消刻度线显示

使用series中的markLine 根据比例显示刻度线

series: [
        {
            data: data,
            type: 'line',
            lineStyle: {
                zlevel: 5,
                width: 1
            },
            smooth: 0.5,
            z: 5,
            symbol: 'none',
            markLine: {
                label: {
                    show: false
                },
                symbol: 'none',
                z: 0,
                lineStyle: {
                    color: '#D9D9D9',
                    type: 'solid',
                    zlevel: 0
                },
                data: [
                    { name: '', xAxis: -5 },
                    { name: '', yAxis: 3 },
                    { name: '', yAxis: 5 },
                    { name: '', yAxis: 6 },
                    { name: '', yAxis: 7 },
                    { name: '', yAxis: 8 },
                    { name: '', yAxis: 9 },
                    { name: '', yAxis: 10 },
                    { name: '', yAxis: 11 },
                    { name: '', yAxis: 12 },
                    { name: '', yAxis: 15 },
                    { name: '', yAxis: 17 },
                    { name: '', yAxis: 18 },
                    { name: '', yAxis: 19 },
                    { name: '', yAxis: 20 },
                    { name: '', yAxis: 21 },
                    { name: '', yAxis: 22 },
                    { name: '', yAxis: 23 },
                    { name: '', yAxis: 24 }
                ]
            }
        }
    ]

Y轴刻度文本显示根据比例修改对应文本

yAxis: {
        type: 'value',
        min: 0,
        max: 24,
        interval: 1,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            color: '#333',
            formatter: (value) => {
                if (value === 3) {
                    return 0.1
                } else if (value === 5) {
                    return 0.2
                } else if (value === 6) {
                    return 0.3
                } else if (value === 7) {
                    return 0.4
                } else if (value === 9) {
                    return 0.6
                } else if (value === 11) {
                    return 0.8
                } else if (value === 15) {
                    return 2
                } else if (value === 17) {
                    return 3
                } else if (value === 18) {
                    return 4
                } else if (value === 20) {
                    return 6
                } else if (value === 22) {
                    return 8
                }
                return '';
            }
        }
    },

关键点是 data 根据比例缩放数据

let data = [[-4.68, 0.05], [-4.23, 0.1], [-3, 0.2], [-2.5, 0.15], [-2, 0.3], [-1, 0.35], [-0, 2.5]]
    data.forEach((item) => {
        if (item[1] <= 0.1) {
            // 根据每个区间的缩放计算值 如 3 的刻度缩放为 0.1 即  3 / 0.1 = 30 所以值需要 * 30
            // 如 0.05 * 30 = 1.5
            item[1] = item[1] * 30
        } else if (item[1] <= 0.2) {
            // 后续则需要减去 上次计算的区间比例 再算当前比例
            // 我的第二个区间比例是 0.1-0.2 2/24
            let num = item[1] - 0.1
            item[1] = 0.1 * 30 + num * 20
        } else if (item[1] <= 0.3) {
            let num = item[1] - 0.2
            item[1] = 0.1 * 30 + 0.1 * 20 + num * 10
        } else if (item[1] <= 0.4) {
            let num = item[1] - 0.3
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + num * 10
        } else if (item[1] <= 0.5) {
            let num = item[1] - 0.4
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + num * 10
        } else if (item[1] <= 0.6) {
            let num = item[1] - 0.5
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + num * 10
        } else if (item[1] <= 0.7) {
            let num = item[1] - 0.6
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + num * 10
        } else if (item[1] <= 0.8) {
            let num = item[1] - 0.6
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + num * 10
        } else if (item[1] <= 1) {
            let num = item[1] - 0.8
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + num * 5
        } else if (item[1] <= 2) {
            let num = item[1] - 1
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + num * 3
        } else if (item[1] <= 3) {
            let num = item[1] - 2
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + num * 2
        } else if (item[1] <= 4) {
            let num = item[1] - 3
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + num
        } else if (item[1] <= 5) {
            let num = item[1] - 4
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + num
        } else if (item[1] <= 6) {
            let num = item[1] - 5
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + 1 + num
        } else if (item[1] <= 7) {
            let num = item[1] - 6
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + 1 + 1 + num
        } else if (item[1] <= 8) {
            let num = item[1] - 7
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + 1 + 1 + 1 + num
        } else if (item[1] <= 9) {
            let num = item[1] - 8
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + 1 + 1 + 1 + 1 + num
        } else if (item[1] <= 10) {
            let num = item[1] - 9
            item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + 0.2 * 5 + 1 * 3 + 1 * 2 + 1 + 1 + 1 + 1 + 1 + 1 + num
        }
    })

附源代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let data = [
  [-4.68, 0.05],
  [-4.23, 0.1],
  [-3, 0.2],
  [-2.5, 0.15],
  [-2, 0.3],
  [-1, 0.35],
  [-0, 2.5]
];
data.forEach((item) => {
  if (item[1] <= 0.1) {
    // 根据每个区间的缩放计算值 如 3 的刻度缩放为 0.1 即  3 / 0.1 = 30 所以值需要 * 30
    item[1] = item[1] * 30;
  } else if (item[1] <= 0.2) {
    let num = item[1] - 0.1;
    item[1] = 0.1 * 30 + num * 20;
  } else if (item[1] <= 0.3) {
    let num = item[1] - 0.2;
    item[1] = 0.1 * 30 + 0.1 * 20 + num * 10;
  } else if (item[1] <= 0.4) {
    let num = item[1] - 0.3;
    item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + num * 10;
  } else if (item[1] <= 0.5) {
    let num = item[1] - 0.4;
    item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + num * 10;
  } else if (item[1] <= 0.6) {
    let num = item[1] - 0.5;
    item[1] = 0.1 * 30 + 0.1 * 20 + 0.1 * 10 + 0.1 * 10 + 0.1 * 10 + num * 10;
  } else if (item[1] <= 0.7) {
    let num = item[1] - 0.6;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      num * 10;
  } else if (item[1] <= 0.8) {
    let num = item[1] - 0.6;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      num * 10;
  } else if (item[1] <= 1) {
    let num = item[1] - 0.8;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      num * 5;
  } else if (item[1] <= 2) {
    let num = item[1] - 1;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      num * 3;
  } else if (item[1] <= 3) {
    let num = item[1] - 2;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      num * 2;
  } else if (item[1] <= 4) {
    let num = item[1] - 3;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      num;
  } else if (item[1] <= 5) {
    let num = item[1] - 4;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      num;
  } else if (item[1] <= 6) {
    let num = item[1] - 5;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      1 +
      num;
  } else if (item[1] <= 7) {
    let num = item[1] - 6;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      1 +
      1 +
      num;
  } else if (item[1] <= 8) {
    let num = item[1] - 7;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      1 +
      1 +
      1 +
      num;
  } else if (item[1] <= 9) {
    let num = item[1] - 8;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      1 +
      1 +
      1 +
      1 +
      num;
  } else if (item[1] <= 10) {
    let num = item[1] - 9;
    item[1] =
      0.1 * 30 +
      0.1 * 20 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.1 * 10 +
      0.2 * 5 +
      1 * 3 +
      1 * 2 +
      1 +
      1 +
      1 +
      1 +
      1 +
      1 +
      num;
  }
});

option = {
  graphic: {
    elements: [
      {
        type: 'text',
        left: '9px',
        top: '16px',
        style: {
          text: '10',
          textAlign: 'center',
          fill: '#333', // 文本颜色
          fontSize: 12
        }
      },
      {
        type: 'text',
        right: '0px',
        bottom: '10px',
        style: {
          text: 'x',
          textAlign: 'center',
          fill: '#333', // 文本颜色
          fontSize: 12
        }
      }
    ]
  },
  grid: {
    left: '30px',
    top: '30px',
    right: '30px',
    bottom: '30px'
  },
  title: {
    text: 'title',
    left: 'center',
    top: '10px',
    textStyle: {
      fontSize: 12,
      fontWeight: 400
    }
  },
  xAxis: {
    type: 'value',
    min: -5,
    max: 11,
    interval: 1,
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#333',
      formatter: (value) => {
        return value % 2 ? value : '';
      }
    },
    axisLine: {
      lineStyle: {
        color: '#D9D9D9'
      }
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 24,
    interval: 1,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#333',
      formatter: (value) => {
        if (value === 3) {
          return 0.1;
        } else if (value === 5) {
          return 0.2;
        } else if (value === 6) {
          return 0.3;
        } else if (value === 7) {
          return 0.4;
        } else if (value === 9) {
          return 0.6;
        } else if (value === 11) {
          return 0.8;
        } else if (value === 15) {
          return 2;
        } else if (value === 17) {
          return 3;
        } else if (value === 18) {
          return 4;
        } else if (value === 20) {
          return 6;
        } else if (value === 22) {
          return 8;
        }
        return '';
      }
    }
  },
  series: [
    {
      data: data,
      type: 'line',
      lineStyle: {
        zlevel: 5,
        width: 1
      },
      smooth: 0.5,
      z: 5,
      symbol: 'none',
      markLine: {
        label: {
          show: false
        },
        symbol: 'none',
        z: 0,
        lineStyle: {
          color: '#D9D9D9',
          type: 'solid',
          zlevel: 0
        },
        data: [
          { name: '', xAxis: -5 },
          { name: '', yAxis: 3 },
          { name: '', yAxis: 5 },
          { name: '', yAxis: 6 },
          { name: '', yAxis: 7 },
          { name: '', yAxis: 8 },
          { name: '', yAxis: 9 },
          { name: '', yAxis: 10 },
          { name: '', yAxis: 11 },
          { name: '', yAxis: 12 },
          { name: '', yAxis: 15 },
          { name: '', yAxis: 17 },
          { name: '', yAxis: 18 },
          { name: '', yAxis: 19 },
          { name: '', yAxis: 20 },
          { name: '', yAxis: 21 },
          { name: '', yAxis: 22 },
          { name: '', yAxis: 23 },
          { name: '', yAxis: 24 }
        ]
      }
    }
  ]
};

option && myChart.setOption(option);

新人第一写文章文字表达可能不太清晰，希望能帮助到需要的人