v-chart 自定义显示格式 短命女 2022-02-28 15:54 548阅读 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
还没有评论,来说两句吧...