需求:列表里弹出modal modal中装关系图
这个有现成的组件 但是有冲突的问题 所以还是直接引用

• 安装:

yarn add echarts

• main.js:

import Echartsfrom 'echarts'

Vue.prototype.$echarts = Echarts

• 列表:

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
...
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-if="addEnable" type="primary" icon="plus" @click="$refs.modal.add()">新建</a-button>
      <a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
        <a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
      </a-dropdown>
    </div>
    <s-table
      size="default"
      ref="table"
      rowKey="id"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :columns="columns"
      :data="loadData"
    >
      <span slot="action" slot-scope="text, record">
        <a v-if="editEnabel" @click="entity(record)">实体抽取</a>
      </span>
    </s-table>
    <nlpWeChat-modal ref="modal" @ok="handleOk" />
    <NlpWeChatEntity-modal ref="entityModal" /> 
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getNlpArticleList, delNlpArticle } from '@/api/caster/weChat'
import NlpWeChatEntityModal from './modules/NlpWeChatEntityModal.vue'
export default {
  name: 'TableList',
  components: {
    STable,
    NlpWeChatEntityModal
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
       ...
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getNlpArticleList(Object.assign(parameter, this.queryParam))
      }

    }
  },
  filters: {
  },
  created () {
  },
  methods: {
    entity (record) {
      this.$refs.entityModal.entityEchartInit(record)
      this.$nextTick(() => { this.$refs.entityModal.test() })
    },
 
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>

• 关系图modal: NlpWeChatEntityModal.vue

<template>
  <a-modal
    title="实体抽取"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    @ok="handleSubmit"
  >
    <!--    <EchartsEntity ref="echartsEntity" />-->
    <div class="echarts" id="echarts-force-chart" :style="{width:'400px',height:'400px'}"></div>

  </a-modal>
</template>
<script>
// import EchartsEntity from './EchartsEntity.vue'

export default {
  name: 'NlpWeChatEntityModal',
  props: {
  },
  components: {
    // EchartsEntity
  },
  data () {
    return {
      visible: false
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.visible = false
    },
    entityEchartInit (record) {
      this.visible = true
    },
    test () {
      const forceChart = this.$echarts.init(document.getElementById('echarts-force-chart'))
      var nodes = [
        { category: 0, name: '东旭蓝天', 'value': 3, 'size': 30 },
        { category: 1, name: '国信证券经', 'value': 1, 'size': 10 },
        { category: 1, name: '海通证券研', 'value': 1, 'size': 10 },
        { category: 1, name: '招商证券', 'value': 1, 'size': 10 }
      ]
      // source（起点，对应上面的name），target（终点，对应上面的name），value(起点到终点的距离，值越大，权重越大，距离越短)，label（显示该关系边标签，用来说明两节点之间的关系）。
      var links = [
        { 'source': '东旭蓝天', 'target': '国信证券经', 'flow': '2017-05-22' },
        { 'source': '东旭蓝天', 'target': '海通证券研', 'flow': '2017-05-23' },
        { 'source': '东旭蓝天', 'target': '招商证券', 'flow': '2017-05-24' }
      ]
      // 定义节点格式
      nodes.forEach(function (node) {
        // node.itemStyle = null;//
        node.symbolSize = node.size// 强制指定节点的大小
        // node.draggable = true;//是否可拖拽
      })
      const option = {
        // 图表标题
        title: {
          text: '调研关系图', // 正标题
          subtext: '示例', // 附标题
          top: 'bottom', // 垂直位置
          left: 'middle'// 水平位置
          // 正标题样式
          // textStyle: {
          //     fontSize:24
          // },
          // 副标题样式
          // subtextStyle: {
          //     fontSize:12,
          //     color:"red"
          // }
        },
        // 数据提示框配置
        tooltip: {
          trigger: 'item', // 触发方式，有'item'、'axis'。
          // 'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          // 'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          // 设置提示框格式
          // ormatter函数里面的params是整个数据,提示框在节点处要显示有关节点的数据，在关系边的时候显示关系边的数据，所以在这里要做个判断，判断好之后，就返回你先要显示的数据格式。
          formatter: function (params) {
            if (params.data.flow) {
              return params.data.flow // 边上提示连接信息
            } else {
              return params.data.name + ':' + params.data.value + '次' // 节点提示节点信息
            }
          }
        },
        // tooltip: {

        // formatter: function (x) {
        // return x.data.name;//节点和边都显示name属性
        //   }
        // },
        // 自定义提示框
        // tooltip: {
        //     trigger: 'axis',
        //     formatter: function (datas) {
        //         var res = datas[0].name + '<br/>'
        //         for (var i = 0, length = datas.length; i < length; i++) {
        //            res += datas[i].seriesName + '：'
        //                + datas[i].data.originValue + '<br/>'
        //          }
        //         return res
        //     }
        // },
        // 工具箱配置
        // toolbox: {
        //   show: true, // 是否显示工具箱
        //   right: '20%',
        //   feature: {
        //     magicType: ['line', 'bar'], // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
        //     restore: true, // 还原，复位原始图表，
        //     saveAsImage: true // 保存为图片，
        //   }
        // },
        toolbox: {
          show: true, // 是否显示工具栏组件
          orient: 'vertical', // 工具栏icon的布局朝向
          itemSize: 18, // 工具栏icon的大小
          itemGap: 20, // item之间的间距
          right: 20, // toolbox的定位位置
          feature: {
            saveAsImage: { show: true }, // 导出图片
            dataView: { show: true }, // 数据视图
            magicType: { // 动态类型切换
              type: [ 'line', 'bar' ]
            },
            dataZoom: { show: true }, // 数据区域缩放
            restore: { show: true } // 重置
          }
        },
        // 图例配置
        legend: [{
          // x: 'left',//图例位置
          data: ['调研机构', '接待公司']// 关系图中需要与series中的categories的name保持一致
        }],
        // sereis的数据: 用于设置图表数据之用
        series: [{
          type: 'graph',
          layout: 'force', // layout为force，layout可以选择none、circular和force
          // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
          // 'circular' 采用环形布局。
          // 'force' 采用力引导布局。
          symbolSize: 20,
          edgeSymbol: ['circle', 'arrow'], /// 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记[ 'none', 'none' ]，常见的可以设置为箭头
          edgeSymbolSize: [4, 8], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
          // edgeLabel: {//线条的边缘标签
          //             normal: {
          //                 show: true,
          //                 formatter: function (x) {
          //                     return x.data.name;
          //                 }
          //             }
          //         },
          // edgeLabel: {
          //     normal: {
          //         textStyle: {
          //             fontSize: 20
          //         }
          //     }
          // },

          animation: false, // 是否开启动画
          roam: true, // 是否开启滚轮缩放和拖拽漫游，默认为false（关闭）
          label: { // 图形上的文本标签
            normal: {
              show: true, // 是否显示标签。
              position: 'right'/// 标签相对于节点标签的位置
              // textStyle : { //标签的字体样式
              //     color : '#cde6c7', //字体颜色
              //     fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
              //     fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
              //     fontFamily : 'sans-serif', //文字的字体系列
              //     fontSize : 12, //字体大小
              //  }
              // 回调函数，你期望节点标签上显示什么
              // formatter: function(params){
              //     return params.data.label;
              //  },
              // }
            },
            emphasis: {// 高亮状态

            }
          },
          draggable: true, // 指示节点是否可以拖动
          focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
          data: nodes, // 节点数据
          edges: links, // 边数据
          categories: [

            {
              name: '调研机构'
            },
            {
              name: '接待公司'
            }
          ],
          force: { // 力引导图基本配置
            // initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
            repulsion: 100, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
            // gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            edgeLength: 120// 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
            // layoutAnimation : true
            // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
          },

          lineStyle: {// 关系边的线条样式。
            normal: {
              opacity: 0.9, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              // type : 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              width: 2,
              // color: 'target',//决定边的颜色是与起点相同还是与终点相同
              curveness: 0// //线条的曲线程度，从0到1

            }
          }
        }]
      }

      forceChart.setOption(option)
    }
  },
  watch: {

  }
}
</script>

echarts 遇到了工具箱不显示问题 像上面那么些就可以啦