echarts 图表
在Vue3项目中,每次使用图表封装组件都要处理,很多配置老是记不住,烦死了!索性封装为class 记录下来方便后面使用
老规矩 先上效果图
vue3 页面元素部分
<div ref="chartContainer" style="width: 600px; height: 100%;"></div>
业务逻辑部分
<script lang='ts'>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import { devBarChart, devPieChart } from '../commchart/myEcharst';
export default defineComponent({
name: 'DataPanel',
components: {},
setup() {
const chartContainer = ref<HTMLElement | null>(null);
const chartContainer1 = ref<HTMLElement | null>(null);
const pieChartContainer = ref<HTMLElement | null>(null);
let barChart: devBarChart | null = null;
let pieChart: devPieChart | null = null;
// 柱状图1执行
const runBarChartFun = () => {
// 柱壮图 堆叠
if (chartContainer.value) {
const data = {
categories: ['设备一', '设备二', '设备三', '设备四', '设备五', '设备六'],
series: [
{
name: '运行',
type: 'bar',
stack: 'total',
barWidth: '30%', // 设置柱子宽度为50%
itemStyle: {
color: '#4ecb73', // 设置柱子颜色为天蓝色
},
emphasis: {
focus: 'series'
},
data: [2, 3, 3, 3, 9, 3, 2]
},
{
name: '停机',
type: 'bar',
stack: 'total',
barWidth: '50%', // 设置柱子宽度为50%
emphasis: {
focus: 'series'
},
itemStyle: {
color: '#ff6600', // 设置柱子颜色为天蓝色
},
data: [1, 3, 1, 13, 9, 2, 21]
}]
};
const options = {
title: '设备运行/停机图表',
legend: ['运行', '停机'],
yAxis: {
name: '时长 (h)'
}
};
barChart = new devBarChart(chartContainer.value, options);
barChart.renderChart(data);
}
}
// 柱状图2执行 非堆叠
const runBarChart1Fun = () => {
if (chartContainer1.value) {
const data = {
categories: ['设备一', '设备二', '设备三', '设备四', '设备五', '设备六'],
series: [
{
name: 'NG数量',
type: 'bar',
barWidth: '30%', // 设置柱子宽度为50%
itemStyle: {
color: '#f2cc76', // 设置柱子颜色为天蓝色
},
emphasis: {
focus: 'series'
},
data: [2, 3, 3, 3, 9, 3, 2]
},
{
name: '生产数量',
type: 'bar',
barWidth: '30%', // 设置柱子宽度为50%
emphasis: {
focus: 'series'
},
itemStyle: {
color: '#3387de', // 设置柱子颜色为天蓝色
},
data: [1, 3, 1, 13, 9, 2, 21]
}]
};
const options = {
title: '设备生产数量图表',
legend: ['NG数量', '生产数量'],
yAxis: {
name: '数量 (个)'
}
};
barChart = new devBarChart(chartContainer1.value, options);
barChart.renderChart(data);
}
};
// 饼图执行
const runPieChartFun = () => {
if (pieChartContainer.value) {
const data = {
series: [
{
name: 'Access From',
type: 'pie',
label: {
show: true,
formatter: '{b}: {d}%', // 显示扇形名称和百分比
backgroundColor: 'transparent', // 设置提示文字的背景色为透明
color:'white'
},
labelLine: {
smooth: true, // 设置提示线为曲线类型
length: 50, // 设置提示线的长度
},
radius: ['1%', '40%'],
center: ['50%', '65%'],
startAngle: 360,
data: [
{ value: 1048, name: '电机报警' },
{ value: 735, name: '气缸报警' },
{ value: 580, name: '气源报警' },
{ value: 484, name: '真空报警' },
]
}
]
};
const options = {
title: '告警类型统计',
};
pieChart = new devPieChart(pieChartContainer.value, options);
pieChart.renderChart(data);
}
};
onMounted(() => {
runBarChartFun();
runBarChart1Fun();
runPieChartFun();
});
onBeforeUnmount(() => {
if (barChart) {
barChart.destroy();
}
if (pieChart) {
pieChart.destroy();
}
});
return {
refData,
eqDatas,
alarmDatas,
eqStates,
chartContainer,
chartContainer1,
pieChartContainer
}
}
});
</script>
封装 部分
import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
export class devBarChart {
private chart: any;
private container: HTMLElement;
private options: any;
constructor(container: HTMLElement, options: any) {
this.container = container;
this.chart = echarts.init(container);
this.options = options;
}
renderChart(data: any) {
this.chart.setOption({
grid: {
left: "5%", // 左边距
bottom: "4%", // 下边距
right: "1%",
containLabel: false, // 自动计算 label 大小
},
title: {
text: this.options.title,
textStyle: {
color: "white",
fontSize: 16, // 设置字体大小为16px,根据需要调整
},
},
tooltip: {},
legend: {
data: this.options.legend,
top: "1%",
textStyle: {
color: "#fff",
// padding: [11, 0, 11, 0],
},
},
xAxis: {
type: "category",
data: data.categories,
axisLabel: {
textStyle: {
color: "white", // 设置刻度标签为白色
},
},
},
yAxis: {
...this.options.yAxis,
type: "value",
// name: '时长 (h)',
position: "left",
alignTicks: true,
axisLabel: {
textStyle: {
color: "white", // 设置刻度标签为白色
},
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
},
series: data.series,
});
window.onresize = () => {
this.chart.resize();
};
}
destroy() {
this.chart.dispose();
}
}
export class devPieChart {
private chart: any;
private container: HTMLElement;
private options: any;
constructor(container: HTMLElement, options: any) {
this.container = container;
this.chart = echarts.init(container);
this.options = options;
}
renderChart(data: any) {
this.chart.setOption({
title: {
text: this.options.title,
top: "1px",
textStyle: {
color: "white",
fontSize: 16, // 设置字体大小为16px,根据需要调整
},
},
tooltip: {},
legend: {
...this.options?.legend,
top: "15%",
textStyle: {
color: "#fff",
// padding: [11, 0, 11, 0],
},
},
series: data.series,
});
window.onresize = () => {
this.chart.resize();
};
}
destroy() {
this.chart.dispose();
}
}