echarts 关系调用高亮示例 dispatchAction及其遇到的问题

如图所示

<template>
  <div class="Chart">
    <div class="main_box">
      <div class="diagram_box" v-if="activeChart === 'diagram'">
        <div class="drawer">
          <drawer
            :drawer.sync="drawer"
            :cusStyle="{ top: '10px'}"
            :drawerTop="{width:imgWidth,height:'5px'}"
            width="424px"
            oldLeft="-5px"
            :moveLeft="moveLeft"
            @handleClick="DrawerHandleClick"
          >
            <div class="main_box">
              <div class="content_box" v-for="(item,index) in labelList" :key="index" @click="clickLabel(index)"> // 点击左侧
                <div :class="['content',{'selected': item[0].isSelect}]">
                  <div class="icon">
                    <img :src="origin + iconObj[item[0].value]['icon_path']" alt="">
                  </div>
                  <div class="info_box">
                    <div v-for="(e,i) in item" :key="i">
                      <div class="info" v-if="!e.isIcon">
                        <div class="label">{{e.label + '：'}}</div>
                        <div class="value" v-if="e.label_en === 'avatar_url' || e.label_en === 'car_image'">
                          <el-image
                            :src="origin + e.value"
                            fit="cover"
                          >
                            <div slot="error" class="image-slot">
                              <img :src="errImg" />
                            </div>
                          </el-image>
                        </div>
                        <div class="value" v-else>{{e.value}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="total">
              <span>总数：</span>
              <span>{{ labelList.length }}</span>
            </div>
          </drawer>
        </div>
        <Loading :isLoading.sync="isLoading">
          <Diagram
            ref="charts"
            v-if="chartList.length"
            :id="id"
            :bgColor="chartsBg"
            :chartList="chartList"
            @handleDbClick="handleDbClick"
            @updateData="updateData"
          />
          <div class="empty_div" v-else>
            <EmptyData />
          </div>
        </Loading>
      </div>
    </div>
  </div>
</template>

 // 点击左侧信息
clickLabel (index) {
 this.labelList.forEach(item => {
   item[0].isSelect = false
 })
 this.labelList[index][0].isSelect = true
 this.$refs.charts.switchHigh(index,1)
}

<template>
  <div :id="id" class="chart"></div>
</template>
<script>
import { colors} from './mock'
import { lightTheme, darkTheme } from "@/assets/js/variable";
import { mapState } from 'vuex';
// import { getEntityIcon } from '@/api/analysis'
// import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: 'Charts',
  props: {
    id: {
      type: String
    },
    chartList: {
      type: Array
    },
    bgColor: { // 图谱背景色
      type: String
    }
  },

  data () {
    return {
      myChart: null,
      seriesData: [],
      seriesLinks: [],
      seriesCategories: [],
      cerTypeObj: {
        attr_identity_card_type: '身份证',
        attr_passport_type: '护照',
        attr_hk_permit_type: '港澳通行证'
      },
      option: {}
      // iconObj: {}
    }
  },

  computed: {
    ...mapState('User', {
      theme: 'theme'
    }),
    ...mapState('Common', {
      iconObj: 'iconObj',
      usefulRelationTypeListMap: 'usefulRelationTypeListMap',
      usefulRelationTypeList: 'usefulRelationTypeList',
      dataTypeObj:'dataTypeObj'
    }),
    origin () {
      return window.location.origin + '/'
    }
  },

  watch: {
    chartList: {
      handler (val) {
        if (!val.length) return
        this.myChart && this.myChart.dispose()
        this.myChart = null
        this.formatData(val)
      },
      immediate: true, //关键
      deep: true
    },
    theme: {
      handler () {
        // console.log(this.myChart);
        if (this.myChart) {
          // console.log(this.option);
          // console.log('执行了');
          // this.myChart.setOption(this.option)
          this.formatData(this.chartList)
        }
      },
      immediate: true
    }
  },
  created () {
    // console.log(this.theme);
  },

  methods: {
    // 数据格式化
    formatData (list) {
      // 存在类别 赋值
      this.seriesCategories = this.formatCates(list[0])
      const sArr =
        list[1]?.map(_c => {
          return { source: _c.src + '', target: _c.dst + '', dataRelationShipName: this.dataTypeObj[_c.data_source], personRelationShipName: _c.relationship, ..._c }
        }) ?? []
      this.seriesLinks = sArr.filter((element, index, self) => {
        return self.findIndex(x => x.vid === element.vid) === index
      })
      // const typeImgsMapOBJ = { ...typeImgsMap }
      const nArr =
        list[0]?.map(_c => {
          if (_c.type !== 'entity_person') { // 给name赋值  默认在实体上显示
            _c.name = _c.main_prop_val
          }

          _c.category = this.seriesCategories.findIndex(
            ele => ele.name === this.usefulRelationTypeListMap[_c.type]
          )
          _c.symbolSize = 38
          // console.log(_c.type,this.iconObj[_c.type])
          _c.symbol = this.iconObj[_c.type]['icon_path'] ? 'image://' + this.origin + this.iconObj[_c.type]['icon_path'] : require(`@/assets/img/atlis-default.png`)

          _c.id = _c.vid
          return _c
        }) ?? []
      // 不可有重复name否则会报错
      this.seriesData = nArr.filter((element, index, self) => {
        return self.findIndex(x => x.vid === element.vid) === index
      })
      // this.seriesData = nArr

      this.$nextTick(() => {
        this.initCharts()
      })
    },

    // 处理显示类别为有数据的类别
    formatCates (list) {
      const nameList = list.map(_c => this.usefulRelationTypeListMap[_c.type])
      const uniqueArr = [...new Set(nameList)]
      // console.log(uniqueArr)
      // 将人员放在数组首项
      // const index = uniqueArr.findIndex(_c => _c === '人员')
      // if (index !== -1) {
      //   const personItem = uniqueArr.splice(index, 1)
      //   uniqueArr.unshift(personItem[0])
      // }

      return uniqueArr.map(_c => {
        return { name: _c }
      })
    },

    /**
     * 设置echarts配置项,重绘画布
     */
    initCharts () {
      const _this = this

      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById(this.id))

        this.myChart.off('legendselectchanged') //解决重复触发
        // this.myChart.off('click') //解决重复触发
        // this.myChart.getZr()?.off('click') //解决重复触发

        // this.myChart.on('click', params => {
        //   console.log(params);
        //   if (params.dataType === 'node') {
        //     this.$emit('handleClickNode', params.data)
        //   } else if (params.dataType === 'edge') {
        //     this.$emit('handleClickEdge', params.data)
        //   }
        // })
        // 双击事件
        this.myChart.on('dblClick', params => {
          // console.log('双击事件',params)
          this.$emit('handleDbClick', params.data)
        })
        // 点击
        this.myChart.on('click', params => {
          // if (!params.target) {
          //   this.$emit('handleClickOut')
          // }
          // console.log('单击事件',params)
          if (params.dataType === 'edge') {
            this.$emit('clickEdge', params)
          }
        })

        this.myChart.on('legendselectchanged', e => {
          const { selected } = e
          let { legend } = _this.myChart.getOption()
          for(let key in selected) {
            legend[0].data.forEach(item => {
              if (selected[key]) {
                if (item.name === key) {
                  item.itemStyle.opacity = 1
                  item.textStyle.opacity = 1
                }
              } else {
                if (item.name === key) {
                  item.itemStyle.opacity = 0.2
                  item.textStyle.opacity = 0.2
                }
              }
            })
          }
          const option = { ..._this.myChart.getOption(), legend }
          _this.myChart.setOption(option)
        })

        this.myChart.on('mousedown', e => {
          if (e.dataType === "edge") { return }
          let { tooltip } = _this.myChart.getOption()
          tooltip[0].trigger = 'none'
          const option = { ..._this.myChart.getOption(), tooltip }
          _this.myChart.setOption(option)
        })
        this.myChart.on('globalout', () => {
          let { tooltip } = _this.myChart.getOption()
          tooltip[0].trigger = 'item'
          const option = { ..._this.myChart.getOption(), tooltip }
          setTimeout(() => {
            _this.myChart.setOption(option)
          }, 20)
        })
        this.myChart.on('mouseup', () => {
          let { tooltip } = _this.myChart.getOption()
          tooltip[0].trigger = 'item'
          const option = { ..._this.myChart.getOption(), tooltip }
          setTimeout(() => {
            _this.myChart.setOption(option)
          }, 20)
        })
      }

      // 颜色不能写死，需要写变量对应
      let colorObj = this.theme === 'light' ? lightTheme : darkTheme

      // 指定图表的配置项和数据
      this.option = {
        backgroundColor: this.bgColor,
        // 提示框的配置
        tooltip: {
          // backgroundColor: 'rgba(40, 50, 71,.9)',
          backgroundColor: colorObj['--tooltip-bg-262D44-to-f6f8fd'],
          borderWidth: 0,
          enterable: true,
          position: 'right',
          hideDelay: 10,
          // transitionDuration:'2',
          textStyle: {
            //默认值，
            color: colorObj['--base-text-color-to-666666'], //默认值各异，
            fontSize: 16 //默认值，
          },
          padding: 10,
          formatter: params => {
            {
              // 关系线的提示
              if (params.dataType === 'edge') {
                // return params.data.dataRelationShipName
                return
              }

              if (params.data.type === 'entity_person' || params.data.type === 'entity_certificate') {
                const imgUrl = params.data.avatar_url
                  ? window.location.origin + '/' + params.data.avatar_url
                  : this.theme === 'light' ? require('@/assets/img/icon-morenHeader-light.png') : require('@/assets/img/icon-morenHeader.png')

                return `
                <div style="display:flex;color: ${colorObj['--base-text-color-to-999999']};">
                    <img style="height:90px;width:75px;" src="${imgUrl}"" />
                    <div style="margin-left:8px;">
                      <div style="display:flex">
                        <div style="font-size:14px;width:75px;">姓名：</div>
                        <div>
                          ${params.data.name || '--'}
                        </div>
                      </div>
                      <div style="display:flex">
                        <div style="font-size:14px;width:75px;">性别：</div>
                        <div>
                          ${this.getSex(params.data)}
                        </div>
                      </div>
                      <div style="display:flex">
                        <div style="font-size:14px;width:75px;">民族：</div>
                        <div>
                          ${params.data.nation || '--'}
                        </div>
                      </div>
                      <div style="display:flex">
                        <div style="font-size:14px;width:75px;">出生日期：</div>
                        <div>
                          ${this.getBirthday(params.data)}
                        </div>
                      </div>
                    </div>
                </div>
                <div style="margin-top:0px;color: ${colorObj['--base-text-color-to-999999']};">
                  <div>
                    <div style="display:flex">
                      <div style="width:75px;font-size:14px;">${this.getCerType(params.data)}</div>
                      <div>${params.data.cer_number || '--'}</div>
                    </div>
                  <div>
                  <div>
                    <span style="font-size:14px;">户籍地址：</span>
                    <span>${params.data.registered_address || '--'}</span>
                  </div>
                </div>
                `
              } else if (params.data.type === 'entity_mobile_phone') {
                return `
                  <div style="color: ${colorObj['--base-text-color-to-999999']}">
                    <span style="font-size:14px;">IMEI：</span>
                    <span>${params.data.imei || '--'}</span>
                  </div>
                `
              } else if (params.data.type === 'entity_phone_card') {
                return `
                  <div style="color: ${colorObj['--base-text-color-to-999999']}">
                    <span style="font-size:14px;">手机号：</span>
                    <span>${params.data.main_prop_val || '--'}</span>
                  </div>
                  <div style="color: ${colorObj['--base-text-color-to-999999']}">
                    <span style="font-size:14px;">IMSI：</span>
                    <span>${params.data.imsi || '--'}</span>
                  </div>
                `
              } else {
                let list = []
                for(let key in params.data) {
                  this.iconObj[params.data.type].fields.forEach(item => {
                    if (key === item.label_name_en && params.data[key]) {
                      if (key.indexOf('_image') !== -1) {
                        list.push({
                          label: item.label_name_cn,
                          value: params.data[key],
                          isImage: true
                        })
                      } else {
                        list.push({
                          label: item.label_name_cn,
                          value: params.data[key],
                          isImage: false
                        })
                      }
                    }
                  })
                }
                return `
                  <ul>
                      ${list.map(item => {
                        if (item.isImage) {
                          return `
                            <li style="color: ${colorObj['--base-text-color-to-999999']}">
                              <span style="font-size:14px;">${item.label + '：'}</span>
                              <img style="height:75px;width:100px;" src="${window.location.origin + '/' + item.value}" />
                            </li>
                          `
                        } else {
                          return `
                            <li style="color: ${colorObj['--base-text-color-to-999999']}">
                              <span style="font-size:14px;">${item.label + '：'}</span>
                              <span>${item.value || '--'}</span>
                            </li>
                          `
                        }
                }).join('')}
                  </ul>
                `
              }
            }
          }
        },
        // 类目color
        color: colors,
        // 类目数组
        legend: [
          {
            // data: [],
            data: this.chartList[0].map(_c => {
              return {
                name: this.iconObj[_c.type]['entity_name_cn'],
                icon: this.iconObj[_c.type]['icon_path'] ? 'image://' + this.origin + this.iconObj[_c.type]['icon_path'] : require(`@/assets/img/atlis-default.png`),
                itemStyle: {
                  opacity: 1
                },
                textStyle: {
                  opacity: 1
                }
              }
            }),
            x: 'right',
            y: 'bottom',
            itemWidth: 24,
            itemHeight: 24,
            textStyle: {
              // color: 'rgba(174, 189, 212,0.9)',
              color: colorObj['--base-text-color-to-666666'],
              fontSize: 12
            }
          }
        ],
        series: [
          {
            type: 'graph', // 类型:关系图
            top: '10%', // 图表距离容器顶部的距离
            // zoom: 1,
            layout: 'force', //图的布局，类型为力导图
            legendHoverLink: false, //是否启用图例 hover(悬停) 时的联动高亮。
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 8], // 两端大小
            force: {
              edgeLength: 300, // 两个节点之间的距离
              repulsion: 1000, //节点之间的斥力因子值
              friction: 0.2, // 节点的移动速度 取值0~1
            },
            roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            draggable: true, //每个节点的拖拉
            // 关系线样式lineStyle
            lineStyle: {
              show: true,
              width: 1,
              // color: '#8799BF', //决定边的颜色是与起点相同还是与终点相同 可选'target'
              color: colorObj['--base-text-color-to-999999'], //决定边的颜色是与起点相同还是与终点相同 可选'target'
              // curveness: 0.1 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
            },
            autoCurveness:true,
            //图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              //标签的字体样式
              // color: '#c0d0e7', //字体颜色
              color: colorObj['--base-text-color-1'], //字体颜色
              fontStyle: 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
              fontWeight: 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
              fontFamily: 'sans-serif', //文字的字体系列
              fontSize: 12, //字体大小
              show: true, //显示
              position: 'top', //相对于节点标签的位置，默认在节点中间
              //回调函数，你期望节点标签上显示什么
              formatter: function (params) {
                // 对手机号特殊处理，标签上优先取手机号，没有则依次取值
                if (params.data.type === 'entity_probe_phone') {
                  return params.data.phone || params.data.imei || params.data.imsi
                } else {
                  return params.name
                }
              }
            },
            edgeLabel: {
              position: 'middle', // 标签位置 线的中点
              show: true,
              fontSize: 12,
              color:  colorObj['--base-text-color-to-666666'],
              formatter: x => {
                if (x.data.relationship) {
                  return x.data.relationship + '（' + x.data.dataRelationShipName + x.data.rank + '次）'
                } else {
                  return (
                    this.getVertexName(x.data.dst.split('-')[0]) +
                    '(' +
                    x.data.dataRelationShipName + x.data.rank +
                    '次)' || ''
                  )
                }
              }
            },
            emphasis: {
              scale: true, //是否开启鼠标悬停节点的显示动画
              lineStyle: {
                width: 2
              },
              shadowColor: '#00FAE1',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 40,
              focus: 'adjacency'
            },
            symbolSize: 5, //节点大小
            categories: this.seriesCategories,
            links: this.seriesLinks,
            data: this.seriesData,
            cursor: 'pointer',
            nodeStyle: {
              brushType: 'both',
              borderColor: 'rgba(255,215,0,0.4)',
              borderWidth: 1
            }
          }
        ],
        // 动画更新变化时间
        animationDurationUpdate: 100, //数据更新动画的时长。[ default: 300 ]
        // animationDurationUpdate: 200, //数据更新动画的时长。[ default: 300 ]
        animationEasingUpdate: 'quinticInOut'  数据更新动画的缓动效果。[ default: cubicOut ]    "quinticInOut"
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.option,true)
      let model  = this.myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts;
      this.$emit('updateData',model)
    },

    switchHigh (index, name) {
      // console.log(index,name)
      this.myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index,
        name: name
      })
    },
    // 通过身份证获取性别
    getSex (data) {
      // console.log(data)
      // return data.gender
      if (data.gender === '' || data.gender == null) {
        if (data.cer_type === 'attr_identity_card_type') {
          if (parseInt(data.cer_number.substr(16, 1)) % 2 === 1) {
            return "男"
          } else {
            return "女"
          }
        } else {
          return '--'
        }
      } else {
        if (data.gender === 'female' || data.gender === '女') {
          return '女'
        } else if (data.gender === 'male' || data.gender === '男') {
          return '男'
        } else {
          // return '--'
          return data.gender
        }
      }
    },
    // 通过身份证号获取出生日期
    getBirthday (data) {
      if (data.birthday === '' || data.birthday == null) {
        if (data.cer_type === 'attr_identity_card_type') {
          return data.cer_number.substring(6, 10) + "/" + data.cer_number.substring(10, 12) + "/" + data.cer_number.substring(12, 14)
        } else {
          return '--'
        }
      } else {
        return data.birthday
      }
    },
    getCerType (data) {
      if (data.cer_type === 'attr_hk_permit_type') {
        return '港澳通行证：'
      } else if (data.cer_type === 'attr_passport_type') {
        return '护照：'
      } else if (data.cer_type === 'attr_identity_card_type') {
        return '身份证：'
      } else {
        return '未知证件：'
      }
    },
    getVertexName (data) {
      return this.iconObj[data]['entity_name_cn']
    }
  }
}
</script>
<style scoped>
.cusEchart-label {
  width: 500px;
}
</style>

好吧 太多了 关键是看这个

switchHigh (index, name) {
  // console.log(index,name)
  this.myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: index,
    name: name // 感觉传这个name没什么用 注释都行  
  })
},

遇到的问题

遇到了什么问题呢 就是 点击对应的实体 但是高亮了别的 如图 点击了 王二 但是却高亮了手机

问题原因

switchHigh 的index对应错了 点击王二 就需要传王二的index

解决方法

因为我右边的列表 是过滤了关于人的实体 手机阿 公司阿 地址阿 都不在左边的列表里面 然后 switchHigh 传的就是左边列表的index 这样就错了 应该传图谱数据的列表对应的index

因为传给图谱的chartList数组的数据里面有人有物 顺序是乱的 但是我把人的全部提取出来给了左边

所以我就把chartList数组处理了下 把人的排在前面 物在后面

 let peopleList =  vertex.filter(item => item.type === 'entity_person')
 let thingList = vertex.filter(item => item.type !== 'entity_person')
 let newVertexList = peopleList.concat(thingList)
 this.chartList = [newVertexList, edge]

解决了

我只是记录这个问题 说明switchHigh 的index来自哪里