v-chart 自定义显示格式

v-charts 文档：
https://v-charts.js.org/#/line

1.settings 设置双 y 轴

2.设置数字显示到折线上，并且显示为 xx% 格式

使用formatter 函数

formatter: function(params){
 console.log(params)
    if(params.seriesIndex == 2){
        str = (params.data[1])*100+'%';
        return str
 }

<template>
  <ve-line :data="chartData" :settings="chartSettings" :extend="percentExtend"></ve-line>
</template>

<script>
  export default {
    data () {
      this.chartSettings = {
        axisSite: { right: ['下单率'] },
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['数值', '比率']
      }
      return {
        percentExtend: {
                    series: {
                        label: {
                            show: true,
                                formatter: function(params){
                                  console.log(params)
                                    if(params.seriesIndex == 2){
                                        str = (params.data[1])*100+'%';
                                        return str
                                 }
                            }
                        }
                    },
                    legend: {
                        bottom: 10
                    }
                },
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>

3.显示效果

4.index的定位

index是y轴数据的索引，因为这个地方的比率是最后的一个，所以是index是2，而具体的数据是在data里面的，第一个数据是x轴数据，第二个数据是y轴数据，所以是params.data[1]

str = (params.data[1])*100+'%';
 return str