ECharts官方教程(十一)【小例子:实现日历图】
来源:互联网 发布:语音朗读软件 编辑:程序博客网 时间:2024/06/04 23:36
小例子:实现日历图
在ECharts中,我们新增了日历坐标系,如何快速写出一个日历图呢?
<iframe src="http://echarts.baidu.com/gallery/view.html?c=calendar-simple&edit=1&reset=1" width="800" height="300"></iframe>通过以下三个步骤即可实现上述效果:
第一步:引入js文件
下载的最新完整版本echarts.min.js即可,无需再单独引入其他文件哦
<script src="echarts.min.js"></script><script> // ...</script>
第二步:指定DOM元素作为图表容器
和ECharts中的其他图表一样,创建一个DOM来作为绘制图表的容器
<div id="main" style="width=100%; height = 400px"></div>
使用ECharts进行初始化
var myChart = echarts.init(document.getElementById('main'));
第三步:配置参数
以常见的日历图为例: calendar坐标 + heatmap图
var option = { visualMap: { show: false min: 0, max: 1000 }, calendar: { range: '2017' }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...] }}myChart.setOption(option);
在heatmap图的基础上,加上coordinateSystem: 'calendar'
,和calendar: { range: '2017' }
heatmap图就秒变为日历图了。
若发现图表没有正确显示,你可以检查以下几种可能:
- JS文件是否正确加载;
-echarts
变量是否存在;
- 控制台是否报错;
- DOM 元素在echarts.init
的时候是否有高度和宽度。
- 若为type: heatmap
,检查是否配置了visualMap
。
附完整示例代码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <script src="echarts.min.js"></script></head><body> <div id="main" style="width:100%;height:400px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 模拟数据 function getVirtulData(year) { year = year || '2017'; var date = +echarts.number.parseDate(year + '-01-01'); var end = +echarts.number.parseDate(year + '-12-31'); var dayTime = 3600 * 24 * 1000; var data = []; for (var time = date; time <= end; time += dayTime) { data.push([ echarts.format.formatTime('yyyy-MM-dd', time), Math.floor(Math.random() * 10000) ]); } return data; } var option = { visualMap: { show: false, min: 0, max: 10000 }, calendar: { range: '2017' }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: getVirtulData(2017) } }; myChart.setOption(option); </script></body></html>
以上就是绘制最简日历图的步骤了,如若还想进一步私人定制,还可以通过自定义配置参数来实现
自定义配置参数
使用日历坐标绘制日历图时,支持自定义各项属性:
range: 设置时间的范围,可支持某年、某月、某天,还可支持跨年cellSize: 设置日历格的大小,可支持设置不同高宽,还可支持自适应autowidth、height: 也可以直接设置改日历图的整体高宽,让其基于已有的高宽全部自适应orient: 设置坐标的方向,既可以横着也可以竖着splitLine: 设置分隔线样式,也可以直接不显示itemStyle: 设置日历格的样式,背景色、方框线颜色大小类型、透明度均可自定义,甚至还能加阴影dayLabel: 设置坐标中 星期样式,可以设置星期从第几天开始,快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;monthLabel: 设置坐标中 月样式,和星期一样,可快捷设置中英文和自定义混搭yearLabel: 设置坐标中 年样式,默认显示一年,通过formatter 文字可以想显示什么就能通过string function任性自定义,上下左右方位随便选;
完整的配置项参数参见:calendar API
日历坐标系的其他形式
日历坐标系是一种新的 ECharts
坐标系,提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外,我们可以在热力图、散点图、关系图中使用日历坐标系。
在日历坐标系中使用热力图:
<iframe src="http://echarts.baidu.com/gallery/view.html?c=calendar-heatmap&edit=1&reset=1" width="800" height="300"></iframe>在日历坐标系中使用散点图:
<iframe src="http://echarts.baidu.com/gallery/view.html?c=calendar-effectscatter&edit=1&reset=1" width="800" height="600"></iframe>还可以混合放置不同的图表,例如下例子,同时放置了热力图和关系图:
<iframe src="http://echarts.baidu.com/gallery/view.html?c=calendar-graph&edit=1&reset=1" width="800" height="600"></iframe>其他更丰富的效果
灵活利用 ECharts 图表和坐标系的组合,以及 API,还可以实现更丰富的效果。
例如,制作农历:
<iframe src="http://echarts.baidu.com/gallery/view.html?c=calendar-lunar&edit=1&reset=1" width="600" height="500"></iframe>例如,使用 chart.convertToPixel
接口,在日历坐标系绘制饼图。
- ECharts官方教程(十一)【小例子:实现日历图】
- ECharts官方教程(十)【小例子:自己实现拖拽】
- echarts的小例子
- Echarts小例子
- Echarts的小例子
- echarts-日历图
- ECharts官方教程(二)【自定义构建 ECharts】
- echarts数据缩放小例子
- ECharts官方教程(一)【5分钟上手ECharts】
- ECharts官方教程(三)【在webpack中使用 ECharts】
- ECharts官方教程(九)【ECharts中的事件和行为】
- ECharts官方教程(七)【移动端自适应】
- ECharts官方教程(十二)【自定义系列】
- ECharts官方教程(十三)【富文本标签】
- js 实现小日历
- Django官方教程(十一)【接下来如何学习?】
- 小波变换教程(十一)
- 小波变换教程(十一)
- ECharts官方教程(九)【ECharts中的事件和行为】
- ECharts官方教程(十)【小例子:自己实现拖拽】
- SSL双向认证下提升用户友好性的两例
- LeetCode#62. Unique Paths
- Rust : ? 操作符(待续)
- ECharts官方教程(十一)【小例子:实现日历图】
- ECharts官方教程(十二)【自定义系列】
- D3D11和D3D12多线程渲染框架的比较(五)
- 如何让DIV变成默认高度,如果内容过长自动加长
- ECharts官方教程(十三)【富文本标签】
- IDW
- 代理模式--动态代理 cglic
- 一起Talk Android吧(第五十四回:Android中的Fragment显示与隐藏一)
- 第1章 Nginx初探