CSDN开源夏令营 百度数据可视化实践 ECharts（4）
ECharts知识点总结：
在应用过程中总会遇到一些难以理解的概念和属性，这里就总结了一下比較难的知识点，方便理解概念。进而更好的掌握ECharts。
（1）1. 一个完整的option包括什么？能够归纳为几类？
下图中颜色已经区分出了三类各自是：公共选项 。 组件选项 ， 数据选项
| 名称 | 描写叙述 |
|---|---|
| {color}backgroundColor | 全图默认背景，（详见backgroundColor）。默觉得无。透明 |
| {Array} color | 数值系列的颜色列表。（详见color）。可配数组。eg：['#87cefa', 'rgba(123,123,123,0.5)','...']。当系列数量个数比颜色列表长度大时将循环选取 |
| {boolean}renderAsImage | 非IE8-支持渲染为图片。（详见renderAsImage） |
| {boolean}calculable | 是否启用拖拽重计算特性，默认关闭。（详见calculable。相关的还有 calculableColor。 calculableHolderColor。nameConnector， valueConnector） |
| {boolean}animation | 是否开启动画，默认开启，（详见 animation。相关的还有 addDataAnimation， animationThreshold。animationDuration。 animationEasing） |
| {Object} timeline | 时间轴（详见timeline）。每一个图表最多仅有一个时间轴控件 |
| {Object} title | 标题（详见title），每一个图表最多仅有一个标题控件 |
| {Object} toolbox | 工具箱（详见toolbox）。每一个图表最多仅有一个工具箱 |
| {Object} tooltip | 提示框（详见tooltip）。鼠标悬浮交互时的信息提示 |
| {Object} legend | 图例（详见legend）。每一个图表最多仅有一个图例，混搭图表共享 |
| {Object} dataRange | 值域选择（详见dataRange）,值域范围 |
| {Object} dataZoom | 数据区域缩放（详见dataZoom）,数据展现范围选择 |
| {Object} grid | 直角坐标系内画图网格（详见grid） |
| {Array | Object}xAxis | 直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同一时候存在2条横轴 |
| {Array | Object}yAxis | 直角坐标系中纵轴数组（详见yAxis）。数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同一时候存在2条纵轴 |
| {Array} series | 驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据 |
当中除了数据选项都不是必须的，公共选项假设不传入默认就好用conifg里的标准属性。跟组件选项不同，假设组件选项不传入就是不用这个组件。
传入的组件选项里的每个配置项相同会跟config里进行merger。
ec支持主题，所谓的主题就是还有一位一个更高优先级的config。
所以终于的option = coinfg + theme + 传入的option，优先级就是越往后越高。所以终于的option = coinfg + theme + 传入的option。
比例如以下图，option与图像内容一一相应：
（2） Formatter是万金油，能够实现高度个性化的需求，那些地方支持formatter？找到的每个地方都想一个应用场景？
formatter是做文本格式化用的。由于不可能内置文本显示能满足全部需求，所以在做个性化定制是formatter显得尤为重要和灵活。不仅是满足格式要求，甚至可用于满足图形化的需求。
最常见的是tooltip、axisLabel、itemStyle.*.label.formatter
1）先说tooltip的formatter，这个比較特殊，由于tooltip是一个dom显示。
formatter应该返回的是html片段，也正由于是html片段，能够相当灵活，你甚至能够返回一个表格、一张图片、甚至嵌入一个iframe去引用另外一个页面。同一时候formatter支持function、能用function的地方你基本就能够为所欲为，不仅做图形图像的处理。你还能够利用这个回调做些额外的业务逻辑，比方计算、比方上传数据、比方调用自己的方法获取额外的显示内容（ajax）等等。
举个样例：
iphone3、iphone4在新疆的销售数量在回调给tooltip时仅仅会给出一个总量461，我须要分别显示iphone3是多少。iphone4是多少怎么办？眼下版本号的回调变量中并不支持，我们能怎么满足这个需求？
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQ3NjQ2NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
永远别忘了数据在你自己的手里。option是你传个ec的。假设不论什么地方的回调变量或数据不能满足你的需求，直接从你自己的option里找。
这里能够有非常多技巧，比方函数闭包把option圈在里面，或者从myChart（图表实例）.getOption()方法。
2）经常使用formatter的地方就是axisLabel。比方像加单位
比如：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQ3NjQ2NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
通过formatter为时间格式。axisLabel配合其它同级属性能做出非常多高度个性化的功能。
（3）Symbol是什么？那些地方用到symbol？
>标志图形类型（循环使用）
SymbolList：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' |
'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'
>大多用在series数据表示+线段节点上：
数据标线的端点
数据标点
折线图，散点图
时间轴当前点
力导图的两端
文档里还有
另外还支持五种特别的标志图形’heart(心形)’、’droplet(水滴)’、’pin(标注)’、’arrow（箭头）’、’star(五角星)’，同一时候star能够变换为你想要的n角星,比如’start6’就是六角星，这里n要大于等于3才行。
而且从1.3.5開始支持自己定义图片。格式’image://’+’图片路径’。
mp里的symbol用上图片有些地方会有非常好的效果，比方天气预报。把气象图片放到地图上的效果。
配合的好的话。能够做出非常精美的东西。
比例如以下图提醒：上下双轴。去轴线。去网格。轴标签文本个性化、换行、symbol：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQ3NjQ2NA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="js1/esl.js"></script>
</head> <body background="js/back2.jpg">
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
require.config({
paths:{
echarts:'./js1/echarts',
'echarts/chart/line': './js1/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
grid:{
borderWidth:0
},
title:{
text:"未来一周气温变化",
subtext:"纯属虚构"
},
tooltip : {
trigger: 'item'
},
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 : [
{
type : 'category',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
},
data : ['东北风\n09/23','东北风\n09/24','西南风\n09/25','东北风\n09/23','东北风\n09/23','西北风\n09/23']
},
{
type:'category',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
},
data:['昨天\n东北风','今天\n东北风','明天\n西南风','周三\n西南风','周四\n北风','周五\n东北风']
}
],
yAxis : [
{
type : 'value',
axisLine:{
show:false
},
axisTick:{
show:false
},
splitLine:{
show:false
},
axisLabel:{
show:false
}
}
],
series : [
{
name:'最高气温',
type:'line',
data:[{value:13,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{ label:{
show:true,
textStyle:{
fontSize:'15'
}
},
emhasis:{label:{show:true}},
color:'gray'
} }
},
{value:10,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{
color:'deepskyblue'
}
}
}
, {value:13,symbol:'arrow',symbolSize:10,symbolRotate:135,
itemStyle:{
normal:{
color:'deepskyblue'
}
}
},
{value:13,symbol:'arrow',symbolSize:10,symbolRotate:135,
itemStyle:{
normal:{
color:'deepskyblue'
}
}
},
{value:10,symbol:'arrow',symbolSize:10,symbolRotate:0,
itemStyle:{
normal:{
color:'deepskyblue'
}
}
},
{value:10,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{
color:'deepskyblue'
}
}
}] },
{
name:'最低气温',
type:'line',
data:[{value:1,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{ color:'gray'
}
}
},
{value:1,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{ color:'plum'
}
}
},
{value:4,symbol:'arrow',symbolSize:10,symbolRotate:135,
itemStyle:{
normal:{ color:'plum'
}
}
} ,
{value:1,symbol:'arrow',symbolSize:10,symbolRotate:135,
itemStyle:{
normal:{ color:'plum'
}
}
},
{value:1,symbol:'arrow',symbolSize:10,symbolRotate:-45,
itemStyle:{
normal:{ color:'plum'
}
}
},
{value:1,symbol:'arrow',symbolSize:10,symbolRotate:45,
itemStyle:{
normal:{ color:'plum'
}
}
}]
}
]
});
}
);
</script>
</body>
</html>
这次总结就先到这里，下次继续。
CSDN开源夏令营 百度数据可视化实践 ECharts（4）的更多相关文章
- CSDN开源夏令营 百度数据可视化实践 ECharts（8）问题分析
ECharts问题描写叙述: 问题就是折线图上的点是显示的,有人问能不能一開始不显示,当你点击的时候或者是当鼠标移动到上面的时候,折线上的点才显示? 例如以下图所看到的: 分析:让折线上的点不显示能够 ...
- CSDN开源夏令营 百度数据可视化实践 ECharts（8）
(1)前言 首先谢谢林峰老师,继续接着第七篇提到的内容.CSS布局确实非常累,感觉不好看了就的调整,总的看起来的高大上嘛.好了废话不再多说.今天主要就先解说一个页面的内容,对于CSS布局后面讲会具体的 ...
- 自动驾驶汽车数据不再封闭，Uber 开源新的数据可视化系统
日前,Uber 开源了基于 web 的自动驾驶可视化系统(AVS),称该系统为自动驾驶行业带来理解和共享数据的新方式.AVS 由Uber旗下负责自动驾驶汽车研发的技术事业群(ATG)开发,目前该系统已 ...
- 值得赞扬的尝试与进步——CSDN开源夏令营第一印象
注:写这篇文章时我并未參加CSDN开源夏令营,也不确定是否会參加以及是否能參加上. 欣闻CSDN举办了"CSDN开源夏令营"活动.第一感觉是CSDN作为活动的组织者是很值得称赞的. ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- JavaScript—数据可视化（ECharts）
Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- 4款开源免费的数据可视化JavaScript库
概述:交互式数据可视化在很大程度上取决于JavaScript库的任务能力.在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js. ...
- 【WaaCaa】一款开源科学作图/数据可视化工具 —— 诞生篇
作为一个理工男.用过了形形色色能够用于科学作图/数据可视化软件:从大学时做实验课推荐用于分析简单採集数据的 Origin; 毕业论文时用来呈现实验时序信号和离线分析脑电信号的 MATLAB.后面还发现 ...
随机推荐
- [BZOJ4650][NOI2016]优秀的拆分(SAM构建SA)
关于解法这个讲的很清楚了,主要用了设关键点的巧妙思想. 主要想说的是一个刚学的方法:通过后缀自动机建立后缀树,再转成后缀数组. 后缀数组功能强大,但是最令人头疼的地方是模板太难背容易写错.用这个方法, ...
- [BZOJ 4060] Word Equations
Link: BZOJ 4060 传送门 Solution: 可以发现字符串间的关系可以构成一棵树 于是我们先用字符串哈希建树,再树形$dp$即可 设$dp[i][j]$为第$i$个节点从$P$字符串的 ...
- 【树链剖分】【函数式权值分块】bzoj1146 [CTSC2008]网络管理Network
裸题,直接上.复杂度O(n*sqrt(n)*log(n)). //Num[i]表示树中的点i在函数式权值分块中对应的点 //Map[i]表示函数式权值分块中的点i在树中对应的点 #include< ...
- 【分块】bzoj2724 [Violet 6]蒲公英
分块,离散化,预处理出: ①前i块中x出现的次数(差分): ②第i块到第j块中的众数是谁,出现了多少次. 询问的时候,对于整块的部分直接获得答案:对于零散的部分,暴力统计每个数出现的次数,加上差分的结 ...
- Delphi 二维码产生和扫描
Zint用于产生二维码. Zxing用读取二维码. VFrames.pas和VSample.pas用于摄像头. 另附带摄像头相关的类库,也可用开源的dspack也可用于摄像头的需求. 以上为开源的信息 ...
- Scala实战高手****第4课：零基础彻底实战Scala控制结构及Spark源码解析
1.环境搭建 基础环境配置 jdk+idea+maven+scala2.11.以上工具安装配置此处不再赘述. 2.源码导入 官网下载spark源码后解压到合适的项目目录下,打开idea,File-&g ...
- iOS UILabel自定义行间距
NSString *hintStr = @"输入材料标题搜索材料\n注:可根据材料序号直接搜索, 如TPO23"; CGSize size = [toolset returnTex ...
- Redis核心解读
http://www.wzxue.com/redis核心解读/
- struts-2-spring-2-jpa-ajax
http://struts.apache.org/docs/struts-2-spring-2-jpa-ajax.html
- SqlServer_合并多个递归查询数据（CTE）
该方法在数据量过大时,效率过低,可参考hierarchyid字段实现(Sqlserver 2008) 优点:效率较高 缺点:需要不断维护数据,对现有业务有一定影响 参考:http://www.cnbl ...