关于echarts人物关系图，节点展现为图片

最新推荐文章于 2024-07-29 11:53:27 发布

HarryWg

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： javascript vue.js echarts

本文链接：https://blog.csdn.net/weixin_43596764/article/details/124331849

版权

echarts示例中人物关系图中节点是原点或其他形状，但人物关系图中节点呈现为人物图像更为合适。
有些情况下，使用symbol: require(‘@/assets…’)可以使用本地资源中的图片进行展示，但更一般的情况下，我们会从后端进行图片的请求，通常为图片二进制流，那么就需要用以下的方式进行节点的图片改造，简单来说就是：

异步请求（ajax/axios）后端图片数据流
将二进制流编码为base64格式
拼接字符串作为symbol

下面是Vue代码中的使用，并没有过多Vue特性，因此泛用性很好

<template>
  <div class="echartLayout">
    <div id="container" style="width:100%; height:300%; overflow:hidden;"></div>
    <button v-on:click='refresh()'>refresh</button>
  </div>
</template>

<script>
export default {
   
  name: 'personRelation',
  data () {
   
    return {
   
      myChart: null,
      chartData: [],
      chartLink: []
    }
  },
  mounted: function () {
   
    var this_ = this
    var data = []
    // 请求需要哪些人物图片
    this_.$axios.get('/ls', {
   
      params: {
   
        dirPath: