Echarts canvas渲染出来的图表与边框的距离修改

由于项目需要，采用Echarts canvas渲染出来的桑基图右边边距太大，导致过多的空白，因此需要做下修改。

经过网上查找，很多人都是建议设置grid来控制边距：(grid配置-官网地址)

var option = {
        //图表配置标题
        title: {
            text: 'title-cute', 
            
        }
        legend: {
            show: true,
            right: '10%',
            top: 2,
            itemWidth: 10,
            itemHeight: 4,
            textStyle: {
                color: '#1a1a1a',
                fontSize: 12,
                icon: 'rect',
            },
            data:legend
        },
        //设置中间内容距离div的距离，也就是内边距
        grid: {
            top: 35,
            left: 55,
            right: 45,
            bottom: 35px,
            width:'auto',
            height:'auto'
        },
        dataZoom: [{
            type: 'inside'
        }, {
            type: 'slider'
        }],
        series: [{
            // name: "",
            type: 'line', //图表类型
            // data: [266, 200, 306, 100, 100, 280, 500, 500],
            data: [],
            symbol: 'none',

        }]
};

但是对于桑基图的配置却没有作用。

后面，再去查看了Echarts 桑基图的配置项，原来桑基图自己就有对于边距进行配置的选项，具体配置就是在series中设置top、right、bottom、left来控制边距。可以查看：Sankey 。

往后拉，可以看到，桑基图对于右边边距默认设置为 20%，对于我们来说有点宽了，所以通过设置这个值可以调整右边边距。

将值设置为： right: '10%’，效果如下：

至此，问题解决！