公司自研业务小程序提出了新的需求,先来看看设计图
emmm,看到设计图的时候我发现我的工位上不是我一个人,变成了两个人,因为我裂开了,
这个图对我一个菜鸡前端来说有点难度,分段显示之前也没做过,先是自己试着用canvas绘制了一下,达不到预期效果,区间范围外的线段颜色不同没能完成,虽然后面有了思路,但是对于一个菜鸡来说还是有点难度,最终还是吧目标转向了echarts
先看看最终的成品效果
然后是自己用canvas绘制的图
自己canvas的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>echarts绘制</title>
</head>
<body>
<canvas
id="canvas"
width="1800px"
height="800px"
style="border: 1px solid #ebebed; width: 900px; height: 400px;background-color: #001C26;"
></canvas>
<script>
var scale = 2;
var canvas = document.getElementById("canvas");
let data=['15:30', '15:31', '15:32', '15:33', '15:34', '15:35', '15:36', '15:37', '15:38', '15:39'];
var config = {
width: canvas.width,
height: canvas.height,
Left: 70,
Top: 90,
Right: 30,
Bottom: 60,
color: ["#0BD2C8"],
yLine: {
splitcount: 3,
data: [0,50,95],
label: ["偏低", "正常", "偏高"],
},
xLine: {
splitcount: data.length-1,
data: data,
},
series: {
data: [55, 53, 40, 98, 80, 60, 50, 30, 60, 20],
},
};
var ctx = canvas.getContext("2d");
// 绘制网格线
darwBackLine("#cccccc", config.yLine.splitcount, 1, config.yLine.label);
// 绘制x轴
drawXLine("#939099", config.xLine.splitcount, 2, config.xLine.data);
drawYLine("#939099", config.yLine.splitcount, 2, config.yLine.data);
// 绘制线条
drawLines(config.color[0], 2, config.series.data);
// 绘制正常区间背景色
ctx.fillStyle = "rgb(6,68,93)";
let x=config.Left,
y=config.height-config.Bottom-Math.ceil((config.height - config.Top - config.Bottom) / config.yLine.splitcount)*2,
w=config.width - config.Left - config.Right* scale,
h=Math.floor((config.height - config.Top - config.Bottom) / config.yLine.splitcount);
ctx.fillRect(x,y,w,h);
// 绘制方法
function darwBackLine(color, splitcount, linewidth, data) {
var len = Math.floor(
(config.height - config.Top - config.Bottom) / splitcount
);
var start = config.Top;
for (var i = 0; i < splitcount; i++) {
var point = start + len * i;
drawLine(
config.Left,
point,
(config.width / 2 - config.Right) * scale,
point,
color,
linewidth
);
drawText(
data[splitcount - i - 1],
10,
(start + len / 2) * (i + 1),
"normal 22px Arial",
"#fff"
);
}
// drawText(
// data[splitcount - i],
// 10,
// point + len,
// "normal 22px Arial",
// "#605d68"
// );
}
function drawXLine(color, splitcount, linewidth, data) {
var left = config.Left;//70
var top = config.height - config.Bottom;//740
var right = (config.width / 2 - config.Right) * scale;//1740
drawLine(config.Left, top, right, top, color, linewidth);
var len = (right - left) / splitcount;//111.1
let num = config.xLine.data.length/5
for (var i = 0; i < splitcount + 1; i+=num) {
var xpoint = left + len * i;//70
var PanningLeft = data[i].toString().length * 5;//10
drawText(
data[i],
xpoint - PanningLeft,//60
top + 15 * scale,//770
"normal 22px Arial",
"#fff"
);
}
}
function drawYLine(color, splitcount, linewidth, data) {
var left = config.Left;
var top = config.height - config.Bottom;
var right = config.height - config.Top;
drawLine(config.Left, config.Top, config.Left, top, color, linewidth);
}
function drawLines(color, linewidth, data) {
var arr=config.series.data.concat(),
max=arr.sort((a,b)=>{return a-b})[arr.length-1]+10;
console.log('max',max)
console.log('最大值',config.series.data)
var count = data.length; //10
var left = config.Left;//70
var top = config.height - config.Bottom; //740
var right = (config.width / 2 - config.Right) * scale;//1470
var len = (right - left) / (count - 1);//155.5
var i = 0;
var interval = setInterval(function () {
if (i >= count - 1) {
clearInterval(interval);
return;
}
drawLine(
left + len * i, //70
top - (data[i] / max) * (top - config.Top),// 293
left + len * (i + 1),//255.5
top - (data[i + 1] / max) * (top - config.Top),
color,
linewidth,
"bevel"
);
i++;
}, 30);
}
function drawItem(text, color, linewidth) {
var right = (config.width / 2 - config.Right) * scale;
var left = right - text.length * 10;
drawText(text, left, config.Top - 10, "normal 22px Arial", "#605d68");
drawLine(
left - 20,
config.Top - 15,
left - 80,
config.Top - 15,
color,
linewidth
);
}
function drawLine(startX, startY, endX, endY, color, width, lineJoin) {
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
if(!lineJoin){
ctx.setLineDash([5]);
}else{
ctx.setLineDash([]);
}
if (color) {
ctx.strokeStyle = color;
}
if (width) {
ctx.lineWidth = width * scale;
}
if (lineJoin) {
ctx.lineJoin = lineJoin;
}
ctx.closePath();
ctx.stroke();
}
function drawText(text, x, y, font, color) {
ctx.font = font;
ctx.fillStyle = color;
ctx.fillText(text, x, y);
}
</script>
</body>
</html>
最后是在echarts的图,在官网大概配置了一下,大概样子已经出来了,完全实现后的代码附在最下方
animation: false,
grid: {
top: 0,
bottom: '10%',
left: '12%',
right: '6%'
},
graphic: {
elements: [{
type: 'text',
style: {
x: 5,
y: 10,
text: '偏高',
fill: '#fff'
}
},
{
type: 'text',
style: {
x: 5,
y: 37,
text: '正常',
fill: '#fff'
}
},
{
type: 'text',
style: {
x: 5,
y: 67,
text: '偏低',
fill: '#fff'
}
}
]
},
xAxis: {
type: "category",
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
show:false,
formatter(val) {
return val.substr(11, 5);
},
},
data: this.hrtime
},
yAxis: [{
type: 'value',
max: 140,
axisLine: {
show: true,
},
splitNumber: 4,
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
{
type: 'value',
max: 140,
axisLine: {
show: true,
},
splitNumber: 4,
splitLine: {
show: false
},
axisLabel: {
show: false
}
}
],
visualMap: {
show: false,
dimension: 1,
pieces: [{
gte: 50,
lte: 95,
color: "#0BD2C8",
},
{
gt: 95,
color: "#f97f7f",
},
{
lt: 50,
color: "#f97f7f",
},
],
},
series: [{
type: "line",
symbol: "none",
markLine: {
symbol: 'none',
emphasis: {
disabled: true
},
data: [{
silent: false,
lineStyle: {
type: 'dashed',
color: '#7d888b',
opacity:0.5
},
label: {
show: false
},
yAxis: 140
},
{
silent: false,
lineStyle: {
type: 'dashed',
color: '#7d888b',
opacity:0.5
},
label: {
show: false
},
yAxis: 95.1
},
{
silent: false,
lineStyle: {
type: 'dashed',
color: '#7d888b',
opacity:0.5
},
label: {
show: false
},
yAxis: 50
}
]
},
data: this.hrdata,
markArea: {
itemStyle: {
color: "#003b41",
},
data: [
[{
yAxis: 50,
},
{
yAxis: 95,
},
],
],
},
}, ],将上面代码复制到option中即可
前端菜鸡,希望各位大佬多多指教
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
