echarts｜LOFTER（乐乎） - 记录生活，发现同好
LOFTER for ipad —— 记录生活，发现同好
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{if !!photo.labels && photo.labels.length>0}
{var wrapwidth = photo.ow < 500?photo.ow:500}
{list photo.labels as labs}
{var lbtxtwidth = Math.floor(wrapwidth*(labs.ort==1?labs.x:(100-labs.x))/100)-62}
{if lbtxtwidth>12}
{if !!labs.icon}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
this.p={ currentPage:1,pageNewMode:true,isgooglead3:false,ishotrecompost:false,visitorId:0, first:'',tag:'echarts',recommType:'new',recommenderRole:0,offset:10,type:0,isUserEditor:0,};8707人阅读
echart（5）
[摘要]： 格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！ 一、tooltip 图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。 比如需要将当前数据点的值后面追加一个单位字符串，示例代码如下所示： tooltip : { trigger: ‘axis’, formatter:function(a) { var relVal = “”; …
格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！
一、tooltip
图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。
比如需要将当前数据点的值后面追加一个单位字符串，示例代码如下所示：
view sourceprint?
tooltip : {
trigger: ‘axis’,
formatter:function(a)
var relVal = “”;
relVal = a[0]+”°C”;
relVal += a[1]+”°C”;
return relV
效果图如下所示：
tooltip内的格式化方法示例效果图
如果不太了解formatter方法内的参数，可以在function内设置debugger加入断点调试浏览数据结构。
二、axisLabel
坐标轴刻度上面的刻度格式化，比如一个很简单的例子，Y轴表示人的体重，我们往往需要在每一个刻度值后面带上kg的单位，我们应该如何进行刻度的格式化呢？
格式化Y轴刻度的示例代码如下：
view sourceprint?
type : ‘value’,
axisLabel : {
formatter: function(value)
return value+”kg”;
splitArea : {show : true}
如果是X轴那么就是在xAxis内的axisLabel内的格式化方法formatter进行处理了的。效果图如下所示：
axis坐标刻度格式化效果图
三、series内的label
也就是显示数据标签值得时候我们往往也需要对其数据进行格式化，比如我们想给数据值后面追加一个单位或者进行一个简单的计算。示例代码如下所示：
view sourceprint?
series : [
name:’蒸发量’,
type:’bar’,
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],
itemStyle:{
show:true,
position:’top’,
textStyle:{
fontSize:12,
color:”green”
formatter:function(a,b,c){
return c+”%”;
效果如下所示：
series序列内数据值格式化效果图
关于更多地方需要使用格式化方法可以继续浏览更多精彩文章，同时也可以进入官网查看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
自己多琢磨，多练习很容易就上手的！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：104164次
积分：1206
积分：1206
排名：千里之外
原创：17篇
转载：72篇
(1)(2)(1)(11)(27)(12)(2)(2)(1)(1)(1)(1)(12)(1)(1)(6)(7)option = {
tooltip : {
trigger: 'axis'
data:['蒸发量','降水量','最低气温','最高气温']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
type : 'category',
position: 'bottom',
boundaryGap: true,
axisLine : {
show: true,
lineStyle: {
color: 'green',
type: 'solid',
axisTick : {
show:true,
length: 10,
lineStyle: {
color: 'red',
type: 'solid',
axisLabel : {
show:true,
interval: 'auto',
// {number}
rotate: 45,
margin: 8,
formatter: '{value}月',
textStyle: {
color: 'blue',
fontFamily: 'sans-serif',
fontSize: 15,
fontStyle: 'italic',
fontWeight: 'bold'
splitLine : {
show:true,
lineStyle: {
color: '#483d8b',
type: 'dashed',
splitArea : {
show: true,
areaStyle:{
color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
'1','2','3','4','5',
value:'6',
textStyle: {
color: 'red',
fontSize: 30,
fontStyle: 'normal',
fontWeight: 'bold'
'7','8','9','10','11','12'
type : 'category',
data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
type : 'value',
position: 'left',
//max: 300,
//splitNumber: 5,
boundaryGap: [0,0.1],
axisLine : {
show: true,
lineStyle: {
color: 'red',
type: 'dashed',
axisTick : {
show:true,
length: 10,
lineStyle: {
color: 'green',
type: 'solid',
axisLabel : {
show:true,
interval: 'auto',
// {number}
rotate: -45,
margin: 18,
formatter: '{value} ml',
// Template formatter!
textStyle: {
color: '#1e90ff',
fontFamily: 'verdana',
fontSize: 10,
fontStyle: 'normal',
fontWeight: 'bold'
splitLine : {
show:true,
lineStyle: {
color: '#483d8b',
type: 'dotted',
splitArea : {
show: true,
areaStyle:{
color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']
type : 'value',
splitNumber: 10,
axisLabel : {
formatter: function (value) {
// Function formatter
return value + ' °C'
splitLine : {
show: false
series : [
name: '蒸发量',
type: 'bar',
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]
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
name:'最低气温',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
name:'最高气温',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]echarts的使用及相关实例_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
echarts的使用及相关实例
上传于||文档简介
&&学&#8203;习&#8203;e&#8203;c&#8203;h&#8203;a&#8203;r&#8203;t&#8203;s&#8203;的&#8203;同&#8203;学&#8203;可&#8203;以&#8203;看&#8203;一&#8203;下
你可能喜欢ECharts 2.2.0 发布，移动优化
#ECharts 2.2.0#发布，累计近50项反馈修复和升级，大量移动设备性能和用户体验优化。基于2.2.0，ECharts第一个官方分支版本ECharts Mobile（ECharts-m）1.0.0发布，让数据在指尖上舞动，扫码体验。
修改记录 [+]新增 [-]删除 [^]升级 [#]修复 【】重要【+】 ECharts-m ( ECharts Mobile ) 1.0.0 发布【^】 层叠控制由多层zlevel转单层z，zleve和z主题可控，可自定义层叠控制【^】 mobile设备优化，touch事件优化【^】 [markLine]支持双向弧度配置，smoothRadian，查看 【^】 统一文本（label）格式化（formatter）函数回调参数为对象，披露更多内容，格式同tooltip[+] 无数据自动判断，支持配置noDataText和noDataEffect自动显示，support [+] [tooltip]详情dom上增加css类定义'echarts-tooltip'，可通过css附加样式[+] 新增过渡动画时效控制animationDurationUpdate，support [+] [markPoint]支持symbol为pin特效，新增跳动效果，effect.type = 'bounce'，详见文档[+] [k]新增hoverable控制[^] [markLine]均值标线支持precision[^] [dataZoom]纵向dataZoom交互一致性优化，support [^] [categoryAxis]间隔支持函数回调，support [^] [dataRange][dataZoom][timeline]增加组件大小配置[^] [extension][BMap]增加百度地图初始化参数传入，修复动态addMark坐标转换问题。[^] [pie]图形内文本位置增加distance配置，support [^] [chord][tooltip]详情显示默认从大端到小端[#] 修复legendHoverLink在动画过渡时显示问题，fix ，[#] [scatter][radar][k]data级数据为对象时读取value异常，fix [#] [force]修复line宽度设置[#] [bar]多维度堆积下类目间隔优化[#] [tooltip][markLine]修复多级控制无效[#] [valueAxis]数值间隔自动调整算法优化，fix ,&
[#] 若干issues，fix
&& && [?] 依赖升级， 2.0.7+
本文来源:开源中国社区
如果您喜欢本文请分享给您的好友，谢谢！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）