ECharts图表缩放显示不全怎么处理

Question

ECharts平滑折线图缩放后显示不全，第一张图是未缩放的

下面这张是放大后的效果

期望放大后的效果类似：

JS中的配置代码：

var option = {
    backgroundColor: "#100C2A",
    animation: false,
    xAxis: {
        type: 'category',
        min: 'dataMin',
        max: 'dataMax',
        data: [],//动态数据
        axisLabel: {
            fontSize: 14,
            color: "white",
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            fontSize: 16,
            color: "white",
        },
        splitLine: {
            lineStyle: {
                color: "gray",
                width: 1,
                type: "solid"
            }
        }
    },
    series: [{
        data: [],//动态数据
        type: 'line',
        lineStyle: {
            normal: {
                width: 1.5
            }
        },
        smooth: true,

    }],
    legend: {
        data: [
            'acc_lat',
            'acc_long',
            'acc_lat_can',
            'acc_long_can'
        ],
        textStyle: {
            color: "white"
        },
    },
    dataZoom: [
        /*鼠标滚轮缩放*/
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 0,
            end: 100
        }
    ],
}

var size = {
    with: 1200,
    height: 800
}

//读取文件加载折线图

function readTxt(input) {

    var image = document.getElementById("image");
    image.style.display = "none";

    let file = input.files[0];
    console.log("file: ", file.name, typeof(file));
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function() {
        var arrlist = reader.result.split('####');

        option.xAxis.data = arrlist[0].split['\n'];
        for (var i = 1; i < arrlist.length; i++) {
            option.series.length = 0;
            var arr = arrlist[i].split('\n');
            arr.splice(0, 1);
            console.log(i + " arr:  " + arr.length + ", " + arr[0].toString());
            var serie = {
                name: option.legend.data[i],
                data: arr,
                type: 'line',
                lineStyle: {
                    normal: {
                        width: 1.5
                    }
                },
                smooth: true
            }
            option.series.push(serie);
            var id = "echart" + (i);
            loadEChart2(id);
        }
    }
}



function loadEChart2(chartId) {
    var chart = document.getElementById("div-chat");
    var width = chart.offsetWidth;
    var height = chart.offsetHeight;
    size.with = width / 2;
    size.height = height / 2;
    var chartDiv = document.getElementById(chartId);
    var myChart = echarts.init(chartDiv, null, {
        width: size.with,
        height: size.height
    });

    // Y轴最大值和最小值取整
    option.yAxis.max = function(value) {
        return Math.ceil(value.max);
    }
    option.yAxis.min = function(value) {
        return Math.floor(value.min);
    }

    option && myChart.setOption(option);

}

请教下ECharts的放大效果就是这样还是可以配置成 放大后折线不会显示不全的效果？

Answer 1

【以下回答由 GPT 生成】

问题的核心是图表在缩放后无法完整显示。解决该问题的方法是通过配置ECharts的缩放和移动功能来实现。

首先，可以使用ECharts的toolbox组件来添加缩放和移动功能。修改配置代码如下：

var option = {
    backgroundColor: "#100C2A",
    animation: false,
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                show: true, // 显示缩放组件
                yAxisIndex: 'none' // 只缩放x轴
            },
            dataView: { show: true, readOnly: false }, // 显示数据视图
            restore: { show: true }, // 显示还原功能
            saveAsImage: {
                show: true,
                name: 'chart', // 图片保存的文件名
                type: 'png', // 保存图片的格式，可以是 'png' 或者 'jpeg'
                pixelRatio: 2 // 导出的图片分辨率
            },
            // 添加移动功能
            roam: {
                show: true,
                zoom: 'scale', // 使用缩放和平移同时启用
                title: {
                    zoom: '缩放', //缩放功能按钮标题
                    move: '移动', //平移功能按钮标题
                    back: '还原' //还原功能按钮标题
                }
            }
        }
    },
    ...
}

接下来，通过配置ECharts的grid来调整图表的大小。修改配置代码如下：

var option = {
    backgroundColor: "#100C2A",
    animation: false,
    grid: {
        top: "10%", // 图表距离容器顶部的距离
        left: "3%", // 图表距离容器左侧的距离
        right: "10%", // 图表距离容器右侧的距离
        bottom: "10%", // 图表距离容器底部的距离
        containLabel: true // 是否包含坐标轴的刻度标签
    },
    ...
}

调整grid的参数可以根据需求来调整图表的显示大小。

最后，使用以上配置代码来初始化ECharts对象并渲染图表。

完整代码如下：

var option = {
    backgroundColor: "#100C2A",
    animation: false,
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                show: true,
                yAxisIndex: 'none'
            },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: {
                show: true,
                name: 'chart',
                type: 'png',
                pixelRatio: 2
            },
            roam: {
                show: true,
                zoom: 'scale',
                title: {
                    zoom: '缩放',
                    move: '移动',
                    back: '还原'
                }
            }
        }
    },
    grid: {
        top: "10%",
        left: "3%",
        right: "10%",
        bottom: "10%",
        containLabel: true
    },
    ...
}

var chart = echarts.init(document.getElementById('chartDiv'));
chart.setOption(option);

请注意，以上代码中的chartDiv是一个容器的ID，需根据实际情况进行修改。

希望以上解决方案能帮助你解决问题。如果还有其他问题，请随时提问。

【相关推荐】

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7413229
• 这篇博客你也可以参考下：Echarts动态数据可视化学习(3)：图表中函数的使用场景及方法js快捷函数
• 除此之外, 这篇博客: 基于echarts.js实现简单的饼状图的绘制中的 五、使用刚指定的配置项和数据显示图表。 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^