echarts yAxis max bug All In One

echarts yAxis max bug All In One

echarts version 不一致 bug

https://echarts.apache.org/zh/option.html#yAxis.max

https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js ✅

https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js ❌

demo

<div id="app">
  <h1 class="H1">当仅有一条数据且值远大于 100%，截取后导致 yAxis 画不出来 bug</h1>
  <ve-line
      :data="chartData"
      :settings="chartSettings"
      :extend="chartExtend"
  />
</div>


<!--

https://echarts.apache.org/zh/option.html#yAxis.max

https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js ✅

https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js ❌

-->

new Vue({
  el: '#app',
  data: function () {
    return {
      chartSettings: {
        yAxisType: ['percent'],
        // max: [1],
      },
      chartExtend: {
          // tooltip: {
          //     formatter: (params) => {
          //         console.log('params', params);
          //         return '✅ 自定义 <mark>tooltip</mark>';
          //     },
          // },
          yAxis: {
              max (value) {
                  return value.max > 1 ? 1 : null;
              },
          },
      },
      chartData: {
        columns: ['日期', '访问用户率'],
        // columns: ['日期', '访问用户率', '下单用户率',],
        rows: [
          // { '日期': '1/1', '访问用户率': 0.8, '下单用户率': 0.1, },
          // { '日期': '1/2', '访问用户率': 0.4, '下单用户率': 0.3, },
          { '日期': '1/3', '访问用户率': 88.2, '下单用户率': 0.7, },
        ]
      },
      chartExtend2: {
          // tooltip: {
          //     formatter: (params) => {
          //         console.log('params', params);
          //         return '✅ 自定义 <mark>tooltip</mark>';
          //     },
          // },
          yAxis: {
              max (value) {
                  // return value.max > 1 ? 1 : null;
                  return null;
              },
          },
      },
      chartData2: {
        columns: ['日期', '访问用户率',],
        // columns: ['日期', '访问用户率', '下单用户率',],
        rows: [
          { '日期': '1/1', '访问用户率': 0.8, '下单用户率': 0.1, },
          { '日期': '1/2', '访问用户率': 0.4, '下单用户率': 0.3, },
          { '日期': '1/3', '访问用户率': 88.2, '下单用户率': 0.7, },
        ]
      },
    }
  },
});
// }); ✅ 英文分号
// })； ❌ 坑爹的中文分号；


/*

https://v-charts.xgqfrms.xyz/#/line?id=settings-%e9%85%8d%e7%bd%ae%e9%a1%b9

进行纵坐标最高值限制，提升数据查看体验；？？？


*/

/*


// 堆叠柱状图 tooltip 排序
const stackTooltipFormatter = (arr = [], columns = [], percent = false) => {
    // TODO: percent 百分比
    let result = '';
    for (const [index, key] of columns.entries()) {
        const obj = arr.find(obj => obj.seriesName === key);
        const { seriesName, name, marker, value } = obj;
        if(index === 0) {
            result += `
                日期：${name}<br/>
                ${seriesName}：<span title="${seriesName}">${marker}${value}</span><br/>
            `;
        } else {
            result += `${seriesName}：<span title="${seriesName}">${marker}${value}</span><br/>`;
        }
    }
    return result;
};

*/

null

当仅有一条数据且值为 null，截取后导致 yAxis 画不出来 bug

          { '日期': '1/3', '访问用户率': null, '下单用户率': 0.7, },

https://codepen.io/xgqfrms/pen/wvPPqvY

echarts API

https://echarts.apache.org/zh/option.html#yAxis.max

v-charts API

https://v-charts.xgqfrms.xyz/#/

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---