450 lines
20 KiB
JavaScript
450 lines
20 KiB
JavaScript
/**
|
||
* 对Date的扩展，将 Date 转化为指定格式的String
|
||
* 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
|
||
* 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
|
||
* 例子：
|
||
* (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
|
||
* (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
|
||
* @param fmt 日期格式
|
||
*/
|
||
Date.prototype.format = function (fmt) {
|
||
var o = {
|
||
"M+": this.getMonth() + 1, //月份
|
||
"d+": this.getDate(), //日
|
||
"h+": this.getHours(), //小时
|
||
"m+": this.getMinutes(), //分
|
||
"s+": this.getSeconds(), //秒
|
||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||
"S": this.getMilliseconds() //毫秒
|
||
};
|
||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||
for (var k in o)
|
||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||
return fmt;
|
||
}
|
||
|
||
/**
|
||
* 字符串转换为日期对象
|
||
* @param dateStr Date 格式为yyyy-MM-dd HH:mm:ss，必须按年月日时分秒的顺序，中间分隔符不限制
|
||
*/
|
||
Date.prototype.strToDate = function (dateStr) {
|
||
var data = dateStr
|
||
var reCat = /(\d{1,4})/gm
|
||
var t = data.match(reCat)
|
||
t[1] = t[1] - 1
|
||
eval('var d = new Date(' + t.join(',') + ')')
|
||
return d
|
||
}
|
||
|
||
/**
|
||
* 获取日期列表，不传参默认当前时间为截止日期，去年的今天为起始日期
|
||
* @param dateStart 起始日期 格式为yyyy-MM-dd，必须按年月日的顺序，中间分隔符不限制
|
||
* @param dateEnd 截止日期 格式为yyyy-MM-dd，必须按年月日的顺序，中间分隔符不限制
|
||
*/
|
||
Date.prototype.getDateList = function (dateStart, dateEnd) {
|
||
try {
|
||
var date, diff, list = {}
|
||
// 缺一不可，缺任何一个都采取默认时间
|
||
if (!dateStart || !dateEnd) {
|
||
// 当前时间
|
||
date = new Date()
|
||
// 当前时间往前推一年
|
||
date.setFullYear(date.getFullYear() - 1)
|
||
// 如果去年的今天不是星期天的话，补充天数直到起始日期是星期天为止
|
||
while (date.getDay() > 0) {
|
||
date.setDate(date.getDate() - 1)
|
||
}
|
||
// 计算相差的天数
|
||
diff = parseInt((new Date().getTime() - date.getTime()) / (1000 * 60 * 60 * 24))
|
||
} else {
|
||
// 转换为日期对象
|
||
var start = this.strToDate(dateStart)
|
||
var end = this.strToDate(dateEnd)
|
||
// 补充天数直到起始日期是星期天为止
|
||
while (start.getDay() > 0) {
|
||
start.setDate(start.getDate() - 1)
|
||
}
|
||
// 计算相差的天数
|
||
diff = parseInt((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24))
|
||
date = start
|
||
}
|
||
// 实际上连最后一天也要算上，所以diff加2
|
||
for (i = 1; i < diff + 2; i++) {
|
||
list[date.format("yyyy-MM-dd")] = date.getDay()
|
||
date.setDate(date.getDate() + 1)
|
||
}
|
||
return list
|
||
} catch(e) {
|
||
return {}
|
||
}
|
||
}
|
||
|
||
var weekMap = ['周日','周一', '周二', '周三', '周四', '周五', '周六']
|
||
var monthMap = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
||
var colorMap = {
|
||
'blue': ['#003C9D', '#409EFF', '#87CEFA', '#E0FFFF', '#EBEDF0'],
|
||
'pink': ['#990099', '#CC00CC', '#FF88C2', '#FFB7DD', '#EBEDF0'],
|
||
'green': ['#196127', '#239A3B', '#7BC96F', '#C6E48B', '#EBEDF0'],
|
||
'orange': ['#A42D00', '#CC6600', '#EE7700', '#FFAA33', '#EBEDF0'],
|
||
'gray': ['#303133', '#444444', '#808080', '#C0C0C0', '#EBEDF0']
|
||
}
|
||
|
||
// 合并两个object，以mainObj为基准
|
||
function matchObj(mainObj, obj) {
|
||
var resultObj = {}
|
||
for (var key in mainObj) {
|
||
if (!obj.hasOwnProperty(key)) {
|
||
resultObj[key] = mainObj[key]
|
||
} else if (Object.prototype.toString.call(mainObj[key]) === '[Object Object]' && key !== 'data') {
|
||
resultObj[key] = matchObj(mainObj[key], obj[key])
|
||
} else {
|
||
resultObj[key] = obj[key]
|
||
}
|
||
}
|
||
return resultObj
|
||
}
|
||
|
||
function HeatMapDate() {
|
||
this.option = {
|
||
type: 'date', // 类型：date-日历型，custom-自定义型
|
||
xAxis: [], // 横坐标的label，type=custom起作用
|
||
yAxis: [], // 纵坐标的label，type=custom起作用
|
||
gap: 3, // 方格之间的间隔
|
||
/* 数据
|
||
* 如果type是date。那data是Object类型，格式是{ 'yyyy-MM-dd' : value }
|
||
* 如果type是custom。那data是Array类型，格式是[[x, y, value], ..., [x, y, value]]
|
||
*/
|
||
data: {},
|
||
rect: {
|
||
stroke: {
|
||
show: false,
|
||
background: '#333', // 正方形的边框颜色
|
||
opacity: 0.6 // 正方形的边框透明度
|
||
},
|
||
colourMatching: '', //配色方案，有custom-自定义和reen、pink、blue、orange、gray五种渐变色
|
||
backgroundArr: [] // 自定义配色方案，程度由重到轻
|
||
},
|
||
dateStart: '',
|
||
dateEnd: '',
|
||
min: 0, // 分级最低值，总共五个等级，不传默认值是0
|
||
max: 0, // 分级最高值，总共五个等级，不传默认值是
|
||
tip: { // 顶部鼠标悬浮小气泡
|
||
show: true, // 是否展示
|
||
/** 文本内容
|
||
* type为date的时候{a}表示日期，{b}表示数值
|
||
* type为custom的时候表示{x}x轴对应的值，{y}y轴对应的值，{b}表示数值
|
||
* 如果在替换字符串前加反斜杠(例如/{b})，则不会替换该字符串
|
||
*/
|
||
formatter: ''
|
||
}
|
||
}
|
||
|
||
// 初始化参数，没传的就使用默认值
|
||
this.setOption = (obj) => {
|
||
this.option = matchObj(this.option, obj)
|
||
if (!this.option.max) {
|
||
this.option.max = Object.values(obj.data).sort(function(a, b) {
|
||
return b - a
|
||
})[0] || 0
|
||
}
|
||
}
|
||
|
||
this.init = (dom) => {
|
||
// 初始化dom的样式
|
||
dom.setAttribute('style', 'width:170%;height:100%;position:relative;')
|
||
// 获取父级dom的宽度
|
||
var parentWidth = dom.offsetWidth
|
||
// 通过createElementNS创建svg元素并设置属性
|
||
var svg = document.createElementNS('http://www.w3.org/2000/svg','svg')
|
||
svg.setAttribute('version', '1.1')
|
||
svg.setAttribute('class', 'svg-container')
|
||
dom.appendChild(svg) // 挂载元素。SVG元素添加到页面内显示
|
||
|
||
// 显示顶部提示小气泡
|
||
if (this.option.tip.show) {
|
||
// 创建tip容器并设置属性
|
||
var tip = document.createElement('div')
|
||
tip.setAttribute('class', 'svg-tip svg-tip-one-line')
|
||
var title = document.createElement('strong')
|
||
tip.appendChild(title) // 挂载到父节点上
|
||
dom.appendChild(tip) // 挂载元素。挂载顶部提示气泡
|
||
}
|
||
|
||
// 创建svg的group元素并设置属性
|
||
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
||
var translateX = 20 // 横轴方向的偏移值
|
||
var translateY = 40 // 纵轴方向的偏移值
|
||
// var translateX = 10 // 横轴方向的偏移值
|
||
// var translateY = 20 // 纵轴方向的偏移值
|
||
group.setAttribute('transform', 'translate(' + translateX + ',' + translateY + ')')
|
||
svg.appendChild(group) // 挂载到父节点上
|
||
|
||
var maxYLabelFontSize = 12
|
||
var labelPadding = 10
|
||
var maxStrLength = 0
|
||
|
||
if (this.option.type === 'date') {
|
||
// 获取全部天数列表
|
||
var dateList = (new Date()).getDateList(this.option.dateStart, this.option.dateEnd)
|
||
var columnCount = Math.ceil(Object.keys(dateList).length / 7)
|
||
var size = Math.floor((parentWidth - translateX / 2 - maxYLabelFontSize * 2 - labelPadding - this.option.gap * columnCount) / columnCount)
|
||
var section = size + this.option.gap
|
||
|
||
// 纵轴的label值，这里是星期值
|
||
for (var w = 0; w < 7; w++) {
|
||
//创建矩形元素并设置属性
|
||
var yText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||
yText.style.fontSize = section * 0.7 > maxYLabelFontSize ? maxYLabelFontSize : section * 0.7 // 字体大小响应，最大是12px
|
||
yText.setAttribute('dx', -labelPadding)
|
||
yText.setAttribute('dy', w * section + size / 2 + 4)
|
||
yText.setAttribute('class', 'wday')
|
||
yText.innerHTML = weekMap[w]
|
||
group.appendChild(yText)
|
||
if (maxStrLength < yText.getBBox().width) {
|
||
maxStrLength = yText.getBBox().width
|
||
}
|
||
}
|
||
|
||
var index = 0 // 天数列表索引
|
||
var column = 0 // 分组索引，完整的一周为一组
|
||
for (var dateKey in dateList) {
|
||
// 完整的一周为一组
|
||
if (index === 0 || index % 7 === 0) {
|
||
// 创建svg的group元素并设置属性，一周为一组
|
||
var xGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
||
// 设置偏移值
|
||
xGroup.setAttribute('transform', 'translate(' + (column * section + maxStrLength) + ', 0)')
|
||
group.appendChild(xGroup) // 挂载到父节点
|
||
column++ // 递增组数索引
|
||
|
||
// 判断在哪个分组的上方增加横轴的label值，在这里是月份
|
||
if (index > 0) {
|
||
var startMonth = dateKey.split('-')[1]
|
||
var preStartMonth = Object.keys(dateList)[index - 7].split('-')[1]
|
||
|
||
if (Math.abs(Number(startMonth) - Number(preStartMonth)) > 0) {
|
||
//创建text元素并设置属性
|
||
var fontSize = section * 0.8 > maxYLabelFontSize ? maxYLabelFontSize : section * 0.8 // 字体大小响应，最大是14px
|
||
var xText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||
xText.style.fontSize = fontSize
|
||
xText.setAttribute('x', column * section)
|
||
xText.setAttribute('y', -labelPadding)
|
||
xText.setAttribute('class', 'month')
|
||
xText.innerHTML = monthMap[Number(startMonth) - 1]
|
||
group.appendChild(xText)
|
||
}
|
||
}
|
||
}
|
||
if(this.option.data.hasOwnProperty(dateKey)) {
|
||
// 开始画正方形啦~创建矩形元素并设置属性
|
||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
|
||
rect.setAttribute('x', 0)
|
||
rect.setAttribute('y', dateList[dateKey] * section)
|
||
rect.setAttribute('id', dateKey) // 设置日期为id值
|
||
rect.setAttribute('week', dateList[dateKey]) // 设置星期几属性
|
||
rect.setAttribute('column', column) // 设置分组的组索引属性
|
||
rect.setAttribute('width', size)
|
||
rect.setAttribute('height', size)
|
||
|
||
color = '#fff' // 默认颜色是白色，就是啥也没有时候的颜色，以你的背景色为准
|
||
var colorSelect = ''
|
||
// 选择的颜色系列
|
||
if (this.option.rect.colourMatching === 'custom') {
|
||
colorSelect = this.option.rect.backgroundArr
|
||
} else {
|
||
colorSelect = colorMap[this.option.rect.colourMatching]
|
||
}
|
||
// 默认绿色为基本配色方案
|
||
colorSelect = colorSelect ? colorSelect : colorMap['green']
|
||
// 分为五个等级，小于最小值最低等级，大于最大值最高等级。中间还应该有三个等级（可自定义）
|
||
var levelGap = (this.option.max - this.option.min) / (colorSelect.length - 2)
|
||
if (this.option.data.hasOwnProperty(dateKey)) {
|
||
var differ = this.option.max - this.option.data[dateKey]
|
||
// 小正方形的颜色决定于他的值处在哪个level里头
|
||
switch(true) {
|
||
case (this.option.data[dateKey] >= this.option.max) :
|
||
color = colorSelect[0]
|
||
break
|
||
case (differ < levelGap) :
|
||
color = colorSelect[1]
|
||
break
|
||
case (differ < levelGap * 2) :
|
||
color = colorSelect[2]
|
||
break
|
||
case (differ < levelGap * 3) :
|
||
color = colorSelect[3]
|
||
break
|
||
default:
|
||
color = colorSelect[4]
|
||
}
|
||
// 设置小矩形的颜色
|
||
rect.setAttribute('style', 'fill:' + color)
|
||
|
||
// 显示顶部提示小气泡
|
||
if (this.option.tip.show) {
|
||
//矩形元素绑定鼠标事件实现动态效果
|
||
// 鼠标移入
|
||
rect.onmouseover = (e) => {
|
||
if (this.option.rect.stroke.show) {
|
||
e.srcElement.setAttribute('stroke-width', 1)
|
||
e.srcElement.setAttribute('stroke', this.option.rect.stroke.background)
|
||
e.srcElement.setAttribute('stroke-opacity', this.option.rect.stroke.opacity)
|
||
}
|
||
|
||
|
||
// 提示小气泡的文本内容,默认==>日期：值
|
||
if (this.option.tip.formatter) {
|
||
var tipText = this.option.tip.formatter.replace(/(?<!\/){a}/g, e.target.id).replace(/(?<!\/){b}/g, this.option.data[e.target.id])
|
||
tip.innerHTML = tipText
|
||
} else {
|
||
tip.innerHTML = e.target.id + '：' + this.option.data[e.target.id]
|
||
}
|
||
tip.style.display = 'block'
|
||
tip.style.top = (e.target.attributes.week.value * section + dom.querySelector('.svg-tip').offsetHeight / 2 - translateY / 2 - labelPadding) + 'px'
|
||
tip.style.left = ((e.target.attributes.column.value - 1) * section + size / 2 + translateX / 2 + maxStrLength + labelPadding - dom.querySelector('.svg-tip').offsetWidth / 2) + 'px'
|
||
}
|
||
// 鼠标移出
|
||
rect.onmouseout = (e) => {
|
||
if (this.option.rect.stroke.show) {
|
||
e.srcElement.setAttribute('stroke-width', 0)
|
||
}
|
||
tip.style.display = 'none'
|
||
}
|
||
}
|
||
}
|
||
xGroup.appendChild(rect) //挂载矩形元素添加到小分组元素内
|
||
}
|
||
index++
|
||
}
|
||
|
||
// 设置svg元素的宽高
|
||
svg.style.width = section * columnCount + translateX / 2 + maxStrLength + labelPadding
|
||
svg.style.height = section * 7 + translateY
|
||
}
|
||
|
||
if (this.option.type === 'custom') {
|
||
var size = parseInt(parentWidth / this.option.xAxis.length) - this.option.gap * this.option.xAxis.length
|
||
var section = size + this.option.gap
|
||
var fontSize = section * 0.7 > maxYLabelFontSize ? maxYLabelFontSize : section * 0.7 // 字体大小响应，最大是12px
|
||
|
||
this.option.xAxis.forEach((xItem,xIndex) => {
|
||
var xGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
||
group.appendChild(xGroup)
|
||
|
||
this.option.yAxis.forEach((yItem,yIndex) => {
|
||
if (xIndex === 0) {
|
||
//创建矩形元素并设置属性
|
||
var yText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||
yText.style.fontSize = fontSize
|
||
yText.setAttribute('dx', -labelPadding)
|
||
yText.setAttribute('dy', yIndex * section + size / 2 + 4)
|
||
yText.setAttribute('class', 'wday')
|
||
yText.innerHTML = yItem
|
||
group.appendChild(yText)
|
||
if (maxStrLength < yText.getBBox().width) {
|
||
maxStrLength = yText.getBBox().width
|
||
}
|
||
}
|
||
|
||
this.option.data.some((elem, i) => {
|
||
if (elem[0] === xIndex && elem[1] === yIndex) {
|
||
color = 'rgb(255, 255, 255)' // 默认颜色是白色，就是啥也没有时候的颜色，以你的背景色为准
|
||
var colorSelect = ''
|
||
// 选择的颜色系列
|
||
if (this.option.rect.colourMatching === 'custom') {
|
||
colorSelect = this.option.rect.backgroundArr
|
||
} else {
|
||
colorSelect = colorMap[this.option.rect.colourMatching]
|
||
}
|
||
// 默认绿色为基本配色方案
|
||
colorSelect = colorSelect ? colorSelect : colorMap['green']
|
||
// 分为五个等级，小于最小值最低等级，大于最大值最高等级。中间还应该有三个等级（可自定义）
|
||
var levelGap = (this.option.max - this.option.min) / (colorSelect.length - 2)
|
||
var differ = this.option.max - elem[2]
|
||
// 小正方形的颜色决定于他的值处在哪个level里头
|
||
switch(true) {
|
||
case (elem[2] >= this.option.max) :
|
||
color = colorSelect[0]
|
||
break
|
||
case (differ < levelGap) :
|
||
color = colorSelect[1]
|
||
break
|
||
case (differ < levelGap * 2) :
|
||
color = colorSelect[2]
|
||
break
|
||
case (differ < levelGap * 3) :
|
||
color = colorSelect[3]
|
||
break
|
||
default:
|
||
color = colorSelect[4]
|
||
}
|
||
|
||
//创建矩形元素并设置属性
|
||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
|
||
rect.setAttribute('x', 0)
|
||
rect.setAttribute('y', elem[1] * section)
|
||
rect.setAttribute('id', elem[0] + '_' + elem[1]) // 设置日期为id值
|
||
rect.setAttribute('row', yIndex)
|
||
rect.setAttribute('column', xIndex)
|
||
rect.setAttribute('width', size)
|
||
rect.setAttribute('height', size)
|
||
rect.setAttribute('style', 'fill:' + color)
|
||
|
||
// 显示顶部提示小气泡
|
||
if (this.option.tip.show) {
|
||
//矩形元素绑定鼠标事件实现动态效果
|
||
// 鼠标移入
|
||
rect.onmouseover = (e) => {
|
||
if (this.option.rect.stroke.show) {
|
||
e.srcElement.setAttribute('stroke-width', 1)
|
||
e.srcElement.setAttribute('stroke', this.option.rect.stroke.background)
|
||
e.srcElement.setAttribute('stroke-opacity', this.option.rect.stroke.opacity)
|
||
}
|
||
|
||
var xyArr = e.target.id.split('_')
|
||
// 提示小气泡的文本内容,默认==>x_y：值
|
||
if (this.option.tip.formatter) {
|
||
var tipText = this.option.tip.formatter.replace(/(?<!\/){x}/g, this.option.xAxis[xyArr[0]]).replace(/(?<!\/){y}/g, this.option.yAxis[xyArr[1]]).replace(/(?<!\/){b}/g, elem[2])
|
||
tip.innerHTML = tipText
|
||
} else {
|
||
tip.innerHTML = e.target.id + '：' + elem[2]
|
||
}
|
||
tip.style.display = 'block'
|
||
tip.style.top = (e.target.attributes.row.value * section + dom.querySelector('.svg-tip').offsetHeight / 2 - translateY / 2 - labelPadding) + 'px'
|
||
tip.style.left = (e.target.attributes.column.value * section + size / 2 + translateX / 2 + maxStrLength + labelPadding - dom.querySelector('.svg-tip').offsetWidth / 2) + 'px'
|
||
}
|
||
// 鼠标移出
|
||
rect.onmouseout = (e) => {
|
||
if (this.option.rect.stroke.show) {
|
||
e.srcElement.setAttribute('stroke-width', 0)
|
||
}
|
||
tip.style.display = 'none'
|
||
}
|
||
}
|
||
//将矩形元素添加到SVG元素内
|
||
xGroup.appendChild(rect)
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
})
|
||
|
||
xGroup.setAttribute('transform', 'translate(' + (xIndex * section + maxStrLength) + ', 0)')
|
||
|
||
//创建text元素并设置属性
|
||
var xText = document.createElementNS('http://www.w3.org/2000/svg', 'text')
|
||
xText.style.fontSize = fontSize
|
||
xText.setAttribute('x', xIndex * section + maxStrLength)
|
||
xText.setAttribute('y', -labelPadding)
|
||
xText.setAttribute('class', 'month')
|
||
xText.innerHTML = xItem
|
||
group.appendChild(xText)
|
||
xText.setAttribute('textLength', size < xText.getBBox().width ? size : xText.getBBox().width)
|
||
})
|
||
// 设置svg元素的宽高
|
||
svg.style.width = section * this.option.xAxis.length + translateX / 2 + labelPadding + maxStrLength
|
||
svg.style.height = section * this.option.yAxis.length + translateY
|
||
}
|
||
}
|
||
} |