Echarts Y轴自适应

思路：获取Y轴的最大值和最小值，主要属性

yAxis: {
    max: max,
    min: min,
 },

参考demo：

<template>
      <div id="left_center_top_container"></div>
</template>

<script>
    let echarts = require('echarts');

    export default {
        data() {
            return {
                cx:'',
                cy:''
            }
        },
        mounted: function () {
            this.get_title();
        },
        //方法
        methods: {
            get_json(){
                this.$axios.get("/data.json", {})
                    .then(res => {
                        console.log(res.data);
                        let ytData = res.data;
                        let dom = document.getElementById("left_center_top_container");
                        if (!dom) {
                            return
                        }
                       this.cx = ytData.date_list;
                       this.cy = ytData.fund_data;
                       let myChart = echarts.init(dom);
                       this.render_line(this.cx, this.cy, myChart);
                    })
            },
            //指标图
            render_line(cx, cy, myChart){
                let max = Math.max.apply(null, cy);
                let min = Math.min.apply(null, cy);
                let option = {
                    //backgroundColor: 'rgba(255, 255, 255, 0.5)',
                    tooltip: {
                        trigger: 'axis',//鼠标经过提示
                        textStyle: {
                            align: 'left'
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: cx,
                        splitLine: {      //去掉网格线
                            show: false
                        },
                        "axisTick":{       //y轴刻度线
                            "show":false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#707180'
                            }
                        },
                        show: true  //显、隐x轴
                    },
                    yAxis: {
                        name: "百万元",
                        max: max,
                        min: min,
                        type: 'value',
                        splitLine:{     //去掉网格线
                            show:false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#707180'
                            }
                        },
                        show: true  //显、隐y轴

                    },
                    series: [{
                        data: cy,
                        type: 'line',
                        smooth: true,    //让曲线变平滑
                        symbol: 'none',  //去掉点
                        lineStyle: {    //线条颜色
                            normal: {
                                color: '#bfbfbf',
                                curveness: 0.5,
                                width: 1
                            }
                        },
                    }],
                    grid: {  //设置四周边距
                        x: 60,
                        y: 40,
                        x2: 40,
                        y2: 20
                    },
                };
                myChart.setOption(option, true);
            },

            getCouponSelected(){
                //console.log(this.couponSelected);
                this.get_json();
            }
        }
    }
</script>

json数据：

{
  "code": 1,
  "fund_data":[
    423,
    423,
    299,
    227,
    156,
    188,
    188,
    188,
    27,
    16,
    29,
    -28,
    -74,
    -74,
    -74,
    -54,
    -1,
    -11,
    -14,
     -13,
    -13,
    -13,
    -23,
    -19,
    -28,
    -21,
    -10,
    -10,
    -10,
    -9
  ],
  "date_list": [
    "2018-05-01",
    "2018-05-02",
    "2018-05-03",
    "2018-05-04",
    "2018-05-05",
    "2018-05-06",
    "2018-05-07",
    "2018-05-08",
    "2018-05-09",
    "2018-05-10",
    "2018-05-11",
    "2018-05-12",
    "2018-05-13",
    "2018-05-14",
    "2018-05-15",
    "2018-05-16",
    "2018-05-17",
    "2018-05-18",
    "2018-05-19",
    "2018-05-20",
    "2018-05-21",
    "2018-05-22",
    "2018-05-23",
    "2018-05-24",
    "2018-05-25",
    "2018-05-26",
    "2018-05-27",
    "2018-05-28",
    "2018-05-29",
    "2018-05-30"
  ]
}

展示图如下：

QQ截图20191202150923.png