有些不较复杂的Echarts图，或者多个Echarts图进行叠加的时候；Echarts表格无法满足我们的需求的时候；那么我们就可以通过使用Canvans来实现ECharts图；
1、dom节点准备
<img id="scream" v-show="false" src="../assets/led/bjss.png" @load="erLoad" style="z-index: -1" alt=""/>
// 初始化数据
this.widthCal = document.body.clientWidth; //获取屏幕的宽度
this.heightCal = document.body.clientHeight; //获取屏幕的宽度
this.ctxHeiht = this.heightCal - 118;
this.bgHeight = this.heightCal - 218;
this.fengeWidth = 150; //每个柱子分割的宽度
camountedAll() {
this.imgssBg = document.getElementById("scream");
this.imgssBg.width = this.widthCal;
this.imgssBg.height = this.heightCal;
this.cCanvans = document.getElementById("myCanvas");
this.cCanvans.width = this.widthCal;
this.cCanvans.height = this.heightCal;
this.ctx = this.cCanvans.getContext("2d");
},
erLoad() {
this.ctx.drawImage(this.imgssBg, 0, 0);
this.ctx.moveTo(100, 100);
this.ctx.lineTo(100, this.ctxHeiht);
this.ctx.stroke();
this.ctx.lineTo(100, this.ctxHeiht);
this.ctx.lineTo(this.widthCal - 66, this.ctxHeiht);
this.ctx.stroke();
//背景颜色
this.ctx.fillStyle = "rgba(255,255,255,.2)";
this.ctx.fillRect(100, 100, this.bgWidth, this.bgHeight);
//横坐标 样式数据；
this.ctx.font = "30px Arial bold";
this.ctx.fillStyle = "#fff";
this.ctx.textAlign = "right";
var codeTime = [];
//Y轴线
this.ctx.font = "26px Arial bold";
this.ctx.fillText("( ℃ )", 95, this.xfengeLine + 30);
this.ctx.fillText("温度", 95, this.xfengeLine);
//曲线优化
this.drawBezierCurve();
// 折线的点
this.drawPoint();
//柱状图
this.drawPie();
}
//柱状图 dataEchartsA数据
drawPie() {
let pieData = this.dataEchartsA.length > 1 ? this.dataEchartsA[1] : [];
if (pieData && pieData.length > 0) {
var x0 = 132; //x轴0处坐标
var y0 = this.ctxHeiht; //y轴0处坐标
var x1 = 0; //x轴顶处坐标
var y1 = 130; //y轴顶处坐标
var dis = 30;
var width = 30; //设定每个柱子的宽度
var xDis = 60; //设定柱子之前的间距
for (var i = 0; i < 12; i++) {
//假设有12个月
this.ctx.beginPath();
var color = "#00dddd"; //柱子的颜色
this.ctx.fillStyle = color;
this.ctx.font = "15px scans-serif"; //设置字体
var height = pieData[i]; //在一定范围内随机高度
var rectX = x0 + i * this.fengeWidth; //柱子的x位置
var rectY = height; //柱子的y位置
var epreHight = height * ((this.bgHeight / window.g.preHight).toFixed(1)) //限制柱状的高度
this.ctx.fillRect(rectX, y0, width, -epreHight); //绘制一个柱状
if (pieData[i] == 0.0 || pieData[i] === 0) {
} else {
this.ctx.fillStyle = "yellow";
this.ctx.fillText(
rectY,
rectX + width / 2,
this.ctxHeiht - epreHight - 5
); //显示柱子的值
}
}
}
},
drawBezierCurve() {
let len = this.points.length;
if (len < 2) {
return;
}
this.ctx.beginPath();
this.ctx.moveTo(this.points[0].x, this.points[0].y);
if (len === 2) {
this.ctx.lineTo(this.points[1].x, this.points[1].y);
} else {
for (let i = 1; i < len; i++) {
//计算控制点
let calculatePoints = [];
calculatePoints.push(this.points[i - 1]);
calculatePoints.push(this.points[i]);
let flag = 0;
if (i > 1) {
if (this.points[0].y >= this.points[1].y) {
flag = -1;
} else {
flag = 1;
}
}
//判断是第几段曲线 奇数与第一段相同 偶数与第一段相反
if (i % 2 == 0) {
flag *= -1;
}
let controlPoints = this.calculateControlPoint(calculatePoints, flag);
this.ctx.bezierCurveTo(
controlPoints[0].x,
controlPoints[0].y,
controlPoints[1].x,
controlPoints[1].y,
this.points[i].x,
this.points[i].y
);
}
}
this.ctx.strokeStyle = "#00DDDD";
this.ctx.lineWidth = 3;
this.ctx.stroke();
},
drawPoint() {
var arrData = this.dataEchartsA[2];
this.onePoint.x = this.points[0].x + "px";
this.onePoint.y =
this.heightCal - this.points[0].y - this.topTitle + 38 + "px";
this.points.forEach((point, index) => {
this.ctx.beginPath();
this.ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
this.ctx.textBaseline = "bottom";
this.ctx.textAlign = "center";
this.ctx.fillStyle = "yellow";
this.ctx.fillText(arrData[index], point.x, point.y);
this.ctx.fill();
});
},
calculateControlPoint(points, flag) {
let offset = 0;
if (flag == 0) {
if (points[0].y >= points[1].y) {
offset = -this.offsetValueY;
} else {
offset = this.offsetValueY;
}
} else {
offset = flag * this.offsetValueY;
}
//斜率不存在的情况
if (points[0].x == points[1].x) {
let dy = (points[1].y - points[0].y) / 3;
return [
{
x: points[0].x + offset,
y: points[0].y + dy,
},
{
x: points[0].x + offset,
y: points[0].y + 2 * dy,
},
];
} else {
//求两点的直线方程 y = k*x + b
let k = (points[0].y - points[1].y) / (points[0].x - points[1].x)
let b = points[0].y - k * points[0].x;
let dx = (points[1].x - points[0].x) / 3;
return [
{
x: points[0].x + dx,
y: k * (points[0].x + dx) + b + offset,
},
{
x: points[0].x + 2 * dx,
y: k * (points[0].x + 2 * dx) + b + offset,
},
];
}
},
示例贴图
