项目中需要一个简单的折线图，引入echarts，但是打包后体积增大了很多差不多2M，觉得成本划不来，所以自己做了一个，效果也还行。
基本思想是利用canvas画出静态的坐标轴、数据点。提示tooltip是div，监听mousemove事件，获取clientX,
遍历数据点坐标数组（画静态坐标点的时候生成），找到当前client对应的点，translate到该点。
chartLine.png
chartLine1.png
附上代码
<template>
<div style="height:250px">
<div class="canvas-wrapper">
<div class="tool-tip"
id="toolTip"
:content="tcontent"
v-show="toolTip.show"
:style="'transform:translateX('+cX+'px);top:'+ttp.top+'px'">
</div>
<canvas id="can">浏览器不支持canvas</canvas>
</div>
</div>
</template>
<script>
export default {
data () {
return {
xdata: [1, 2, 3], //纵坐标数据
ydata: [34565, 3455, 900007],//横坐标
toolTip: {
gw: 0,//x轴刻度之间距离
xPoints: [],//数据点的坐标
show: false,//是否显示提示
},
ttp: 0, //tooltip的y轴坐标
tcontent: '', //tooltip显示的内容
cX: 0, //toolTip定位坐标
}
},
watch: {//可以在此监听props，然后更新chart
},
//折线color、点color、提示color
mounted () {
const toolTip = document.getElementById('toolTip')
let start = new Date() //throttle
const ctx = document.getElementById('can')
this.initLine()
let _this = this
ctx.addEventListener('mousemove', (e) => {
_this.toolTip.show = true
if (new Date() - start > 500) {//throttle节流
start = new Date()
// console.log(e.clientX, e.clientY)
// console.log(_this.toolTip.xPoints)
let p = _this.toolTip.xPoints
let gw = _this.toolTip.gw / 2
for (let i = p.length - 1; i >= 0; i--) {
//遍历坐标点，找到该次事件对应的点
if (e.clientX > p[i].x - gw && e.clientX <= p[i].x + gw) {
_this.cX = p[i].x
_this.tcontent = _this.ydata[i] + '\n' + _this.xdata[i]
break
}
}
}
})
ctx.addEventListener('mouseleave', () => {
setTimeout(() => {
_this.toolTip.show = false
}, 2000);
})
},
methods: {
//初始化
initLine () {
let arr = this.ydata
let max = arr[0]
arr.forEach(e => {
max = Math.max(max, e)
})
const gap = this.getGap(max)
const len = Math.ceil(max / gap) + 1
const ctx = document.getElementById('can')
const wrapper = ctx.parentElement
//设置高度
let width = wrapper.offsetWidth //width
//document.getElementById('toolTip').style.top = wrapper.offsetTop + 'px'
//console.log(wrapper.offsetTop)
let height = wrapper.offsetHeight//height
let x = wrapper.offsetLeft
let y = wrapper.offsetTop
ctx.style.width = width + 'px'
ctx.style.height = height + 'px'
if (window.devicePixelRatio > 1) {
ctx.width = width * window.devicePixelRatio
ctx.height = height * window.devicePixelRatio
} else {
ctx.width = width
ctx.height = height
}
//绘坐标轴
this.draw(width, height, x, y, gap, len, this.xdata, arr)
let _this = this
new Promise(() => {
let wrapper = document.getElementById('can').parentElement
_this.ttp = wrapper.offsetTop
})
},
// 绘坐标轴
draw (width, height, x, y, gap, len, xdata, ydata) {
//预留10px 高度作为x轴的标注
const left = 0.5, bottom = height - 10.5, right = x + width
const e = document.getElementById('can')
const ctx = e.getContext("2d")
//devicePixelRatio物理像素分辨率与CSS像素分辨率的比率，移动端分辨率高会模糊
if (window.devicePixelRatio > 1) {
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
}
ctx.beginPath();
//y轴间隔高度
const gapHeight = parseInt(height / len)
//辅助横线
for (let i = height - gapHeight, j = 1; i >= 0 && j < len; i -= gapHeight, j++) {
ctx.moveTo(left + 30, i - 10.5)
ctx.fillText(j * gap, 15, i - 8.5) //绘制y轴标注
ctx.lineTo(right - 30, i - 10.5)
}
ctx.strokeStyle = 'rgba(0,0,0,.1)'
ctx.stroke()
ctx.closePath()
ctx.beginPath();
//绘制坐标轴
//y轴
ctx.moveTo(left + 29, gapHeight / 2)
ctx.lineTo(left + 29, bottom)
//x轴
this.toolTip.start = left + 30
ctx.moveTo(left + 30, bottom)
ctx.lineTo(right - 30, bottom)
const xlen = xdata.length
//x轴间隔
const gw = (width - 60) / xlen
this.toolTip.gw = gw
//x轴标注与刻度
for (let i = left + gw + 30, j = 0; j < xlen; j++ , i += gw) {
if (j + 1 < xlen) {//横线
ctx.moveTo(i, bottom)
ctx.lineTo(i, bottom + 3)
}
//
ctx.fillText(xdata[j], i - gw / 2 - 6, bottom + 10)
}
ctx.strokeStyle = "rgba(0,0,0,0.6)"
ctx.stroke()
ctx.beginPath()
let points = []
// 数据点
for (let i = 1; i <= xlen; i++) {
let yy = bottom - ydata[i - 1] * (gapHeight / gap)
let xx = left + 30 + i * gw - gw / 2
//ctx.moveTo(xx, yy)
ctx.beginPath()
ctx.arc(xx, yy, 2, 0, 2 * Math.PI);
ctx.fillStyle = "#fbc12a"
ctx.strokeStyle = '#fbc12a'
ctx.fill()
ctx.stroke()
// ctx.fillText(ydata[i - 1], xx - 5, yy - 10)
points.push({ x: parseFloat(xx), y: parseFloat(yy) })
}
this.toolTip.xPoints = points
ctx.closePath()
ctx.beginPath()
for (let i = xlen - 1; i > 0; i--) {
let cur = points[i]
if (i == 0) {
break
}
let next = points[i - 1]
ctx.moveTo(cur.x, cur.y)
ctx.lineTo(next.x, next.y)
}
ctx.lineJoin = 'round'
ctx.strokeStyle = 'rgba(251,193,42,0.6)'
ctx.lineWidth = 1
ctx.stroke()
},
// 获取y轴刻度间隔
getGap (num) {
if (!num) return 0
if (num <= 10) return num < 7 ? 1 : 2
if (num > 10 && num <= 100) return num < 70 ? 10 : 20
if (num > 100 && num <= 1000) return num < 700 ? 100 : 200
if (num > 1000 && num <= 10000) return num < 7000 ? 1000 : 2000
if (num > 10000 && num <= 100000) return num < 70000 ? 10000 : 20000
if (num > 100000 && num <= 1000000) return num < 700000 ? 100000 : 200000
if (num > 1000000 && num <= 10000000) return num < 7000000 ? 1000000 : 2000000
if (num > 10000000 && num <= 100000000) return num < 70000000 ? 10000000 : 20000000
},
}
}
</script>
<style lang="less" scoped>
.canvas-wrapper {
height: inherit;
width: 100%;
position: absolute;
z-index: inherit;
}
.tool-tip {
position: absolute;
z-index: 100000;
display: inline-block;
height: 220px;
width: 1px;
background: rgba(0, 0, 0, 0.5);
&::after {
content: attr(content);
color: #fbc12a;
word-break: break-all;
white-space: pre;
position: relative;
left: 10px;
top: 50px;
line-height: 20px;
border-radius: 4px;
display: inline-block;
min-width: 50px;
min-height: 25px;
background: rgba(0, 0, 0, 0.5);
}
}
</style>
网友评论