百度ECharts图表Y轴的科学计数法的渲染问题(自定义formatter)

分类:应用接口| 发布:佚名| 查看: | 发表时间:2014/8/29

ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图等11类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

可能还要涉及到科学计数法的渲染问题。

比如 2000 是渲染成 2e3 还是渲染成 2*10^3 ,或者 2*103,或者直接显示2000

如图:

解决方法:数据渲染可以通过自定义formatter,代码如下:

option = {
   grid: { // 关于此配置项的说明,见下边的备注说明
   width: '700px',
   height: '200px', x: 80, y: 20, x2: 0, y2: 0
},
tooltip : {
   trigger: 'axis'
},
calculable : false,
xAxis : [
{
   type : 'category',
   boundaryGap : false,
   data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
   type : 'value',
   axisLabel : {
      formatter: function(v){
         return (v/1000)+'千'
      }
   }
}
],
series : [
{
   name:'郑州网建',
   type:'line',
   data:[11, 1158, 15, 123233, 12, 12333, 320]
},
{
   name:'Camnpr',
   type:'line',
   data:[1, -2, 2, 5, 3, 2, 0]
}
]
};

效果如下:

备注:关于grid选项里的:width,height,x,y,x2,y2的说明,关乎样式问题:
ECharts grid样式
365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/api/1621.html