前言:

授人以鱼,不如授人以渔。ECharts中的配置项非常多，开发者很难记忆所有的配置项，而其又是开发时需要配置的重要内容。为了在绘制图表时，能够方便、快速地查询所需要的配置项内容，需要了解ECharts官方文档的查询方法。下面就对ECharts的官方文档及常用术语进行介绍。

一、配置手册的使用

官网网址：https://echarts.apache.org/zh/index.html
打开配置手册

具体查询步骤

（1）单击“文档”菜单中的子菜单“配置手册”，或在已进入“文档”页面后，单击左上角的“配置项”链接，都可以进入“配置项”界面

（2）“配置项”界面分为左边的导航区和右边的信息主显示区。单击左边导航区中的链接，就可在右边的信息主显示区中显示该链接的对应内容。

（3）在不确定该配置项位置时，可在“配置项”界面左上角的文本框中输入需要查询的配置项（支持模糊查询）。

搜索 toolbox.box

二、ECharts常用术语

若不知道相关术语名称具体指代，可访问官方网站查询
图表类型

line	折线图，堆积折线图，区域图，堆积区域图。
bar	柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter	散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
k	K线图，蜡烛图。常用于展现股票交易数据。
pie	饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar	雷达图，填充雷达图。高维度数据展现的常用图表。
chord	和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force	力导布局图。常用于展现复杂关系网络聚类布局。
map	地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap	热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。
gauge	仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel	漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver	事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap	矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn	韦恩图。用于展示集合以及它们的交集。
tree	树图。用于展示树形数据结构各节点的层级关系
wordCloud	词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容

基本名词

chart	是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis	直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
xAxis	直角坐标系中的横轴，通常并默认为类目型
yAxis	直角坐标系中的纵轴，通常并默认为数值型
grid	直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend	图例，表述数据和图形的关联
dataRange	值域选择，常用于展现地域数据时选择值域范围
dataZoom	数据区域缩放，常用于展现大量数据时选择可视范围
roamController	缩放漫游组件，搭配地图使用
toolbox	辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip	气泡提示框，常用于展现更详细的数据
timeline	时间轴，常用于展现同一系列数据在时间维度上的多份数据
series	数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据

三、直角坐标系下的网格及坐标轴示例

效果图：

源代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/echarts.js" type="text/javascript" charset="utf-8"></script></head><body><div id="main" style="width: 1000px; height: 800px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById("main"))var option = {grid: {//配置网格组件show:true, //设置网格是否显示x: 50, y:80, //设置网格左上角的位置width: '93%', height:'80%', //设置网格少读和宽度borderWith: 5, //设置网格边界线的宽度borderColor: 'red' ,//设置网格的边界颜色为红色backgroudColor: '#56f7ca',},title: {text: '未来一周天气变化',},tooltip: {//配置提示框组件trigger: 'axis'  //设置x轴显示提示框},legend: {//配置图例组件data:['最高气温','最低气温']},toolbox: {//配置工具箱组件show: true,feature: {mark: {show: true}, //标记显示dataView: {show: true ,readOnly:false}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新magicType: {show: true, type: ['line','bar']},  //图表样式restore: {show: true},  //配置项还原saveAsImage:{show: true}  //保存为图片}},// calculable: true,   最新版本已取消xAxis:[//配置x轴坐标系{show: true,   //是否显示x轴smooth:true,   //是否平滑曲线type: 'category', //数据项所在类目的 index。boundaryGap:false, //坐标轴两边留白策略data:['周一','周二','周三','周四','周五','周六','周日'],}],yAxis: [{//配置y坐标系show: true,type: 'value',axisLabel: {formatter:'{value}度'} //刻度标签}],series: [{//配置数据系列name: '最高气温',smooth: true,type: 'line',data: [11,11,15,13,12,13,10],markPoint:{  //设置标记点data:[{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {  //设置标线//设置标记线data: [{type: 'average', name: '平均值'}]}},{name: '最低气温',smooth: true,type:'line',data: [1,-2,2,5,3,2,0],markPoint:{//设置标记点data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]},markLine: {//设置标记线data: [{type:'average', name: '平均值'}]}}]};//使用刚指定的配置项和数据显示图表myChart.setOption(option);</script></body>
</html>

ECharts配置手册的使用及常用术语相关推荐

D3D12常用术语与函数
文章目录概览常用术语常用API HLSL参考 "计算机科学领域的任何问题都可以通过增加一个间接的中间层来解决" "Any problem in computer s ...
Echarts使用手册
Echarts使用手册 setOption: 属性说明 title 标题组件. legend 图例组件. grid 直角坐标系网格. xAxis 直角坐标系的x轴. yAxis 直角坐标系的y轴. ...
etcd 笔记（01）— etcd 简介、特点、应用场景、常用术语、分布式 CAP 理论、分布式原理
1. etcd 简介 etcd 官网定义: A highly-available key value store for shared configuration and service discov ...
机器学习常用术语词汇表
EOF是一个计算机术语,为End Of File的缩写 ,在操作系统中表示资料源无更多的资料可读取. 刚接触机器学习框架 TensorFlow 的新手们,这篇由 Google 官方出品的常用术语词汇表 ...
超全汇总！机器学习常用术语词汇表
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达刚接触机器学习框架 TensorFlow 的新手们,这篇由 Goo ...
03-2 BGP专有命令--BGP命令与配置手册
Technorati 标签: BGP,配置,CCIE,CCNP,实验该文档涉及的命令有: bgp fast-external-fallover bgp cluster-ID x.x.x.x/xxxx ...
CISCO路由器产品配置手册
CISCO路由器产品配置手册第一章路由器配置基础2 一.基本设置方式2 二.命令状态2 三.设置对话过程3 四.常用命令5 五.配置IP寻址6 六.配置静态路由8 第二章广域网协议设置10 一. ...
JIRA配置手册（3）：字段和界面
作者:Misha 来源:原力注入在前面我们简单介绍了问题类型和工作流的配置方法,今天我们来聊一聊字段和界面这两个互相依赖的家伙. 界面即Issue展示给用户可见的表单页面,分为创建界面.查看界面和编 ...
Oracle 共享磁盘阵列双机热备实战配置教程配置手册
Oracle 11g共享存储双机热备配置手册本文介绍通过ServHA Cluster配置Oracle共享磁盘阵列双机容错集群. 集群软件下载地址:http://www.microcolor.net ...

ECharts配置手册的使用及常用术语

前言:

一、配置手册的使用

二、ECharts常用术语

三、直角坐标系下的网格及坐标轴示例

ECharts配置手册的使用及常用术语相关推荐

最新文章

热门文章