正文

新手必看！ECharts图表加载等待技巧，轻松提升用户体验

/0 浏览量
0530

在数据可视化领域，ECharts是一款功能强大且广泛使用的图表库。对于新手来说，如何让ECharts图表在数据加载期间提供更好的用户体验，是一个值得探讨的问题。本文将分享一些实用的ECharts图表加载等待技巧，帮助您轻松提升用户体验。

1. 加载指示器

在数据加载期间，添加一个明显的加载指示器可以帮助用户了解图表正在加载数据。ECharts提供了多种加载指示器，如下：

1.1 Spin加载指示器

option = {
    series: [{
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        labelLine: {
            length: 10,
            length2: 10
        },
        label: {
            normal: {
                formatter: '{b}: {c} ({d}%)'
            }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
            return Math.random() * 200;
        }
    }],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['pie', 'funnel']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#e5323e']
};

myChart.setOption(option);

// 添加Spin加载指示器
myChart.showLoading({
    text: 'Loading...',
    maskColor: 'rgba(0, 0, 0, 0.7)'
});

// 假设这里有一个异步请求，获取数据
setTimeout(() => {
    // 设置数据
    option.series[0].data = [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
    ];
    
    // 隐藏加载指示器
    myChart.hideLoading();
    
    // 更新图表
    myChart.setOption(option);
}, 3000);

1.2 Arrow加载指示器

option = {
    series: [{
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }],
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    color: ['#c23531']
};

myChart.setOption(option);

// 添加Arrow加载指示器
myChart.showLoading({
    text: 'Loading...',
    maskColor: 'rgba(0, 0, 0, 0.7)',
    effect: 'arrow'
});

// 假设这里有一个异步请求，获取数据
setTimeout(() => {
    // 设置数据
    option.series[0].data = [5, 20, 36, 10, 10, 20];
    
    // 隐藏加载指示器
    myChart.hideLoading();
    
    // 更新图表
    myChart.setOption(option);
}, 3000);

2. 动画效果

为了提升用户体验，可以为图表添加动画效果，使其在数据加载时更加生动。以下是一些常见的动画效果：

2.1 淡入效果

option = {
    series: [{
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        animationEasing: 'easeInOutExpo',
        animationDuration: 1500
    }],
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    color: ['#c23531']
};

myChart.setOption(option);

// 添加动画效果
myChart.showLoading({
    text: 'Loading...',
    maskColor: 'rgba(0, 0, 0, 0.7)',
    effect: 'scale',
    textStyle: {
        fontSize: 20
    }
});

// 假设这里有一个异步请求，获取数据
setTimeout(() => {
    // 设置数据
    option.series[0].data = [5, 20, 36, 10, 10, 20];
    
    // 隐藏加载指示器
    myChart.hideLoading();
    
    // 更新图表
    myChart.setOption(option);
}, 3000);

2.2 缩放效果

option = {
    series: [{
        type: 'scatter',
        data: [5, 20, 36, 10, 10, 20],
        animationEasing: 'elasticOut',
        animationDuration: 1500
    }],
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    color: ['#c23531']
};

myChart.setOption(option);

// 添加动画效果
myChart.showLoading({
    text: 'Loading...',
    maskColor: 'rgba(0, 0, 0, 0.7)',
    effect: 'scale',
    textStyle: {
        fontSize: 20
    }
});

// 假设这里有一个异步请求，获取数据
setTimeout(() => {
    // 设置数据
    option.series[0].data = [5, 20, 36, 10, 10, 20];
    
    // 隐藏加载指示器
    myChart.hideLoading();
    
    // 更新图表
    myChart.setOption(option);
}, 3000);

3. 跳过加载过程

在某些情况下，您可以跳过加载过程，直接显示初始图表。这适用于数据量较小或加载速度较快的场景。以下是如何实现：

option = {
    series: [{
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }],
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    color: ['#c23531']
};

myChart.setOption(option);

// 假设这里有一个异步请求，获取数据
setTimeout(() => {
    // 设置数据
    option.series[0].data = [5, 20, 36, 10, 10, 20];
    
    // 更新图表
    myChart.setOption(option);
}, 3000);

通过以上技巧，您可以轻松提升ECharts图表在数据加载期间的用户体验。希望本文对您有所帮助！

-- 展开阅读全文 --