echarts知识巩固

最新推荐文章于 2022-10-20 16:09:36 发布

原创最新推荐文章于 2022-10-20 16:09:36 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据可视化

《数据可视化》BY刺猬多情专栏收录该内容

5 篇文章

订阅专栏

chart指一个完整的图表，如折线图、饼图等，由基本图形或者混搭图形组合而成

axis直角坐标系的坐标轴，坐标轴可以分为类目型、数值型或时间型

xaxis直角坐标系中的横轴，默认类目型

yaxis直角坐标系中的纵轴，默认数值型

grid直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局

legend图例，表述数据和图形的关联

dataRange值域选择，常用于展现地域数据时选择值域范围

dataZoom数据区域缩放，常用于展现大量数据时选择可视范围

roamController缩放漫游组件，搭配地图使用

toolbox辅助工具箱，辅助功能，如：添加标线、缩放框等

tooptip气泡提示框，常用于展现更详细的数据

timeline时间轴，常用于展现同一系列数据在时间维度上的多分数据

series数据系列，一个图表可能包含多个系列，每个系列可能包含多个数据

图表名词：

line折线图、堆积折线图、区域图、堆积区域图

bar柱形图（纵向）、堆积柱形图、条形图（横向）、堆积条形图

scatter散点图、气泡图，散点图至少需要横纵两个数据，更高维度加入时可以映射为颜色或大小，当映射到大小时则为气泡图

k线图，蜡烛图，常用于展现股票交易数据

pie饼图，圆环图，饼图支持两种（半径、面积）南丁格尔玫瑰图

radar雷达图，填充雷达图，高纬度数据展现的常用图表

chord和弦图，常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据

force力导布局图，常用于展现复杂关系网络聚类布局图

map地图，可以通过geojson扩展地图类型，支持svg扩展类地图应用

heatmap热力图，用于展示热力分布信息，支持与地图、百度地图插件联合使用

gauge仪表盘，用于展现关键指标数据，常见于bi类系统

funnel漏斗图，用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于bi类系统

evnetriver事件河流图，常用于展示具有时间属性的多个事件，以及事件随时间的演化

treemap矩形式树状结构图，用于展示树形数据结构，优势是能最大限度展现节点的尺寸特征

venn韦恩图，用于展示集合以及他们的交集

tree树图，用于展示树形数据结构各节点的层级关系

wordcloud词云，词云是关键词的视觉化描述，用于汇总用户生成的标签或者一个网站的文字内容

为echarts准备一个具备大小的dom；script标签引入echarts主文件；为模块加载器配置echarts路径，从当前页面链接到echarts.js所在目录；动态加载echarts及所需图表然后在回调函数中开始使用

<body>
<div id="main" style="height:400px;"></div>
...
<script src="example/www2/js/dist/echarts-all.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
</script>
</body>

初始化：echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例

熟悉模块化，初始化代码，实例方法

require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({...});
}
);

setOption万能接口，配置图表实例任何配置选项，多次调用时option选项默认是合并的merge的设计可以让setOption很方便的成为更新任何属性的万能方法，比如仅需要改title文字，setOption（{title：{text：‘新标题’}}），如果不需要，可以通过notMerger参数为true阻止与上次option的合并，如多次setOption间数据改变、长度不一致等的场景

getOption返回内部持有的当前显示option克隆；setSeries({Array} series,{boolean=}
notMerge)返回内部持有的当前显示series克隆，效果同getOption（）.series；addData,动态数据接口，try this （line&bar）>>(example/dynamicLineBar.html) try this (Scatter & K) »(example/dynamicScatterK.html) try this (Pie & Radar) »
(example/dynamicPieRadar.html)，seriesidx系列索引，data增加数据，ishead是否队头加入（默认，不指定或flase时为队尾插入），datagrow是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和
dataGrow
多组数据添加时参数为：
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]；addmarkpoint新增标注接口，其中
seriesIdx 系列索引
markData [标注]对象，同series.markPoint，支持多个