若依框架整合Echarts图表
一、前端
1、放置Echarts图表的div
<el-col :span="12">
<div :class="className" :style="{height:height,width:width}" :ref="'chart'"/>
</el-col>
注：ref里的字段，需为字符串
2、前端需要导入的包
import LineChart from '@/views/dashboard/LineChart.vue' //折线图 如需要使用若依封装好的Echarts图表组件，再引入
import * as echarts from 'echarts' //导入echarts
require('echarts/theme/macarons') //Echarts主题
import resize from '../../dashboard/mixins/resize' //重新绘制尺寸
3、vue文件中default相关参数
export default {
mixins: [resize],
components: { LineChart }, //无需引入的组件则无需配置
props: {
className: { //Echarts图表绑定的类名
type: String,
default: 'chart'
},
width: { //Echarts图表的宽度
type: String,
default: '100%'
},
height: { //Echarts图表的高度
type: String,
default: '400px'
},
autoResize: { //是否自动绘制图表尺寸
type: Boolean,
default: true
},
},
data() {
return {
chart: null, //Echarts图表实例对象，对应div中ref引用
chartData: null, //数据1：Echarts数据data为数组
chartMap:null, //数据2：Echarts数据data为Map
//日期格式
options : { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' },
};
}
}
4、Echarts相关方法
1）图表初始化
/**
图表初始化
*/
initChartCu() {
if (this.$refs.chart) {
//参数1：初始化的图表实例对象 参数2：主题(非必填参数)
this.chart = echarts.init(this.$refs.chart, 'macarons')
}
},
2）图表配置
/**
图表配置
参数1：图表实例对象
参数2：图表标题
参数3：图表legendData数组
参数4：每个点纵坐标名称
参数5：数据
*/
setChartOptions(chart, titleText, legendData, seriesName, data, type) {
//定义通用option
const option = {
title: { text: titleText, left: 'center', textStyle: { fontSize: 20 } },
grid: { left: 10, right: 10, bottom: 20, top: 50, containLabel: true },
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [5, 10] },
yAxis: { type: 'value' },
legend: { data: legendData, top: 30 },
toolbox: {
show: true,
right: 15,
feature: {
magicType: {
title: { line: '切换为折线图', bar: '切换为柱状图' },
type: ['line', 'bar'],
textStyle: { color: 'white' }
},
dataView: { title: '数据视图', readOnly: false, textStyle: { color: 'white' } },
restore: { title: '还原', textStyle: { color: 'white' } },
saveAsImage: { title: '保存为图片', textStyle: { color: 'white' } }
}
},
option.dataZoom = [{ type: 'inside', start: 0, end: 100 }, { type: 'slider', start: 0, end: 100 }];
};
//举例（代码可进一步优化）
//定义横坐标与纵坐标数据为null
let xData = null;
let yData = null;
//type为1，表示数据为数组类型
if (type === 1 && Array.isArray(data)) {
//根据后端数据来构造xData与yData
//示例：横坐标为时间戳 纵坐标为数值
xData = data.map(item => item.time);
yData = data.map(item => item.value);
option.series = [{ name: seriesName, data: yData, type: 'line', smooth: true }];
option.xAxis ={ type: 'category', data: xData.map(timestamp => new Date(timestamp).toLocaleTimeString())}
} //type为2，表示数据为map类型
else if (type === 2 && (data !== null && data !== undefined)){
//定义yData为数组
yData = [];
//遍历传入的map，将数据放入yData中
data.forEach((waveData, key) => {
yData.push(waveData.map(item => item));
});
option.series = legendData.map((name, index) => ({ name, data: yData[index], type: 'line', smooth: true }));
option.xAxis ={ type: 'category', data: xData };
}else {
yData = []
}
//设置配置
chart.setOption(option);
},
3）图表清空
/**
清空echarts配置
*/
this.chart.clear()
this.chart.setOption({})
this.chartData = null;
this.chartMap = null;
5、watch监听函数
watch: {
//举例：监听到echartData数据变更，进行重新设置echarts图表的Options
chartData: {
deep: true,
handler(val) {
this.setChartOptions(this.chart, '功率图', ['功率图'], '功率', val，1)
}
},
//举例：监听到chartMap数据变更，进行重新设置echarts图表的Options
chartMap: {
deep: true,
handler(val) {
//如果后端传回来的数据为map格式，那么需要进行判断
//如果数据不为null并且类型为object
if (val !== null && typeof val === 'object'){
//根据自身需求来构造Echarts配置中的legendData以及seriesData
//举例（代码可进一步优化）
const dataA = val['A相电流'];
const dataB = val['B相电流'];
const dataC = val['C相电流'];
if (Array.isArray(dataA) && Array.isArray(dataB) && Array.isArray(dataC)) {
const legendData = ['A相电流', 'B相电流', 'C相电流'];
const seriesData = [dataA, dataB, dataC];
this.setChartOptions(this.chart, '电流波形图', legendData, '电流波形', seriesData，2);
} else {
console.error('Data in chartMap is not in the expected format');
}
}else {
this.setChartOptions(this.chartCurrentWave, '电流波形图', [], '电流波形', null，2);
}
}
},
}
6、将Echarts图转化为Canvas
示例：表格中有一列为一个字符串类型的数组，需要将其绘制为图表并在表格中展示，即非触发式绘制图表
1）表格数据
<el-table-column label="电流波形" align="center" prop="currentWave" width="200">
<template slot-scope="scope">
<!-- 利用waveCanvas + 每行数据的id 拼接为图表的唯一id -->
<canvas ref="waveCanvas" width="200" height="50" :id="'waveCanvas-'+ scope.row.id" ></canvas>
</template>
</el-table-column>
2）相关方法
/**
将图表转换为canvas图
参数1：数据
参数2：canvas图Id
*/
currentCanvas(waveData,canvasId) {
//将字符串类型的数组转为JSON格式，即变为数组[]格式
const data = JSON.parse(waveData)
//通过DOM节点获取到canvas图表
this.$nextTick(() => {
const canvas = document.getElementById(canvasId);
if (!canvas) {
console.error("Canvas not found for ID: " + canvasId);
return;
}
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error("Unable to get 2D context for canvas with ID: " + canvasId);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
//数值有正有负
const maxValue = Math.max(...data.map(Math.abs)); // 取绝对值后的最大值
const minValue = Math.min(...data); // 最小值
const range = maxValue - minValue;
const stepX = canvas.width / (data.length - 1);
const stepY = canvas.height / range;
ctx.beginPath();
ctx.moveTo(0, canvas.height - (data[0] - minValue) * stepY);
for (let i = 1; i < data.length; i++) {
ctx.lineTo(i * stepX, canvas.height - (data[i] - minValue) * stepY);
}
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();
});
},
//从后台请求回数据后，进行转换
this.waveList.forEach(item => {
this.currentCanvas(item.currentWave,'waveCanvas-'+item.id);
});