echarts各类术语和常用配置

发布时间 2023-10-12 16:53:09作者: dirgo

1.术语,按照默认从上到下顺序(即setOption({})里的配置项)

官方配置项说明:Documentation - Apache ECharts

title 图表的标题,默认左上角黑色加粗显示

legend 图例

tooltip 提示框,就是鼠标移动到某部分图形(例如柱状图的某跟柱或者饼图的某个扇区)在鼠标旁边跟随出现的方框,一般内部显示这部分的名称和数据,

一般常配置其下 formatter  参数来设置显示哪些,注意使用数据集时,无法像series -label-formatter一样使用@或者[]选择维度

toolbox 工具栏,一般在右上角,有一些功能按钮组成,如缩放,转换,保存图片等,不大常用

grid (可不写,使用默认) 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。

xAxis  直角坐标系的x轴配置

yAxis 直角坐标系的y轴配置

dataZoom 组件 用于区域缩放(偶尔用)

series(常用且设置项目多) 系列列表。每个系列通过 type 决定自己的图表类型

  type最常用的有 柱状图bar, 饼图pie, 折线 line

  常用的还有label设置其指示数据的标签样式和格式,设置下面的formatter项

  样式还可以通过itemStyle等设置

dataset 数据集(常用,v4以后推荐优先使用此方式,数据驱动,灵活,传统方式是在series里写数据)

    其下可以使用transform,过滤转换成多个数据来使用

2.入门教程

参考官网的即可:快速上手 - Handbook - Apache ECharts