CSDN开源夏令营百度数据可视化实践 ECharts（4）

最新推荐文章于 2018-05-18 11:08:50 发布

u013476464

最新推荐文章于 2018-05-18 11:08:50 发布

阅读量3.6k

点赞数 1

分类专栏：【开源夏令营】 ECharts开发文章标签：百度 ZRender 数据可视化 Echarts javascript

本文链接：https://blog.csdn.net/u013476464/article/details/38140581

版权

【开源夏令营】同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ECharts开发

10 篇文章 9 订阅

订阅专栏

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是多少怎么办？目前版本的回调变量中并不支持，我们能怎么满足这个需求？

永远别忘了数据在你自己的手里，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>

这次总结就先到这里，下次继续。