使用 ECharts 创建自定义 Vue.js 图表组件
在现代前端开发中,数据可视化是一个重要的组成部分。本篇博客将介绍如何使用 ECharts 创建一个自定义的 Vue.js 图表组件,具体用于展示某个工作班次的数据切片。我们将详细讲解组件的结构、关键功能及其实现方式。最后会有一个图表的实现效果
项目概述
该组件主要用于可视化不同状态(如“工作”、“离线”、“待机”、“报警”)随时间变化的数据。它具有响应式设计,能够根据传入的数据动态更新图表。
组件结构
1. 模板
组件的模板部分非常简洁,使用一个 div
元素来承载图表:
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
核心部分
setOptions({ expectedData, actualData } = {}) {
var data = [];
var types = [
{ name: '工作', color: '#7b9ce1' },
{ name: '离线', color: '#dc77dc' },
{ name: '待机', color: '#e0bc78' },
{ name: '报警', color: '#75d874' },
];
var categories = ['白班'];
echarts.util.each(categories, (category, index) => {
for (var i = 0; i < this.chartData.length; i++) {
data.push({
name: types[this.chartData[i].data].name,
value: [
index,
getTimestampFromDateTimeString(this.chartData[i].startTime),
getTimestampFromDateTimeString(this.chartData[i].endTime),
minutesToMilliseconds(this.chartData[i].sustain)
],
itemStyle: {
normal: {
color: types[this.chartData[i].data].color,
}
}
});
}
});
自定义图标渲染函数
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
数据的结构
periods: [{startTime: "2024-10-10 17:18", endTime: "2024-10-10 18:17", sustain: 59, data: 2}]