echarts legend.itemGap 仅适用于 gulp browser-sync答案

【问题标题】：echarts legend.itemGap only works on gulp browser-syncecharts legend.itemGap 仅适用于 gulp browser-sync
【发布时间】：2017-04-27 08:27:22
【问题描述】：

我想缩小图例中元素之间的差距。我正在使用浏览器同步并且我使用它的时间它可以工作，但是我关闭浏览器同步并打开相同的 web 应用程序，它似乎不起作用。这是我使用浏览器同步的图表

这是关闭浏览器同步后的图表

这是我的 Echart 选项：

option ={
            title: {
                text: 'Ejercicios realizados por el paciente',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            toolbox: {
                show : true,
                /*orient: 'vertical',*/
                showTitle: true,
                feature : {
                    mark : {show: true},
                    /*magicType: {
                        show: true, 
                        type: ['line', 'bar', 'stack'],
                        title: {
                        line: 'linea',
                        bar: 'barras',
                        stack: 'barras apiladas'
                        }
                        },
                        restore : {
                        show: true,
                        title: 'restaurar'
                    },*/
                    saveAsImage : {
                        show: true,
                        title: 'captura'
                    }
                }
            },
            calculable : true,
            legend: {
                orient: 'vertical',
                align: 'left',
                top: '7%',
                right: '1%',
                left: /*'right'*/'80%',
                width: '27%',
                data:[],
                itemGap: 4,
                itemHeight: 7,
                itemWidth: 15,
                padding: 1,
                //backgroundColor: 'rgba(0, 0, 0, 0.1)'
            },
            xAxis: [
                {
                    type : 'category',
                    data: timeData,
                    //boundaryGap: ['20%', '40%']
                }
            ],
            yAxis: {
                type: 'value',
                name: 'N. veces',
                offset: 0,
                nameRotate: 0,
                fontSize: 12,
            },
            dataZoom: [{
                type: 'inside',
                start: 85,
                end: 100
                }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '100%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.8)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                bottom: '1%'
            }],
            grid: {
                //top: 110,
                left: '4%',
                right: '19%',
                //height: 160,
                width: '76%',
                containLabel: false,
            },
            series: [],
            color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3', '#ff0065', '#71167a', '#fbe562', '#08331d', '#ADFF2F', '#cb6c00', '#421c25', '#25365c', '#8FBC8F', '#4169E1', '#FF4500']
        }

我错过了什么吗？请帮忙

【问题讨论】：

您是否尝试过为 Legend 使用自定义 formatter。 legend 在 echarts 中可能非常棘手。我一直在为类似的问题苦苦挣扎，然后考虑到并非所有这些问题都可以解决，随着时间的推移，我找到了不太理想的解决方案。您还可以尝试为顶部/底部和左/右填充设置不同的值（使用数组）。你能检查<div> 的宽度吗？它是静态值吗？如果没有，你能看到browser-sync 使用与常规模式时的宽度吗？

标签： javascript browser-sync gulp-browser-sync echarts

【解决方案1】：

会尝试更改图例的选项值，itemGap：4，itemHeight：7，itemWidth：15。通过这些设置，您将能够使其适应您想要运行它的环境

【讨论】：

感谢您的帮助，但这不是问题所在，我已经更改了这些参数以使图表看起来像第一个。我重建了我的 web 应用程序并运行浏览器同步，它按预期工作。当我刚刚以常规模式运行 web 应用程序时，问题就出现了，因为浏览器同步。它会忽略我刚刚输入的空间参数。