v-charts 动态设置 y轴 max All In One

v-charts 动态设置 y轴 max All In One

动态设置 y 轴 max, 超出 100% 切掉不展示；

    this.chartExtend = Object.assign({},
        {},
        {
            series: (v) => {
                Array.from(v).forEach((e, index) => {
                    e.symbol = 'circle';
                    e.symbolSize = 2;
                    // if (index === 1) {
                    //     e.areaStyle = 'value';
                    // }
                });
                return v;
            },
            yAxis: {
                max: function (value) {
                    console.log('max value', value);
                    // return value.max;
                    return value.max > 1 ? 1 : value.max;
                },
            },
        }
    );

    this.chartExtend = Object.assign({},
        {},
        {
            series: (v) => {
                Array.from(v).forEach((e, idx) => {
                    e.symbol = 'circle';
                    e.symbolSize = 2;

                    // if (idx === 1) {
                    //     e.areaStyle = 'value';
                    // }
                });
                return v;
            },
            yAxis: {
                max (value) {
                    return value.max > 1 ? 1 : value.max;
                },
                // max: (value) => {
                //     return value.max > 1 ? 1 : value.max;
                // },
                // max: function (value) {
                //     return value.max > 1 ? 1 : value.max;
                // },
            },
        }
    );

API

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

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

<template>
  <ve-line
    :data="chartData"
    :mark-line="markLine"
    :mark-point="markPoint">
  </ve-line>
</template>

<script>
  // 使用前需先引入对应模块
  // import 'echarts/lib/component/markLine'
  // import 'echarts/lib/component/markPoint'
  export default {
    data () {
      this.markLine = {
        data: [
          {
            name: '平均线',
            type: 'average'
          }
        ]
      }
      this.markPoint = {
        data: [
          {
            name: '最大值',
            type: 'max'
          }
        ]
      }
      return {
        chartData: {
          columns: ['日期', '成本', '利润'],
          rows: [
            { '日期': '1月1日', '成本': 1523, '利润': 1231 },
            { '日期': '1月2日', '成本': 1223, '利润': 2523 },
            { '日期': '1月3日', '成本': 2123, '利润': 1000 },
            { '日期': '1月4日', '成本': 4123, '利润': 3223 },
            { '日期': '1月5日', '成本': 3123, '利润': 3023 },
            { '日期': '1月6日', '成本': 7123, '利润': 5523 }
          ]
        }
      }
    }
  }
</script>

refs

https://www.codeleading.com/article/97153337725/

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

---

---

©xgqfrms 2012-2020

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

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

---