来源于：http://www.ithao123.cn/content-3751220.html
格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！
一、tooltip
图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。
比如需要将当前数据点的值后面追加一个单位字符串，示例代码如下所示：
01.tooltip : {
02.trigger:'axis',
03.formatter:function(a)
04.{
05.var relVal ="";
06.relVal = a[0]+"°C
";
07.relVal += a[1]+"°C";
08.return relVal;
09.}
10.},
效果图如下所示：
如果不太了解formatter方法内的参数，可以在function内设置debugger加入断点调试浏览数据结构。
二、axisLabel
坐标轴刻度上面的刻度格式化，比如一个很简单的例子，Y轴表示人的体重，我们往往需要在每一个刻度值后面带上kg的单位，我们应该如何进行刻度的格式化呢？
格式化Y轴刻度的示例代码如下：
01.yAxis : [
02.{
03.type :'value',
04.axisLabel : {
05.formatter:function(value)
06.{
07.return value+"kg";
08.}
09.},
10.splitArea : {show :true}
11.}
12.],
如果是X轴那么就是在xAxis内的axisLabel内的格式化方法formatter进行处理了的。效果图如下所示：
三、series内的label
也就是显示数据标签值得时候我们往往也需要对其数据进行格式化，比如我们想给数据值后面追加一个单位或者进行一个简单的计算。示例代码如下所示：
01.series : [
02.{
03.name:'蒸发量',
04.type:'bar',
05.data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
06.itemStyle:{
07.normal:{
08.label:{
09.show:true,
10.position:'top',
11.textStyle:{
12.fontSize:12,
13.color:"green"
14.},
15.formatter:function(a,b,c){
16.return c+"%";
17.}
18.}
19.}
20.}
21.
22.}]
效果如下所示：
关于更多地方需要使用格式化方法可以继续浏览更多精彩文章，同时也可以进入官网查看API文档。这里补充一下formatter格式化方法的参数说明：
{string}，模板(Template)，其变量为：
{a} | {a0}
{b} | {b0}
{c} | {c0}
{d} | {d0} (部分图表类型无此项)
多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中变量a、b、c在不同图表类型下代表数据含义为：
折线(区域)图、柱状(条形)图: a(系列名称)，b(类目值)，c(数值), d(无)
散点图(气泡)图 : a(系列名称)，b(数据名称)，c(数值数组), d(无)
饼图、雷达图 : a(系列名称)，b(数据项名称)，c(数值), d(百分比)
弦图 : a(系列名称)，b(项1名称)，c(项1-项2值)，d(项2名称)， e(项2-项1值)
力导向图 :
节点 : a(类目名称)，b(节点名称)，c(节点值)
边 : a(系列名称)，b(源名称-目标名称)，c(边权重)， d(如果为true的话则数据来源是边)
{Function}，传递参数列表如下：
params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]
ticket : 异步回调标识
callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html
自己多琢磨，多练习很容易就上手的！
highcharts图表中级入门之xAxis label：X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
highcharts图表中级入门：非histock图表的highcharts图表如何让图表产生滚动条
最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题,其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来.这 ...
可能是史上最强大的js图表库——ECharts带你入门
PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到
史上最强大的js图表库——ECharts带你入门(转)
出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...
echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom.
转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题(皮肤)Theme？
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
浅谈对ECharts的使用
上个月的项目,其中有一个模块用的是ECharts来实现的,分别用了折线图,环形图,还有漏斗图,这几个都算比较常见的了,尤其是折线图,环形图,用的最多的就是它们了.之前也没怎么接触过ECharts,实际 ...
大数据时代的图表可视化利器——highcharts,D3和百度的echarts
大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941 ...
Echarts的简单入门
5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体 ...
随机推荐
Effective C++ -----条款38：通过复合塑模出has-a或“根据某物实现出”
复合(composition)的意义和public继承完全不同. 在应用域(application domain),复合意味has-a(有一个).在实现域(implementation domain) ...
PHP:strpos()-返回字符串在另一个字符串中第一次出现的位置
strpos()函数返回字符串在另一个字符串中第一次出现的位置.如果没有找到该字符串,则返回false. 语法:strpos(sting, find [, start]) string ,必须,要搜索 ...
(转)Qt Model/View 学习笔记 (一)——Qt Model/View模式简介
Qt Model/View模式简介 Qt 4推出了一组新的item view类,它们使用model/view结构来管理数据与表示层的关系.这种结构带来的 功能上的分离给了开发人员更大的弹性来定制数据项 ...
HDU 4868 Information Extraction(2014 多校联合第一场 H)
看到这道题时我的内心是奔溃的,没有了解过HTML,只能靠窝的渣渣英语一点一点翻译啊TT. Information Extraction 题意:(纯手工翻译,有些用词可能在html中不是一样的,还多包涵 ...
Discuz论坛提速优化技巧
Discuz是国内最受站长们欢迎的建站源码之一,除了开源以外还有着很强大的后台,即便是没有建站基础和不懂代码的站长也能很快的架设出一个论坛,甚至是门户. 一个网站的加载速度除了影响你在搜索引擎里的排名 ...
js date 前一天
Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d ...
python之二分法查找
二分法查找主要的作用就是查找元素 规则. 掐头结尾取中间, 必须是有序列 # 二分法查找 (需要你明白和掌握) # lst = [1,3,5,7,12,36,68,79] # n = int(inpu ...
JavaScript高级程序设计学习(二)之基本概念
任何语言的核心都必然会描述这门语言基本的工作原理.而描述的内容通常都要涉及这门语 言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念.如前所述, ECMA-262通过叫做 ECMAS ...
12.15 Daily Scrum
Today's Task Tomorrow's Task 丁辛 实现和菜谱相关的餐厅列表. 实现和菜谱相关的餐厅列表. 邓亚梅 美化搜索框UI. 美 ...
JAVA实现具有迭代器的线性表(顺序表)
1,先了解下JAVA类库中的迭代器:JAVA提供了两种基本类型的迭代器,分别用两个接口来表示:Iterator,ListIterator.其中,Iterator&l ...
3919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
