v-charts图例如何改变位置

Question

最近刚学着使用v-chart，用的element框架的栅格，但是发现饼图的图例跑到图形里面去了，查了官方文档好像也没有图例位置的说明，也有查一些资料，有说是用legend-position属性来改变位置，但是我设置了这个属性也没有效果。官方的图例却都是在饼图的上方的，想请问大家这个图例位置应该如何改变呢？

Answer 1

你这是应该是空间不够造成了挤压，看看 grid 这个属性。

Answer 2

可通过legend设置位置，不过你这个应该是布局的问题，增加一下你这个块的宽度。
legend设置使用如下：

<ve-pie :data="vote"  :extend="extend"></ve-pie>
<script>
export default {
    data() {
        return {
            // 指定图表的配置项和数据
            extend: {
            legend: {
                type: 'scroll',  //设置超出部分滚动
                orient: 'vertical',  //设置竖向排列
                show: true,          //是否显示，默认开启
                right: 0,            //设置位置
                top: 20,
                bottom: 20,
                textStyle: {          //文字样式
                   fontSize: 7
                 },
                 formatter: function (name) {      //超出部分隐藏显示
                    return (name.length > 12 ? (name.slice(0,12)+"...") : name ); 
                 }
              }
           }
         }
      }
    }
</script>