echarts 折线图设置y轴最小刻度_记一种echarts绘制不均匀刻度的方法

最新推荐文章于 2024-07-29 15:05:35 发布

weixin_39560657

最新推荐文章于 2024-07-29 15:05:35 发布

阅读量1.6k

点赞数

文章标签： echarts 折线图设置y轴最小刻度

本文介绍了如何使用Echarts为折线图的Y轴设置不均匀的刻度，通过设置interval属性和自定义刻度标签实现。具体步骤包括确定最大值，设置刻度值为[0,10,0.1max,0.2max,0.5max,max]，并进行数据映射，同时保留原始数据以确保精度。" 115834115,5579433,阿里云块存储详解：概念、安全与应用场景,"['数据库', 'hadoop', 'big data']

摘要由CSDN通过智能技术生成

首先介绍下背景：最近，接到一个任务，将数据可视化展示出来。项目是基于Vue的，开搞呗，安装echarts库。。。按照官方的说明文档，开始实现，效果如下：

看着好像也没啥问题。

想多了，从上图中，还不能看出数据大小的明显差异，但到了测试环境，由于数据的差异过大，有的是个数级别的，有的是百万级别的，结果就导致了那些个数据较小的柱子基本看不出来，高度太低(因为echarts是根据数据的大小分配高度的)。没办法，查了一圈官方文档也没啥眉目，就百度了下，看到了 “数据映射”关键词，开始动手实现第一步：先将y轴等分成几份(这里是5等分)，然后设置最小值(这里设置成0)，由于数据是接口返回的，这里最大值不设置，由库自己定，然后自定义y轴的刻度标签显示：

yAxis: {
      type: 'value',  min: 0,  splitLine: {
        show: false  },  interval: this.interval,  axisLabel: {
        formatter: (v, ix) => {
          if (this.max <= this