ECharts使用心得

简介:

ECharts百度旗下图标插件,在展示地图、雷达图等方面有很好的支持。

 

应用场景:

自动生成X轴的数据:


设置:xAxis的type=value || type=time 并且设置series的data为二维数组,第一位是X轴的值,第二位是Y轴的值,
例如:

1
2
3
4
5
6
series: [
         {
             //...
             data: [[1456329600000,2314.24],[1456502400000,2030]]
         }
]

echarts支持2种时间格式:

  ①、一种是中国的时间例如:“2016-10-10 10-10-10”;

  ②、另一种支持时间戳,精确到微秒(13位时间戳)。

 

常用方法

一、格式化时间格式:

1
echarts.format.formatTime( 'yyyy-MM-dd' new  Date());

二、格式化X轴数据格式代码:

1
2
3
4
5
6
7
8
9
xAxis: {
     //…
     axisLabel:{
         formatter: function  (value)
         {
             return  echarts.format.formatTime( 'MM-dd' new  Date(value));
         }
     }
}

 




本文转自王磊的博客博客园博客,原文链接:http://www.cnblogs.com/vipstone/p/5318615.html,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
数据可视化 JavaScript 搜索推荐
ECharts入门了解及使用
ECharts入门了解及使用
28 0
|
1月前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
42 3
|
1月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
34 1
|
3月前
|
JavaScript 前端开发
Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验
15 0
|
3月前
|
JavaScript
Vue 学习记录,从难受到真香
Vue 学习记录,从难受到真香
16 2
|
5月前
|
JavaScript 前端开发 CDN
echarts入门
echarts入门
28 0
|
5月前
|
JSON 前端开发 JavaScript
从零开始学习React-五分钟上手Echarts折线图(十)
从零开始学习React-五分钟上手Echarts折线图(十)
66 0
|
5月前
echarts统计图踩坑合集
echarts统计图踩坑合集
31 0
|
7月前
|
JSON 数据格式
Echarts笔记
之前在后台已经把数据全部获取好了,也封装位Json格式,但是到前台饼图上却无法显示,原因是传到页面的是一个List集合,无法一个一个的分配给相应的模块(柱形图可以自动显示),最后在前台进行遍历,就能显示了。
43 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts折线图实现2
前端学习笔记202305学习笔记第二十二天-echarts折线图实现2
50 0