需求:列表里弹出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 遇到了工具箱不显示问题 像上面那么些就可以啦
