echarts数据格式化处理

在使用echarts做图表时，通常我们希望实现以下效果：1、选中某些数据点信息的时候，添加其它辅助信息，比如单位（℃）；2、当横轴数据为时间，且为类似的格式：2015/7/17 17:27:36，长度太长。如果希望显示数据信息的时候，显示该格式，而在坐标轴上显示时，只显示部分信息。

上述这些牵扯到echarts的数据格式化问题--内容格式器（formatter）

1. 对于第一个问题：可以进行如下简单设置（适用于一组数据，生成一条曲线），实现在数值后面添加s

formatter中：

b -- 类目名（可以理解为x轴信息）

a--系列名字（理解为y轴对应的name属性）

c--数值（理解为y轴对应的数据）

tooltip:

{
trigger: 'axis',
formatter: '{b} <br/>{a}:{c}s'
},

如果为多组数据，生成多条曲线：

formatter:function(a)
{
var relVal = "";
relVal = a[0]+"°C<br/>";
relVal += a[1]+"°C";
return relVal;
}

2. 对于第二个问题

很简单，在相应坐标轴的axisLabel中设置 formatter

比如：源数据格式为：2015/7/17 17:27:36 现在只取小时和分钟，17:27。

axisLabel : {
formatter: function(category)
{
return category.substring(11,16);
}
}

echarts数据格式化处理相关推荐

echarts代码格式化_echarts水球图格式化Format使用
上周有一个需求,echarts的水球图要做展示,因为后台数据有可能值会返回'-' ,所以需要动态展示,首先返回值会有四个,分别表示本周/本月百分率以及本周/本月具体数值所以,产品提了一个需求当后端接口 ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis）
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWei ...
Echarts数据可视化polar极坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化parallel平行坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化legend图例，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化全解注释
全栈工程师开发手册 (作者:栾鹏) github地址:https://github.com/626626cdllp/echarts Echarts数据可视化开发代码注释全解 Echarts数据可视化开 ...
echarts 数据区域缩放
echarts 数据区域缩放官方文档:Documentation - Apache ECharts ********************* 配置属性 **************** 内置型组件 ...
Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...

echarts数据格式化处理

echarts数据格式化处理相关推荐

最新文章

热门文章