Vue框架中对ECharts图表进行自定义绘制和拖拽

最新推荐文章于 2026-05-09 09:05:04 发布

原创

最新推荐文章于 2026-05-09 09:05:04 发布 · 5.7k 阅读

收录于

本文介绍了如何在Vue项目中利用ECharts框架实现自定义绘制图表，包括自定义X轴和Y轴，并添加拖拽功能，允许用户手动调整图表线条走势。通过HTML、JS和CSS代码展示具体实现过程。

Vue框架中对ECharts图表进行自定义绘制和拖拽的实现

项目需要实现自定义图表X轴和Y轴以及自己绘制图表的功能，并且可以手动拖动修改图表中线条走势。实现的效果如下：
在这里插入图片描述
实现以上效果，HTML代码如下：

<template>
  <div class="ddosData">
    <el-form :inline="true" :model="echartsForm" class="demo-form-inline" size="mini">
      <el-form-item label="最小值:" class="miniInput">
        <el-input size="mini" v-model="echartsForm.min" placeholder="流量最小值"></el-input>
      </el-form-item>
      <el-form-item label="最大值:" class="miniInput">
        <el-input size="mini" v-model="echartsForm.max" placeholder="流量最大值"></el-input>
      </el-form-item>
      <el-form-item label="单位:" class="miniInput">
        <el-select size="mini" v-model="echartsForm.unit">
          <el-option label="KB" value="KB"></el-option>
          <el-option label="MB" value="MB"></el-option>
          <el-option label="GB" value="GB"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间段:">
        <div class="block">
          <el-date-picker
            size="mini"
            v-model="echartsForm.times"
            typ