v-charts double y axis

双轴对齐

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>

<div id="app">
    <ve-line :data="chartData" :settings="chartSettings" :grid="chartGrid" :extend="chartExtend"></ve-line>
</div>

JavaScript

new Vue({
    el: '#app',
    created: function() {
        this.chartData = {
            columns: ['date', 'balance', 'percent'],
            rows: [{
                    'date': '1月1日',
                    'balance': 123,
                    'percent': 30
                },
                {
                    'date': '1月2日',
                    'balance': 1223,
                    'percent': 60
                },
                {
                    'date': '1月3日',
                    'balance': 2123,
                    'percent': 90
                },
                {
                    'date': '1月4日',
                    'balance': 4123,
                    'percent': 40
                },
                {
                    'date': '1月5日',
                    'balance': 3123,
                    'percent': 15
                },
                {
                    'date': '1月6日',
                    'balance': 7123,
                    'percent': 80
                }
            ]
        }
        this.chartGrid = {
        	right: '8%'
        }
        this.chartSettings = {
        	labelMap: {
            	'date': '日期',
                'balance': '余额',
                'percent': '占比'
            },
            axisSite: {
                right: ['percent']
            },
            yAxisType: ['KMB'],
            yAxisName: ['数值', '比率']
        }
        this.yAxisMultiple = 10;//双轴对齐数据处理倍数
        this.yAxisSplitNumber = 5;//双轴分段数
        let balance_list = this.chartData.rows.map(c => c.balance),//余额列表
        	percent_list = this.chartData.rows.map(c => c.percent),//占比列表
            balance_max = Math.ceil(Math.max(...balance_list)/this.yAxisMultiple)*this.yAxisMultiple,
            percent_max = Math.ceil(Math.max(...percent_list)/this.yAxisMultiple)*this.yAxisMultiple;
        let that = this;
        this.chartExtend = {
        	yAxis(item){
            	item.map((c) => {
                	c.min = 0;
                })
               ...