echarts X轴、Y轴数据无规律随机动态变化展示实现，笛卡尔坐标系中的折线图

需求：x、y轴数据没有固定和规律，如何实现它的渲染？

实现方法如下：

实现代码：（库容 = 水位*面积）

<template>
    <div>
        <div ref="chart" style="width: 698px; height: 300px; padding-top: 10px; margin-top: 16px; border: 1px solid #eee;" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            chart: null,
            wlCpData: [],
            areaCpData: []
        }
    }, 
    mounted() {
        this.makeChart()
    },
    methods: {
        makeChart() {
        	this.wlCpData = [
        		[0.6, 28.17],
        		[3.7, 29.17],
        		[10.16, 30.17],
        		[24.23, 31.17],
        		[46.44, 32.17],
        		[75.28, 33.17],
        		[112, 34.17],
        		[156.71, 35.17],
        		[210.02, 36.17],
        		[277.2, 37.17],
        	]
        	this.areaCpData = [
        	 	[0.6, 0.21],
        		[3.7, 1.27],
        		[10.16, 3.37],
        		[24.23, 7.77],
        		[46.44, 14.44],
        		[75.28, 22.70],
        		[112, 32.78],
        		[156.71, 44.56],
        		[210.02, 58.06],
        		[277.2, 74.58],
			]
            this.chart = this.$echarts.init(this.$refs['chart'])
            const option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        return `水位：${params[0].data[1]}m <br />面积：${params[1].data[1]}k㎡ <br />库容：${params[0].data[0]}万m³`
                    }
                },
                legend: {
                    data: ['水位', '面积'] 
                },
                grid: {
                    left: 30,
                    right: 80,
                    bottom: 30,
                    containLabel: true
                },
                xAxis: {
                    name: '库容(万m³)'
                },
                yAxis: [{   
                    name: '水位(m)'                
                },
                {
                    name: '面积(k㎡)'
                }],
                series: [
                    {
                        name: '水位',
                        // symbolSize: 10,
                        type: 'line',
                        smooth: true,
                        data: this.wlCpData
                    },
                    {
                        name: '面积',
                        yAxisIndex: 1,
                        type: 'line',
                        smooth: true,
                        data: this.areaCpData
                    }
                ]
            }
            this.chart && this.chart.setOption(option)
        }
    }
}
</script>

笛卡尔坐标系中的折线图：（上面例子也是一样的）

绘制数学公式中的曲线图：