前言
在之前的文章 ECharts快速上手 中,曾简单的介绍了一下ECharts的使用方法,今天继续分享一些关于ECharts的一些常见效果和通用配置,它们在我们进行图表绘制的时候常常被用到,会使得我们的图表变的更加美观,也能任意定制我们的需求。话不多说,开始今天的主题。
常见效果
这里以我们之前的案例来分析,从一个普通的柱状图,我们慢慢给他加上一些效果,使它变得更加美观。
代码:
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var chartInstance = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '语文成绩'
},
xAxis: {
type: 'category',
data: ['小明', '管一', '小红', '小美', '小周', '小李', '小孙']
},
yAxis: {
type: 'value'
},
series: [{
data: [95, 130, 100, 80, 90, 110, 95],
type: 'bar'
}]
};
chartInstance.setOption(option);
</script>
当前效果:
1. 显示极值
- markPonit属性 :用于在图表上标记特定数据点,允许用户在图表的指定位置添加自定义标注点(比如最大值、最小值、特定数据标签等)
series: [{
data: [95, 130, 100, 80, 90, 110, 95],
type: 'bar',
markPoint: {
data:[
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
}
}]
效果:
后面展示的属性都和markPoint同级,我就不再重复上面代码了
2.显示平均值
- markLine属性 :用于在图表上绘制标记线,这些线条可以用来表示数据的趋势线、辅助线、警戒线等。它允许用户自定义连线的起始点和结束点,以及线段的样式和标注文本。
// 和markPoint同级
markLine:{
data:[
{
type: 'average',
name: '平均值'
},
// // 支持自定义坐标位置的标记线
// [ // { coord: [10, 20] }, // 起始坐标
// { coord: [50, 60] }, // 结束坐标
// ],
],
label: { // 线上的标签样式
formatter: '{b}',
},
}
根据ECharts中的参数约定:
{a}
:通常表示图形组件类型。{b}
:通常表示数据系列的名称或者类目的名称,在饼图中往往代表的是该扇区所对应的类别名称。{c}
:通常表示数据项的实际值。{d}
:在饼图中通常表示该扇区占总体的比例数值,并以百分比形式显示。
效果:
这样我们可以很直观的观察到哪些同学在没达到平均值。
3. 数值显示
- 只需将label中show的值设置成true即可,我们也可以对数组进行样式配置,比如旋转,详细的属性的都可以在官方文档中找到,属性众多就不一一体验了
label: {
show: true,
rotate:60
}
效果:
上面的图表还是有点单调,下面我们试着给他加上一点动态交互效果。这就需要用到一些通用配置了。
常用通用配置
1. tooltip
- 用于定义图表上的提示信息框(Tooltip)样式和内容格式。当用户鼠标悬浮在图表上时,会显示与当前数据点相关的详细信息。
tooltip中最常用的的属性主要有三个
-
trigger(触发类型):可以是
item
、axis
或none
,其中item指的是鼠标悬浮在柱状图内容区域内触发,axis指的是鼠标悬浮在当前数据所在的y轴上即可,不是一定要放在柱状图内容区域内才触发,触发范围更大,none就是不触发 -
triggerOn(触发时机):用于控制坐标轴指示器的触发时机,如
'mousemove'
或'click'
等。在ECharts 5.0及以后版本中,这个功能被整合到了tooltip.trigger
中,不再需要单独配置。 -
formatter(格式化):
formatter
是一个非常重要的Tooltip属性,它允许开发者自定义Tooltip的内容。该属性接受一个函数作为值,该函数会在Tooltip即将显示时被调用。也可以接受字符串模版。其中字符串模版这里我引用官方文档中的描述:
函数我就直接在示例代码中书写一个了
下面是一个示例代码:
tooltip: {
trigger: 'axis', // 触发方式,当鼠标悬浮在坐标轴刻度或数据点上时显示Tooltip
// triggerOn:'click', // 鼠标点击显示ToolTip
formatter: function (params) { // 自定义格式化函数
// params是一个包含多个数据项的对象数组,每个对象表示一个系列中的一个数据点
var value = params[0].value; // 获取第一个数据项的值
var name = params[0].name; // 获取对应的类别名称(x轴的category)
return `${name}: ${value}`; // 返回格式化的HTML字符串,这里简单地显示姓名和成绩
},
},
效果:
当然,我发现不自定义Tooltip的内容,其实样式也好看,不过要显示‘语文’,就必须设置series中元素的name属性,这点得注意点。
2.toolbox
toolbox
是一个非常实用的组件,它提供了图表操作和数据视图相关的工具集合。在可视化图表中,toolbox
通常以一个工具栏的形式出现在图表区域的某个角落,包含了一系列预定义或自定义的功能按钮。代码书写位置和tooltip同级
主要功能包括但不限于以下四个:
- 导出图片 允许用户将当前图表保存为PNG、JPG或其他格式的图片文件,便于分享和存档。
toolbox: {
feature: {
saveAsImage:{},
}
},
效果:
- 数据视图 提供一个交互式的数据编辑面板,用户可以查看并直接修改图表所使用的原始数据,从而动态更新图表内容。
toolbox: {
feature: {
dataView:{}
}
},
效果:
- 动态类型切换
- DataZoom:提供数据区域缩放功能,通过滑动或选择范围来放大或缩小图表中的数据展示区间。
toolbox: {
feature: {
dataZoom:{}
}
},
效果:
- Magic Type:允许用户在不同类型的图表之间进行快速切换,如柱状图转为折线图、饼图等。
toolbox: {
feature: {
magicType: {
// 在柱状图和折线图之间切换
type: ['line', 'bar']
}
}
},
效果:
但是上图我们可以看到在进行第二次切换图表的时候,原本在柱状图内部的数据被顶到了顶部,这通常是因为我们没有初始化好label的位置而造成的,我们只需给series的label属性加上定位即可解决这个问题
这下就不会出现之前的问题了
- 重置 用于恢复图表至初始状态,移除所有手动设置的缩放、类型切换等影响,使图表显示全部原始数据。
我们把之前的功能都给它加上,来试试重置效果
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
dataZoom: {}, // 区域缩放
magicType: { // 视图切换
type: ['line', 'bar']
},
restore: {} // 重置
}
},
效果:
3.legend
- 图例,用于筛选系列,需要和series配合使用
这里我们需要再添加一组数据,这次语文和数学都有,如下:
同样作为通用配置,它和tooltip同级,代码如下:
legend: {
data: ['语文', '数学']
},
效果:
留言
这是ECharts指南的第二篇,内容比较简单,也是博主最近新学的一些知识,在这里总结分享给大家,希望能对各位掘友带来些许帮助。之后我还会继续分享一些ECharts的知识,并以可视化的动态图给大家带来更好的文章阅读体验。文章都发表在专栏ECharts使用指南中。
参考资料
(Documentation – Apache ECharts-API)
(Documentation – Apache ECharts-配置项)
原文链接:https://juejin.cn/post/7333937659839217716 作者:minxcs