echarts关系图，点击上一步下一步按钮可改变关系图颜色

熊抱抱的一粒

已于 2022-03-07 15:55:55 修改

阅读量877

点赞数

文章标签： vue javascript echarts

于 2022-03-07 15:53:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52959651/article/details/123331961

版权

本文介绍了如何在Vue3项目中利用Echarts实现关系图，并通过点击下一步和上一步按钮动态改变图中节点的颜色。尽管使用了Vue3，但代码语法遵循Vue2规范。技术栈包括Vue3、Echarts和ant-design-vue。目前的问题是如何在点击下一步后保持上一步图的高亮状态，作者正在对此进行思考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
效果如图片所显示，点击下一步按钮，橙色会移到下一个图上，上一步就是移到上一个图，就是还有一个问题，点击下一步之后如何将上一个图高亮显示，这个正在思考中。
在说一下，虽然我用的是vue3，但是语法还是vue2。

技术栈：vue3 echarts ant-design-vue

完整代码：

<template>
  <div v-show="DetermineShow" class="header">
    <div v-show="isshow" class="mask">
      <h1 class="mask-h1">完成应急指挥</h1>
      <a-button
        class="mask-button"
        size="small"
        type="primary"
        @click="Determine"
        >确定</a-button
      >
      <a-button class="mask-button" size="small" type="primary" @click="Cancel"
        >取消</a-button
      >
    </div>
    <div class="rightbottomcontainer" :class="isshow ? 'xs' : ''">
      <h1 class="rightbottom-title">标题</h1>
      <div class="bottom-left">
        <div id="main" style="width: 900px; height: 300px"></div>
      </div>
      <div class="bottom-right">
        <div class="bottom-div">
          <a-button type="primary" @click="NextStep">下一步</a-button>
        </div>
        <div class="bottom-div">
          <a-button type="primary" @click="PreviousStep">上一步</a-button>
        </div>
        <div class="bottom-div">
          <a-button type="primary" @click="SignOut">退出预览</a-button>
        </div>
        <div class="bottom-div">
          <a-button type="primary" @click="Command">完成指挥</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

最低0.47元/天解锁文章