v-charts中的一些实用技巧

1.饼状图自定义显示格式

 

<template>
  <ve-pie
    :data="chart.Data"
    :settings="chart.Settings"
    :legend-visible="false"
    :events="chart.events"
    height="230px"
    >
  </ve-pie>
</template>

使用formatter 函数自定义格式：

Settings: {
          offsetY: 115,
          radius: 70,
          level: [],
          itemStyle: {
            center: ['20%', '10%']
          },
          label: {
            normal: {
              fontSize: 16,
              formatter: '{b}' + '\n\r' + '{c}' + '\n\r' + '({d}%)'
            }
          }
        }

2.x轴数据过长导致左侧数据缺失

设置Gird:

Grid: {
          left: 30
        }

3.堆叠柱状图自定义显示悬浮提示框

此情况适用于堆叠统计总数与男/女生人数，男生/女生显示时包含在总数中

extend: {
          barWidth: 20,
          tooltip: {
            formatter: function (data) {
              return data[0].name + '<br/>' + data[1].seriesName + ':' + (data[0].value + data[1].value) + '<br/>' + data[0].seriesName + ':' + data[0].value
            }
          }
        }