ECharts基础学习 (第三天)

下定决心,好好过一天 ~

ECharts

ECharts 数据的视觉映射

数据可视化简单来讲就是将数据用图表的形式来展示,专业的表达方式就是数据到视觉元素的映射过程。
ECharts 的每种图表本身就内置了这种映射过程,我们之前学习到的柱形图就是将数据映射到长度。
此外,ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visualMap 组件中可以使用的视觉元素有:

1.图形类别(symbol)
2.图形大小(symbolSize)
3.颜色(color)
4.透明度(opacity)
5.颜色透明度(colorAlpha)
6.颜色明暗度(colorLightness)
7.颜色饱和度(colorSaturation)
8.色调(colorHue)

数据和维度

ECharts 中的数据,一般存放于 series.data 中。

不同的图表类型,数据格式有所不一样,但是他们的共同特点就都是数据项(dataItem) 的集合。每个数据项含有 数据值(value) 和其他信息(可选)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。

series.data 最常见的形式 是线性表,即一个普通数组:

series: {
    data: [
        {       // 这里每一个项就是数据项(dataItem)
            value: 2323, // 这是数据项的数据值(value)
            itemStyle: {...}
        },
        1212,   // 也可以直接是 dataItem 的 value,这更常见。
        2323,   // 每个 value 都是『一维』的。
        4343,
        3434
    ]
}
series: {
    data: [
        {                        // 这里每一个项就是数据项(dataItem)
            value: [3434, 129,  '圣马力诺'], // 这是数据项的数据值(value)
            itemStyle: {...}
        },
        [1212, 5454, '梵蒂冈'],   // 也可以直接是 dataItem 的 value,这更常见。
        [2323, 3223, '瑙鲁'],     // 每个 value 都是『三维』的,每列是一个维度。
        [4343, 23,   '图瓦卢']    // 假如是『气泡图』,常见第一维度映射到x轴,
                                 // 第二维度映射到y轴,
                                 // 第三维度映射到气泡半径(symbolSize)
    ]
}

在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到x轴,取第二个维度映射到y轴。如果想要把更多的维度展现出来,可以借助 visualMap 。

visualMap 组件

visualMap 组件定义了把数据的指定维度映射到对应的视觉元素上。
visualMap 组件可以定义多个,从而可以同时对数据中的多个维度进行视觉映射。
visualMap 组件可以定义为 分段型(visualMapPiecewise) 或 连续型(visualMapContinuous),通过 type 来区分。例如:

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

分段型视觉映射组件,有三种模式:

1.连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
2.连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
3.离散数据根据类别分段: 类别定义在 visualMap-piecewise.categories 中。

视觉映射方式的配置

visualMap 中可以指定数据的指定维度映射到对应的视觉元素上。

option = {
    visualMap: [
        {
            type: 'piecewise'
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四个维度(即 value[3])被映射
            seriesIndex: 4,     // 对第四个系列进行映射。
            inRange: {          // 选中范围中的视觉配置
                color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,
                                                    // 数据最小值映射到'blue'上,
                                                    // 最大值映射到'red'上,
                                                    // 其余自动线性计算。
                symbolSize: [30, 100]               // 定义了图形尺寸的映射范围,
                                                    // 数据最小值映射到30上,
                                                    // 最大值映射到100上,
                                                    // 其余自动线性计算。
            },
            outOfRange: {       // 选中范围外的视觉配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

ECharts 事件处理

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。
ECharts 通过 on 方法来监听用户的行为,例如监控用户的点击行为

ECharts 中事件分为两种类型:

用户鼠标操作点击,如 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。

还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 ‘legendselectchanged’ 事件),数据区域缩放时触发的 ‘datazoom’ 事件等等。

// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
    alert(params.name);

鼠标事件包含参数

所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,格式如下:

{
    // 当前点击的图形元素所属的组件名称,
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
    // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data,dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

列如:

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge(边)上。
            }
            else {
                // 点击到了 graph 的 node(节点)上。
            }
        }
    }
});

使用 query 只对指定的组件的图形元素的触发回调:

chart.on(eventName, query, handler);

query 可为 string 或者 Object。
如果为 string 表示组件类型。格式可以是 ‘mainType’ 或者 ‘mainType.subType’。例如:

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

