echarts自定义图表

使用 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}]

图表效果

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值