v-charts 设置内边距 All in One

v-charts 设置内边距 All in One

v-charts 去除图表周围空白的部分（减少空白区域的大小）

not work ???

    chartSettings: {
        type: 'line',
    },
    chartExtend: {
        ...UtilTableChart.chartExtend('line'),
        xAxis: {
            axisLabel: {
                formatter: '{value}',
                align: 'center'
            },
        },
        // 堆叠
        stack: {
            cols: [],
        },
        // 面积
        area: true,
        grid: {
            // top:  0,
            // left:  0,
            // right:  0,
            bottom:  10,
            // 内边距， echarts 设置边距
            // x: 0,
            // y: 0,
            // x2: 0,
            // y2: 0,
        },
        legend: {
            show: true,
        },
        tooltip: {
            formatter: (params) => {
                // TODO: 后端返回 format
                const format = 'TDF200P';
                let result = '';
                let total = 0;
                for(const param of params) {
                    if(param?.value?.[1]) {
                        total += param.value[1];
                    }
                }
                const formatTotal = Util.formatTableData(total, format);
                for(const [i, param] of params.entries()) {
                    const {
                        name,
                        marker,
                        value,
                    } = param;
                    const formatValue = Util.formatTableData(value[1], format);
                    const percent = value[1] ? `${Util.formatTableData(value[1] / total, format)} %` : '-';
                    if (i === 0) {
                        result += `
                            <span>${name}</span>
                            总计: <span>${formatTotal}</span> (100%)<br/>
                            ${marker}${formatValue} (${percent})<br/>
                        `;
                    } else {
                        result += `${marker}${formatValue} (${percent})<br/>`;
                    }
                }
                return result;
            },
        },
        series: (series) => {
            const len = series?.[0]?.data?.length ?? 0;
            return series.map(item => {
                item.areaStyle = 'value';
                item.symbol = len === 1 ? 'dot' : 'none';
                return item;
            });
        },
    },

我们可以通过 grid 属性来控制直角坐标系内绘图网格四周边框位置，具体有如下配置项：

x：直角坐标系内绘图网格与左侧距离，数值单位 px，支持百分比（字符串），如：50%
x2：直角坐标系内绘图网格与右侧距离，数值单位 px，支持百分比（字符串），如：50%
y：直角坐标系内绘图网格与顶部距离，数值单位 px，支持百分比（字符串），如：50%
y2：直角坐标系内绘图网格与底部距离，数值单位 px，支持百分比（字符串），如：50%

API

https://echarts.apache.org/handbook/zh/concepts/axis

https://echarts.apache.org/zh/option.html#xAxis

refs

ECharts 去除图表周围空白的部分（减少空白区域的大小）

https://www.hangge.com/blog/cache/detail_2161.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---