v-chart 自定义显示格式

短命女 2022-02-28 15:54 600阅读 0赞

v-charts 文档：  
[https://v-charts.js.org/\#/line][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.显示效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70]

# 4.index的定位 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 1]

[https_v-charts.js.org_line]: https://v-charts.js.org/#/line
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70]: /images/20220228/7a6ab3c4226048008370bbfa3b4ff15e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 1]: /images/20220228/5d2764b35d314608b475cfa84d0f3cb1.png