932 lines
28 KiB
Vue
932 lines
28 KiB
Vue
<!-- 事件分析-事件图谱 -->
|
||
<!-- 11.6合并版 -->
|
||
<template>
|
||
<div>
|
||
<!-- 关系图/知识图谱：笛卡尔坐标系上的 Graph -->
|
||
<div class="two">
|
||
|
||
<div class="form">
|
||
<!-- inline="true"表单域在一行 -->
|
||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||
<el-form-item label="公司名称">
|
||
<el-input v-model="formInline1.company" placeholder="公司名称：" size="mini"></el-input>
|
||
<!-- 搜索联想-->
|
||
<!-- <el-autocomplete-->
|
||
<!-- class="inline-input"-->
|
||
<!-- v-model="formInline1.company"-->
|
||
<!-- :fetch-suggestions="querySearch"-->
|
||
<!-- placeholder="公司名称"-->
|
||
<!-- size="mini"-->
|
||
<!-- ></el-autocomplete>-->
|
||
</el-form-item>
|
||
|
||
<el-form-item label="事件类型">
|
||
<el-select v-model="formInline1.event_type" placeholder="事件类型：" size="mini">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker v-model="formInline1.start_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker v-model="formInline1.end_date" type="date" placeholder="年-月-日" size="mini"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>
|
||
</el-form-item>
|
||
<!-- <el-form-item>-->
|
||
<!-- <el-button class="grayish_btn" @click="onSubmit1" icon="el-icon-search" size="mini">查询</el-button>-->
|
||
<!-- </el-form-item>-->
|
||
</el-form>
|
||
</div>
|
||
<el-card :body-style={padding:0} style='height: 510px;'>
|
||
<!-- 1、上标 -->
|
||
<span class="superscript" style="width: 20px; height: 40px;">事件图谱</span>
|
||
<div>
|
||
<div ref="echarts_1" style="height: 500px"></div>
|
||
</div>
|
||
<!-- 2、产品搜索栏 -->
|
||
</el-card>
|
||
</div>
|
||
<el-dialog :visible.sync="dialogVisible" width="100%" >
|
||
<!-- 详细信息 -->
|
||
<el-card style=" height:100%;margin-bottom:10px ; " :body-style={padding:0} >
|
||
<div style="display:flex;">
|
||
<el-divider direction="vertical" class="sublabel"></el-divider>
|
||
<span class='title'>事件详情</span>
|
||
</div>
|
||
<el-table :data="detailData"
|
||
style="width: 100%"
|
||
:header-cell-style="{background: 'rgba(242, 242, 242, 0.654901960784314)'}"
|
||
border
|
||
:row-style="{height:'28px'}"
|
||
:cell-style="{padding:'0px'}"
|
||
header-row-class-name="active_header"
|
||
header-cell-class-name="active_header"
|
||
cell-class-name="content_center"
|
||
>
|
||
<el-table-column
|
||
width="500"
|
||
prop="事件名称"
|
||
label="事件名称">
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="300"
|
||
prop="法人代表"
|
||
label="法人代表">
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="200"
|
||
prop="事件日期"
|
||
label="事件日期">
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="50"
|
||
prop="分歧度"
|
||
label="分歧度">
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="80"
|
||
prop="等级"
|
||
label="风险等级">
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
</el-card>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script >
|
||
import qs from 'qs'
|
||
// import { getData } from "../api";
|
||
import * as echarts from "echarts"
|
||
import http from '../utils/request'
|
||
import {Loading} from "element-ui";
|
||
export default {
|
||
components:{
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
dialogVisible:false,
|
||
detailData:[],
|
||
tableData:[],
|
||
// 【接收数据】
|
||
sentiment:[],
|
||
clout:[],
|
||
targetId:'',
|
||
formInline1: {
|
||
company: '',
|
||
event_type: '',
|
||
start_date:'',
|
||
end_date:'',
|
||
},
|
||
|
||
|
||
|
||
// 【选择框】
|
||
options:[
|
||
{
|
||
value: '',
|
||
label: '全部'
|
||
},
|
||
{
|
||
value: '股权增持',
|
||
label: '股权增持'
|
||
}, {
|
||
value: '股东减持',
|
||
label: '股东减持'
|
||
}, {
|
||
value: '股权质押',
|
||
label: '股权质押'
|
||
}, {
|
||
value: '其他',
|
||
label: '其他'
|
||
},
|
||
{
|
||
value: '重大财产损失',
|
||
label: '重大财产损失'
|
||
},
|
||
{
|
||
value: '重大安全事故',
|
||
label: '重大安全事故'
|
||
},
|
||
{
|
||
value: '股权冻结',
|
||
label: '股权冻结'
|
||
},
|
||
{
|
||
value: '高层死亡',
|
||
label: '高层死亡'
|
||
},
|
||
{
|
||
value: '破产清算',
|
||
label: '破产清算'
|
||
},
|
||
{
|
||
value: '重大对外赔付',
|
||
label: '重大对外赔付'
|
||
},
|
||
|
||
]
|
||
,
|
||
|
||
option_detail_company: [{
|
||
value: '公司1',
|
||
label: '公司1'
|
||
}, {
|
||
value: '公司2',
|
||
label: '公司2'
|
||
}],
|
||
option_detail_time: [{
|
||
value: '一天内',
|
||
label: '一天内'
|
||
}, {
|
||
value: '近三天',
|
||
label: '近三天'
|
||
}
|
||
, {
|
||
value: '一周内',
|
||
label: '一周内'
|
||
}
|
||
, {
|
||
value: '一个月内',
|
||
label: '一个月内'
|
||
}
|
||
, {
|
||
value: '一年内',
|
||
label: '一年内'
|
||
}
|
||
],
|
||
option_prediction: [
|
||
{
|
||
value: '一小时内',
|
||
label: '一小时内'
|
||
}, {
|
||
value: '三小时内',
|
||
label: '三小时内'
|
||
}
|
||
, {
|
||
value: '六小时内',
|
||
label: '六小时内'
|
||
}
|
||
,
|
||
{
|
||
value: '一天内',
|
||
label: '一天内'
|
||
}, {
|
||
value: '近三天',
|
||
label: '近三天'
|
||
}
|
||
, {
|
||
value: '一周内',
|
||
label: '一周内'
|
||
}
|
||
, {
|
||
value: '一个月内',
|
||
label: '一个月内'
|
||
}
|
||
, {
|
||
value: '一年内',
|
||
label: '一年内'
|
||
}
|
||
],
|
||
|
||
|
||
|
||
|
||
|
||
// 【知识图谱】
|
||
old_data:[
|
||
{事件标题:"XX股东XX时间增持XX股票事件",
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/1/4",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"积极",
|
||
事件热度:"30",
|
||
时间:"2022/1/4",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"消极",
|
||
事件热度:"45",
|
||
时间:"2022/1/4",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"消极",
|
||
事件热度:"30",
|
||
时间:"2022/1/4",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"中性",
|
||
事件热度:"30",
|
||
时间:"2022/1/4",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"积极",
|
||
事件热度:"30",
|
||
时间:"2022/3/8",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/10",},
|
||
{ 事件标题: "XX股东XX时间增持XX股票事件",
|
||
情感倾向:"消极",
|
||
事件热度:"45",
|
||
时间:"2022/3/10",},
|
||
{ 事件标题: 8,
|
||
情感倾向:"中性",
|
||
事件热度:"30",
|
||
时间:"2022/3/10",},
|
||
{ 事件标题: 9,
|
||
情感倾向:"消极",
|
||
事件热度:"30",
|
||
时间:"2022/3/14",},
|
||
{ 事件标题: 10,
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/14",},
|
||
{ 事件标题:11,
|
||
情感倾向:"积极",
|
||
事件热度:"45",
|
||
时间:"2022/3/18",},
|
||
{ 事件标题: 12,
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/18",},
|
||
{ 事件标题: 13,
|
||
情感倾向:"积极",
|
||
事件热度:"45",
|
||
时间:"2022/3/18",},
|
||
{ 事件标题: 14,
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/18",},
|
||
{ 事件标题: 15,
|
||
情感倾向:"消极",
|
||
事件热度:"45",
|
||
时间:"2022/3/30",},
|
||
{ 事件标题: 16,
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/26",},
|
||
{ 事件标题: 17,
|
||
情感倾向:"消极",
|
||
事件热度:"30",
|
||
时间:"2022/3/26",},
|
||
{ 事件标题: 18,
|
||
情感倾向:"中性",
|
||
事件热度:"45",
|
||
时间:"2022/3/26",},],
|
||
|
||
|
||
|
||
// 图数据
|
||
// 查看详情-card2-事件热度分析
|
||
circularData1: [
|
||
{ value: 735, name: '积极' },
|
||
{ value: 735, name: '消极' }
|
||
// { value: 580, name: 'Email' },
|
||
// { value: 484, name: 'Union Ads' },
|
||
// { value: 300, name: 'Video Ads' }
|
||
],
|
||
circularData2: [
|
||
{ value: 4445, name: '积极' },
|
||
{ value: 735, name: '消极' }
|
||
// { value: 580, name: 'Email' },
|
||
// { value: 484, name: 'Union Ads' },
|
||
// { value: 300, name: 'Video Ads' }
|
||
],
|
||
|
||
|
||
}
|
||
},
|
||
|
||
mounted(){
|
||
//关系图
|
||
//基于准备好的dom，初始化echarts实例
|
||
// var ROOT_PATH = 'https://echarts.apache.org/examples';
|
||
// console.log(this.old_data.情感倾向)
|
||
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||
var legends = ['消极', '中性', '积极'];
|
||
var colors=[ "#D9001B","#009DD9","#90F204"]
|
||
const markLineList=[] //垂直线
|
||
const timeList=[]//存不重复的时间
|
||
const nor_time=[]//存所有的时间
|
||
const nodeid=[]
|
||
const new_data=[]
|
||
|
||
|
||
|
||
var count=0
|
||
for(let {时间: time} of this.old_data){
|
||
nor_time.push(time)
|
||
// 返回值等于-1 说明数组timeList中不存在time,则存入
|
||
if(timeList.indexOf(time)==-1 ){
|
||
timeList.push(time)
|
||
nodeid.push(count)
|
||
markLineList.push({xAxis: count})
|
||
count=count+1
|
||
}
|
||
|
||
}
|
||
|
||
timeList.sort(function (a, b) {
|
||
return a - b; //a - b < 0: 代表后一个比前一个大，就是升序
|
||
})
|
||
|
||
const x_y=[]
|
||
// console.log(timeList.length)
|
||
for (var i = 0; i < timeList.length; i++) {
|
||
|
||
var x=i
|
||
var y=1//初始为1让坐标轴暴露更明显
|
||
for (var item of nor_time){
|
||
if(item===timeList[i] ){
|
||
y+=1
|
||
x_y.push([x,y])
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// console.log(x_y)
|
||
}
|
||
|
||
for (var i = 0; i < this.old_data.length; i++) {
|
||
var index=legends.indexOf(this.old_data[i].情感倾向)
|
||
|
||
new_data.push({
|
||
id:i,
|
||
name:this.old_data[i].事件标题,
|
||
// label注释掉，tooltip才会正常显示
|
||
// label: {
|
||
//
|
||
// show: true,
|
||
// position: "bottom",
|
||
// fontSize: 13,
|
||
// width:2,
|
||
// overflow:'break',
|
||
// formatter:'{b}:',
|
||
// // data:legends[index],
|
||
// // color: "rgb(0, 0, 0)",
|
||
// },
|
||
// color: colors[index],
|
||
symbolSize:this.old_data[i].事件热度,
|
||
// symbolSize:20,
|
||
value: x_y[i],
|
||
itemStyle: {
|
||
borderColor: '#fff',
|
||
borderWidth: 2,
|
||
shadowBlur: 2,
|
||
shadowColor: '#999999',
|
||
color: colors[index],
|
||
},
|
||
tooltip:{show:true,
|
||
trigger:'axis',
|
||
triggeron:'mousemove',
|
||
formatter:'event'
|
||
},
|
||
|
||
})}
|
||
|
||
|
||
// console.log(new_data)
|
||
const option = {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
// title: {
|
||
// text: '笛卡尔坐标系上的 Graph'
|
||
// },
|
||
xAxis:[ {
|
||
// type : 'category',
|
||
// boundaryGap : false,
|
||
data : timeList
|
||
}
|
||
],
|
||
yAxis: {
|
||
show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||
// type : 'category',//注释后，数轴0开始，不然点会遮住坐标轴
|
||
// boundaryGap : false,//位于点还是位于区域
|
||
// data: ['a','b','c','d']
|
||
},
|
||
legend: {
|
||
data: ['消极', '中性', '积极'], //图例的数据
|
||
top: "15%", //图例的位置
|
||
icon:"circle", //图例的形状
|
||
x: 'right', //图例在右侧
|
||
orient: 'vertical', //图例纵向排布 horizontal为横向排布
|
||
textStyle: { //图例字体的颜色
|
||
color: "#ffffff"
|
||
}},
|
||
series: [
|
||
{
|
||
type: 'graph',
|
||
// layout: 'none',
|
||
coordinateSystem: 'cartesian2d',
|
||
|
||
// 垂直线
|
||
markLine: {
|
||
symbol: ['none', 'none'],
|
||
label: { show: false },
|
||
data: markLineList,
|
||
lineStyle: {//标注线样式
|
||
type: 'dashed',//虚线
|
||
color: '#999999',//标注线颜色
|
||
},
|
||
},
|
||
// label: {
|
||
//
|
||
// show: true,
|
||
// position: "bottom",
|
||
// fontSize: 13,
|
||
// width:5,
|
||
// overflow:'truncate',
|
||
// formatter:'{b}:',
|
||
// // data:legends[index],
|
||
// // color: "rgb(0, 0, 0)",
|
||
// },
|
||
// 边两段的类型和大小
|
||
edgeSymbol: ['circle', 'circle'],
|
||
edgeSymbolSize: [4,4],
|
||
//
|
||
data:new_data,
|
||
//显示节点备注
|
||
// itemStyle : {
|
||
// normal: {label : {show: true}},
|
||
// textStyle: {
|
||
// color: '#000'
|
||
// }
|
||
// },
|
||
// 边
|
||
links: [
|
||
{source: 0, target: 5},
|
||
{source: 5, target: 6},
|
||
{source: 1, target: 7},
|
||
{source: 2, target: 8},
|
||
{source: 3, target: 13},
|
||
{source: 8, target: 9},
|
||
],
|
||
lineStyle: {//关系线样式
|
||
type: 'solid',//实线
|
||
color: "rgb(0, 0, 0,80%)",//标注线颜色
|
||
width: "2",
|
||
},
|
||
}]
|
||
}
|
||
echarts1.setOption(option)
|
||
console.log(echarts1.getOption())
|
||
echarts1.on('click',function (params){
|
||
// console.log(params.name)
|
||
})
|
||
// this.tableData=JSON.parse(sessionStorage.getItem('eventData'))
|
||
if (this.tableData.length!==0)
|
||
this.changeChart()
|
||
// let target=JSON.parse(sessionStorage.getItem('target'))
|
||
// this.formInline1.company=target[0]
|
||
// this.formInline1.event_type=target[1]
|
||
// this.formInline1.start_date=target[2]
|
||
// this.formInline1.end_date=target[3]
|
||
},
|
||
|
||
|
||
|
||
methods:{
|
||
|
||
test(){
|
||
console.log('test')
|
||
},
|
||
// 调整表格列宽
|
||
calculateColumnWidth(prop) {
|
||
const text = String(this.tableData[0][prop]); // 使用第一行的数据作为示例
|
||
const calculatedWidth = text.length;
|
||
console.log('console.log(calculatedWidth):',calculatedWidth)
|
||
if(calculatedWidth>10 && calculatedWidth<=50){
|
||
const baseWidth= 20 + calculatedWidth * 0.3
|
||
return `${baseWidth}px`;
|
||
}
|
||
if(calculatedWidth>50){
|
||
const baseWidth= 20 + calculatedWidth * 0.5
|
||
return `${baseWidth}px`;
|
||
}
|
||
else{
|
||
return "20px";
|
||
}
|
||
},
|
||
|
||
//新闻联想搜索
|
||
querySearch(queryString, cb) {
|
||
// console.log(queryString)
|
||
// console.log(cb)
|
||
http.get(
|
||
"/search/search_news/?name=?"+queryString,
|
||
|
||
// paramsSerializer: params => {
|
||
// return qs.stringify(params, { indices: false })
|
||
).then(response => {
|
||
// console.log(response.data)
|
||
// console.log(cb)
|
||
let result=response.data
|
||
let re=[]
|
||
for (let i of result){
|
||
re.push({"value":i})
|
||
}
|
||
cb(re)
|
||
})},
|
||
// 1、表
|
||
onSubmit1(){//事件分析
|
||
this.tableData.length=0
|
||
let options={
|
||
text:'请稍等'
|
||
}
|
||
let loadingInstance = Loading.service(options);
|
||
http.get(
|
||
"/event2/event_analyse/",
|
||
{params:{
|
||
name: this.formInline1.company,
|
||
event_type:this.formInline1.event_type,
|
||
start:this.formInline1.start_date,
|
||
end:this.formInline1.end_date,
|
||
need:1
|
||
}}).then(response => {
|
||
this.tableData = response.data.data.data
|
||
let links= response.data.data.edges
|
||
let intLink=[]
|
||
// for (let i in links){
|
||
// intLink.push({source:parseInt(links[i]['source']),target:parseInt(links[i]['target'])})
|
||
// }
|
||
|
||
|
||
for (let i in links){
|
||
intLink.push({source:this.tableData.find(function(obj) {
|
||
return obj.order === parseInt(links[i]['source'])}).title,
|
||
target:this.tableData.find(function(obj) {
|
||
return obj.order === parseInt(links[i]['target'])}).title
|
||
|
||
})
|
||
|
||
}
|
||
console.log(intLink)
|
||
this.changeChart(intLink)
|
||
})
|
||
loadingInstance.close()
|
||
},
|
||
changeChart(links){
|
||
// console.log(this.tableData)
|
||
//关系图
|
||
//基于准备好的dom，初始化echarts实例
|
||
// var ROOT_PATH = 'https://echarts.apache.org/examples';
|
||
const echarts1 = echarts.init(this.$refs.echarts_1)
|
||
const markLineList=[] //垂直线
|
||
const timeList=[]//存不重复的时间
|
||
const nor_time=[]//存所有的时间
|
||
const nodeid=[]
|
||
const new_data=[]
|
||
var count=0
|
||
for(let {publish_time: time} of this.tableData){
|
||
// console.log(time)
|
||
nor_time.push(time)
|
||
// 返回值等于-1 说明数组timeList中不存在time,则存入
|
||
if(timeList.indexOf(time)===-1 ){
|
||
timeList.push(time)
|
||
nodeid.push(count)
|
||
markLineList.push({xAxis: count})
|
||
count=count+1
|
||
}
|
||
|
||
}
|
||
// console.log(timeList)
|
||
timeList.sort(function (a, b) {
|
||
if( a.split(' ')[0]<b.split(' ')[0] || a.split(' ')[0]===b.split(' ')[0] && a.split(' ')[1]<b.split(' ')[1])
|
||
return -1; //a - b < 0: 代表后一个比前一个大，就是升序
|
||
else if ( a.split(' ')[0]>b.split(' ')[0] || a.split(' ')[0]===b.split(' ')[0] && a.split(' ')[1]>b.split(' ')[1])
|
||
return 1
|
||
else return 0
|
||
})
|
||
// console.log(timeList)
|
||
let tmp=[]
|
||
// 仅显示部分新闻
|
||
if (this.tableData.length>20) {
|
||
var p = 20 / this.tableData.length
|
||
this.$notify.info({
|
||
title: '提示',
|
||
message: '事件图谱仅显示部分数据'
|
||
});
|
||
for (let i = 0; i < this.tableData.length; i++) {
|
||
// let index=legends.indexOf(this.old_data[i].情感倾向)
|
||
let y = Math.floor(Math.random() * 10 ) + 1 //随机散列开
|
||
if (Math.random() < p) {
|
||
let x = timeList.indexOf(this.tableData[i].publish_time)
|
||
while (tmp.find(value => value === [x, y]))
|
||
y=Math.floor(Math.random() * 10 ) + 1 //随机散列开
|
||
tmp.push([x, y])
|
||
// console.log(x, y)
|
||
new_data.push({
|
||
id: parseInt(this.tableData[i].order),
|
||
name: this.tableData[i].title, //根据name连边
|
||
// name: this.tableData[i].title,
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: "bottom",
|
||
// textStyle: {
|
||
// fontSize: 8
|
||
// },},
|
||
//
|
||
// // data:legends[index],
|
||
// color: "rgb(0, 0, 0)",
|
||
// },
|
||
// color: colors[index],
|
||
symbolSize: this.tableData[i].clout * 30,
|
||
// symbolSize:20,
|
||
value: [x, y],
|
||
itemStyle: {
|
||
borderColor: '#fff',
|
||
borderWidth: 2,
|
||
shadowBlur: 2,
|
||
shadowColor: '#999999',
|
||
color: 'green',
|
||
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
triggeron: 'mousemove',
|
||
formatter: 'event'
|
||
},
|
||
|
||
})
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
for (let i = 0; i < this.tableData.length; i++) {
|
||
// let index=legends.indexOf(this.old_data[i].情感倾向)
|
||
let y = Math.floor(Math.random() * 10) + 1
|
||
let x = timeList.indexOf(this.tableData[i].publish_time)
|
||
while (tmp.find(value => value === [x, y]))
|
||
y=Math.floor(Math.random() * 10) + 1
|
||
tmp.push([x, y])
|
||
console.log(x, y)
|
||
new_data.push({
|
||
id: parseInt(this.tableData[i].order),
|
||
name: this.tableData[i].title, //根据name连边
|
||
// label: {
|
||
// normal: {
|
||
// show: true,
|
||
// position: "bottom",
|
||
// textStyle: {
|
||
// fontSize: 8
|
||
// },},
|
||
//
|
||
// // data:legends[index],
|
||
// color: "rgb(0, 0, 0)",
|
||
// },
|
||
// color: colors[index],
|
||
symbolSize: this.tableData[i].clout * 30,
|
||
// symbolSize:20,
|
||
value: [x, y],
|
||
itemStyle: {
|
||
borderColor: '#fff',
|
||
borderWidth: 2,
|
||
shadowBlur: 2,
|
||
shadowColor: '#999999',
|
||
color: 'green',
|
||
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
trigger: 'axis',
|
||
triggeron: 'mousemove',
|
||
formatter: 'event'
|
||
},
|
||
})
|
||
}
|
||
}
|
||
const option = {
|
||
// 右上角存图
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
// title: {
|
||
// text: '笛卡尔坐标系上的 Graph'
|
||
// },
|
||
xAxis:[ {
|
||
// type : 'category',
|
||
// boundaryGap : false,
|
||
data : timeList
|
||
}
|
||
],
|
||
yAxis: {
|
||
show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
||
// type : 'category',//注释后，数轴0开始，不然点会遮住坐标轴
|
||
// boundaryGap : false,//位于点还是位于区域
|
||
// data: ['a','b','c','d']
|
||
},
|
||
legend: {
|
||
data: ['消极', '中性', '积极'], //图例的数据
|
||
top: "15%", //图例的位置
|
||
icon:"circle", //图例的形状
|
||
x: 'right', //图例在右侧
|
||
orient: 'vertical', //图例纵向排布 horizontal为横向排布
|
||
textStyle: { //图例字体的颜色
|
||
color: "#ffffff"
|
||
}},
|
||
// legend: {
|
||
// normal: {
|
||
// data: ['消极', '中性', '积极'],
|
||
// show: true,}
|
||
// },
|
||
series: [
|
||
{
|
||
type: 'graph',
|
||
// layout: 'none',
|
||
coordinateSystem: 'cartesian2d',
|
||
|
||
// 垂直线
|
||
markLine: {
|
||
symbol: ['none', 'none'],
|
||
label: { show: false },
|
||
data: markLineList,
|
||
lineStyle: {//标注线样式
|
||
|
||
type: 'dashed',//虚线
|
||
color: '#999999',//标注线颜色
|
||
|
||
},
|
||
},
|
||
|
||
// 边两段的类型和大小
|
||
edgeSymbol: ['circle', 'circle'],
|
||
edgeSymbolSize: [4,4],
|
||
//
|
||
data:new_data,
|
||
|
||
//显示节点备注
|
||
// itemStyle : {
|
||
// normal: {label : {show: true}},
|
||
// textStyle: {
|
||
// color: '#000'
|
||
// }
|
||
// },
|
||
// 边
|
||
links: links,
|
||
|
||
// [
|
||
// {source: 0, target: 5},
|
||
// {source: 5, target: 6},
|
||
// {source: 1, target: 7},
|
||
// {source: 2, target: 8},
|
||
// {source: 3, target: 13},
|
||
// {source: 8, target: 9},
|
||
// ],
|
||
lineStyle: {//关系线样式
|
||
type: 'solid',//实线
|
||
color: "rgb(0, 0, 0,80%)",//标注线颜色
|
||
width: "2",
|
||
}
|
||
}]
|
||
}
|
||
echarts1.setOption(option)
|
||
console.log(echarts1.getOption())
|
||
// 点击事件弹窗
|
||
echarts1.on('click',(parms)=>{
|
||
console.log(parms)
|
||
http.get('/event2/event_graph/',
|
||
{params:{
|
||
id:parms.data.id
|
||
}}
|
||
).then((res)=>{
|
||
console.log(res.data)
|
||
this.detailData.length=0
|
||
this.detailData.push(res.data)
|
||
this.dialogVisible=true
|
||
})
|
||
})
|
||
},
|
||
|
||
|
||
open(){
|
||
this.$nextTick(() => {
|
||
// 执行echarts方法
|
||
// this.initEcharts1()
|
||
this.initEcharts2()
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 调整表头间隔、设置表头下方边框颜色
|
||
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
||
border-bottom: 1px solid rgba(224, 223, 223, 0.771) !important;
|
||
padding: 0px 0 !important;
|
||
min-width: 0 !important;
|
||
}
|
||
.el-table .el-table__cell {
|
||
padding: 12px 0;
|
||
min-width: 0;
|
||
}
|
||
/deep/ .active_header{//表头
|
||
color: #333333;
|
||
font-size: 13px;
|
||
text-align: center !important;
|
||
// height: 1px;
|
||
}
|
||
/deep/ .content_center{//表的内容
|
||
text-align: center !important;
|
||
font-size: 13px;
|
||
}
|
||
|
||
|
||
.one{
|
||
.form{//产品搜索栏
|
||
|
||
display:flex;
|
||
justify-content:space-between;//左右贴边
|
||
margin-top:5px;
|
||
// height: 40px;
|
||
padding-left: 20px;
|
||
|
||
}
|
||
.content{
|
||
padding: 0px 20px 2px 20px;//返回表格添加间隙 上 右
|
||
font-size: 12px;
|
||
|
||
|
||
|
||
}
|
||
.text{
|
||
color:rgba(2, 167, 240, 0.729411764705882);
|
||
}
|
||
|
||
}
|
||
.two{
|
||
margin-top:10px;
|
||
}
|
||
// 详情页
|
||
.flex-charts{//并列图
|
||
// margin-top:20px;
|
||
display:flex;
|
||
justify-content:space-between;
|
||
// padding:20px;
|
||
}
|
||
.grayish_btn{//浅灰色按钮
|
||
color: #fff;//文字颜色
|
||
background-color: #aaaaaa;//背景颜色
|
||
}
|
||
</style>
|