首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts(4)
CSDN开源夏令营 百度数据可视化实践 ECharts(4)
在应用过程中总会遇到一些难以理解的概念和属性,这里就总结了一下比较难的知识点,方便理解概念,进而更好的掌握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),数组中每一项代表一个系列的特殊选项及数据 |
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是多少怎么办?目前版本的回调变量中并不支持,我们能怎么满足这个需求?
永远别忘了数据在你自己的手里,option是你传个ec的,如果任何地方的回调变量或数据不能满足你的需求,直接从你自己的option里找。
这里可以有很多技巧,比如函数闭包把option圈在里面,或者从myChart(图表实例).getOption()方法。
2)常用formatter的地方就是axisLabel。比如像加单位
例如:
通过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:
实现代码:
<!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>
这次总结就先到这里,下次继续。