如果为 Object,可以包含以下一个或多个属性,每个属性都是可选的:

{
    <mainType>Index: number // 组件 index
    <mainType>Name: string // 组件 name
    <mainType>Id: string // 组件 id
    dataIndex: number // 数据项 index
    name: string // 数据项 name
    dataType: string // 数据项 type,如关系图中的 'node', 'edge'
    element: string // 自定义系列中的 el 的 name
}

例:

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。
});
chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。
});
chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 关系图的节点被点击时此方法被回调。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 关系图的边被点击时此方法被回调。
});
chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。
});

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表,显示浮层等等,
例:

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });
});

组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 events 文档中有列出

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 获取点击图例的选中状态
    var isSelected = params.selected[params.name];
    // 在控制台中打印
    console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
    // 打印所有图例的状态
    console.log(params.selected);
});

ECharts 旭日图

旭日图(Sunburst)由多层的环形图组成,在数据结构上,内圈是外圈的父节点。因此,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。

ECharts 创建旭日图很简单,只需要在 series 配置项中声明类型为 sunburst 即可,data 数据结构以树形结构声明,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            series: {
                type: 'sunburst',
                data: [{
                    name: 'A',
                    value: 10,
                    children: [{
                        value: 3,
                        name: 'Aa'
                    }, {
                        value: 5,
                        name: 'Ab'
                    }]
                }, {
                    name: 'B',
                    children: [{
                        name: 'Ba',
                        value: 4
                    }, {
                        name: 'Bb',
                        value: 2
                    }]
                }, {
                    name: 'C',
                    value: 3
                }]
            }
        };

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

ECharts基础学习 (第三天)

颜色等样式调整

默认情况下会使用全局调色盘 color 分配最内层的颜色,其余层则与其父元素同色。
在旭日图中,扇形块的颜色有以下三种设置方式:

1.在 series.data.itemStyle 中设置每个扇形块的样式。
2.在 series.levels.itemStyle 中设置每一层的样式。
3.在 series.itemStyle 中设置整个旭日图的样式。

上述三者的优先级是从高到低的,也就是说,配置了 series.data.itemStyle 的扇形块将会覆盖 series.levels.itemStyle 和 series.itemStyle 的设置。

var option = {
    series: {
        type: 'sunburst',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                value: 3,
                name: 'Aa',
                itemStyle: {
                    color: 'red'
                }
            }, {
                value: 5,
                name: 'Ab'
            }]
        }, {
            name: 'B',
            children: [{
                name: 'Ba',
                value: 4
            }, {
                name: 'Bb',
                value: 2
            }],
            itemStyle: {
                color: 'red'
            }
        }, {
            name: 'C',
            value: 3
        }],
        itemStyle: {
            color: '#aaa'
        },
        levels: [{
            // 留给数据下钻的节点属性
        }, {
            itemStyle: {
                color: 'blue'
            }
        }]
    }
};

数据下钻

旭日图默认支持数据下钻,也就是说,当点击了扇形块之后,将以该扇形块的数据作为根节点,进一步显示该数据的细节。
在数据下钻后,图形的中间会出现一个用于返回上一层的图形,该图形的样式可以通过 levels[0] 配置。

如果不需要数据下钻功能,可以通过将 nodeClick 设置为 false 来关闭,也可以设为 ‘link’,并将 data.link 设为点击扇形块对应打开的链接。

高亮相关扇形块

旭日图支持鼠标移动到某扇形块时,高亮相关数据块的操作,可以通过设置 highlightPolicy,包括以下几种高亮方式:

1.‘descendant’(默认值):高亮鼠标移动所在扇形块与其后代元素;
2.‘ancestor’:高亮鼠标所在扇形块与其祖先元素;
3.‘self’:仅高亮鼠标所在扇形块;
4.‘none’:不会淡化(downplay)其他元素。

上面提到的"高亮",对于鼠标所在的扇形块,会使用 emphasis 样式;对于其他相关扇形块,则会使用 highlight 样式。通过这种方式,可以很方便地实现突出显示相关数据的需求。

具体来说,对于配置项:

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

参考资料

下定决心,好好过一天 ~

上一篇:angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用


下一篇:手把手教你使用Python做数据分析