Echarts使用感悟

同步于我的网站

文章目录

Echarts使用感悟
- 1、前言
- 2、开发过程
- - 2.1 找到样例
  - 2.2 二次开发
- 3、成果展示

1、前言

最开始想在网站上建立一个类似github提交记录的图表，但是我想要的功能和他不一样。希望横坐标是日期，纵坐标是时间，图表类型是散点图，这样可以清晰的看出哪天哪个时间段有提交，并且点击之后由可显示内容。
由于之前没有前端开发经验，在网上查找到ECHARTS这个基于JavaScript的数据可视化图表库。里面有很多例子可以用，也非常漂亮。

2、开发过程

2.1 找到样例

大概看了所有的样例，最后选中Punch Card of Github，此项符合大致符合预期的想法。
与预期存在的不同:

X轴的内容不一样，希望是日期，并随当前日期推动增加
Y轴不同，希望是具体的时间，如18:30
提示不一样，原只能提示固定语句+横纵坐标，希望提示该点代表的内容
散点图中点为原点，大小根据Z值来设定，希望是条状最好能够从事件发生时间到结束时间，方便查看是哪个时间段发生的
由于X轴是日期，并且动态，希望下方有一个日期缩放比例尺，可以动态操作显示。
基于以上的内容，也就是基本功能要求进行开发。

2.2 二次开发

首先从官方下载样例，运行成功。
找到官方的开发文档查阅细节问题，进一步修改。ECHARTS API

开发要点:

Y轴数据:此项数据是固定的，通过JavaScript生成

function Ylabledata() {var mydataY = [];for (var i=5;i<24;i++){ var str_i;if (i<10) {str_i = '0'+i.toString();}else{str_i = i.toString();}for (var j=0;j<60;j++){ var str_j;if (j<10) {str_j = '0'+j.toString();}else{str_j = j.toString();}mydataY.push(str_i+':'+str_j);}}mydataY.push('24:00');return mydataY;
};
const YTime = Ylabledata();

X轴数据:此项数据动态，先获取当前时间，然后从固定时间开始计算动态Y轴数据。

function Xlabledata() {var mydataX = [];var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();for (var i = 2022; i <= year; i++) {var Dyear = i.toString();if (i == year){var monthflag = month;}else{var monthflag = 12;}for (var j = 1; j <= monthflag; j++) {// 下一年怎么打印存在问题if(i==2022)j = 3;if (j<10) {var Dmonth ='0' + j.toString();}else{  var Dmonth = j.toString();}for (var k = 1; k <= 31; k++) {if (k<10) {var DDay ='0' + k.toString();}else{  var DDay = k.toString();}mydataX.push(Dyear+'-'+Dmonth+'-'+DDay);console.log(Dyear+'-'+Dmonth+'-'+DDay);}}  }return mydataX;
};
const XDates = Xlabledata();

散点位置: 此项是根据数据库中提交的具体时间如2022-3-23 22:33来进行编码获取在图表中的位置，将所有的编码在后台实现发送到前端。
其他点位置提示，内容显示主要在API中tooltip中的formatter来进行设置
下方的日期缩放轴通过官方提供的样例更改dataZoom

dataZoom: [{textStyle: {color: '#8392A5'},handleIcon:'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',dataBackground: {areaStyle: {color: '#8392A5'},lineStyle: {opacity: 0.8,color: '#8392A5'}},brushSelect: true},{type: 'inside'}]

3、成果展示

可以在我的网站中查看

Echarts使用感悟相关推荐

pyc php js echarts css 数据挖掘感悟 2016.05.24回顾
昨天做的工作和学的东西都很多很宽泛,节奏不能乱,需要好好总结,每一个知识点,繁杂的事物中理清头绪. 我views.py会import一个A.py,我修改A.py直接覆盖掉不重启服务,没生效,还是跑的以 ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
蚂蚁金服高级前端专家，我做前端这 10 多年来的感悟
以下文章来源于微信公众号:前端早早聊 ,作者沉鱼沉鱼毕业于浙江大学,2008 年的时候加入了阿里集团,之后又入职了蚂蚁集团.她先后作为 Node Web 框架 -- Chair 的核心开发.Base ...
最好用的图表工具 -- ECharts
首先比较下目前比较流行的几款图表库: highcharts文档详细易懂,上手快捷,但highcharts依赖于jQuery库,而且Highcharts对个人免费但对企业收费 d3.js更自由些,更容易 ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...

Echarts使用感悟

Echarts使用感悟

文章目录

1、前言

2、开发过程

2.1 找到样例

2.2 二次开发

3、成果展示

Echarts使用感悟相关推荐

最新文章

热门文章