ECharts使用心得

简介: ECharts百度旗下图标插件,在展示地图、雷达图等方面有很好的支持。   应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的data为二维数组,第一位是X轴的值,第二位是Y轴的值,例如: series: [ { //.

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

 

应用场景:

自动生成X轴的数据:


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

series: [
        {
            //...
            data: [[1456329600000,2314.24],[1456502400000,2030]]
        }
]

echarts支持2种时间格式:

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

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

 

常用方法

一、格式化时间格式:

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

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

xAxis: {
    //…
    axisLabel:{
        formatter:function (value)
        {
            return echarts.format.formatTime('MM-dd', new Date(value));
        }
    }
}    

 

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
19天前
|
JSON JavaScript 前端开发
Highcharts 教程
Highcharts 教程
23 2
|
7月前
|
资源调度 JavaScript 开发者
【热门话题】ElementUI 快速入门指南
ElementUI 是基于 Vue 2.0 的桌面端组件库,提供丰富的 UI 组件,助力快速构建美观应用。本文为初学者提供快速入门教程:确保安装 Node.js 和 Vue CLI,使用 Vue CLI 创建项目,通过 `npm` 或 `yarn` 安装 ElementUI。在 `main.js` 引入并使用,直接在组件中使用按钮、表单、表格和对话框等组件。此外,还介绍了自定义主题的方法。深入了解官方文档和社区资源,提升开发效率。开始愉快地使用 ElementUI 吧!
92 2
|
7月前
|
数据采集 数据可视化 小程序
vue3+echarts可视化——记录我的2023编程之旅
vue3+echarts可视化——记录我的2023编程之旅
112 1
|
7月前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
151 1
|
前端开发 JavaScript API
React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
Ehcarts 作为数据展示的组件,应用场景丰富,所以在 React 里引入 Echarts 图表是每个前端必会技能。而 Echarts配置项多且复杂,每个配置项都会细分很多个配置小项,并且还对外暴露了一套 API,包括图表实例,事件监听等,还是有一定的上手难度。本文手把手教大家如何在 React 里使用 Echarts,并结合实际使用场景,分享我是如何处理图表自适应等具体问题。 最后来一个实战教学,教大家如何结合 ant-design React UI 框架,开发企业级的「数字币走势数据看板」,帮助大家加深对 Echarts 的理解。
|
JSON 前端开发 JavaScript
从零开始学习React-五分钟上手Echarts折线图(十)
从零开始学习React-五分钟上手Echarts折线图(十)
187 0
|
JSON 数据格式
Echarts笔记
之前在后台已经把数据全部获取好了,也封装位Json格式,但是到前台饼图上却无法显示,原因是传到页面的是一个List集合,无法一个一个的分配给相应的模块(柱形图可以自动显示),最后在前台进行遍历,就能显示了。
68 0
|
Web App开发 移动开发 数据可视化
学习echarts入门
学习echarts入门
125 0
|
JavaScript
【Vue 开发实战】实战篇 # 34:如何在组件中使用ECharts、Antv等其他第三方库
【Vue 开发实战】实战篇 # 34:如何在组件中使用ECharts、Antv等其他第三方库
229 0
【Vue 开发实战】实战篇 # 34:如何在组件中使用ECharts、Antv等其他第三方库
|
移动开发 JavaScript 前端开发
Three.js 入门指南
Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。
581 0
Three.js 入门指南