正文

从图表到细节：轻松掌握ECharts数据钻取技巧，洞察数据全貌

/0 浏览量
1107

在数据可视化领域，ECharts 作为一款功能强大的图表库，深受开发者喜爱。它不仅提供了丰富的图表类型，还支持数据钻取功能，帮助用户从不同维度深入分析数据。本文将带你从图表到细节，轻松掌握 ECharts 数据钻取技巧，洞察数据全貌。

一、ECharts 数据钻取概述

数据钻取是指在数据可视化过程中，通过交互操作，从整体数据中逐步深入到更细粒度的数据，以便更全面地了解数据特征。ECharts 支持多种数据钻取方式，包括：

  1. 维度切换：通过切换不同的维度，展示不同维度的数据。
  2. 指标切换：在选定维度的基础上，切换不同的指标，分析不同指标的数据。
  3. 数据过滤：根据条件过滤数据，展示符合条件的数据。
  4. 数据排序：根据特定规则对数据进行排序，便于分析。

二、ECharts 数据钻取实现

1. 维度切换

以柱状图为例，展示如何实现维度切换。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 维度切换函数
function switchDimension(dimension) {
    var data = {
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    switch (dimension) {
        case '销量':
            data.series[0].data = [10, 20, 30, 40, 50, 60];
            break;
        case '价格':
            data.series[0].data = [10, 20, 30, 40, 50, 60];
            break;
    }
    myChart.setOption(data);
}

2. 指标切换

以折线图为例，展示如何实现指标切换。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 指标切换函数
function switchIndicator(indicator) {
    var data = {
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    switch (indicator) {
        case '销量':
            data.series[0].data = [10, 20, 30, 40, 50, 60];
            break;
        case '价格':
            data.series[0].data = [10, 20, 30, 40, 50, 60];
            break;
    }
    myChart.setOption(data);
}

3. 数据过滤

以饼图为例，展示如何实现数据过滤。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 数据过滤函数
function filterData(filter) {
    var data = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ]
            }
        ]
    };
    switch (filter) {
        case '搜索引擎':
            data.series[0].data = [{value: 1048, name: '搜索引擎'}];
            break;
        case '直接访问':
            data.series[0].data = [{value: 735, name: '直接访问'}];
            break;
        case '邮件营销':
            data.series[0].data = [{value: 580, name: '邮件营销'}];
            break;
        case '联盟广告':
            data.series[0].data = [{value: 484, name: '联盟广告'}];
            break;
        case '视频广告':
            data.series[0].data = [{value: 300, name: '视频广告'}];
            break;
    }
    myChart.setOption(data);
}

4. 数据排序

以表格为例，展示如何实现数据排序。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [5, 20, 36, 10, 10, 20],
        type: 'bar'
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 数据排序函数
function sortData(sortType) {
    var data = {
        xAxis: {
            type: 'category',
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        series: [{
            data: [5, 20, 36, 10, 10, 20],
            type: 'bar'
        }]
    };
    switch (sortType) {
        case '升序':
            data.series[0].data.sort(function (a, b) {
                return a - b;
            });
            break;
        case '降序':
            data.series[0].data.sort(function (a, b) {
                return b - a;
            });
            break;
    }
    myChart.setOption(data);
}

三、总结

通过本文的介绍，相信你已经掌握了 ECharts 数据钻取技巧。在实际应用中，你可以根据需求选择合适的数据钻取方式，从不同维度、指标、过滤条件等方面深入分析数据，洞察数据全貌。希望这些技巧能帮助你更好地利用 ECharts 进行数据可视化。

-- 展开阅读全文 --