echarts 关系图graph
<template>
<!-- 横向柱状图 -->
<div class='s-c'>
<div class='s-chart' ref='sell'>
</div>
<div class='s-i'>
<ul v-if=''>
<li @click="showTab">{{time}} ↓</li>
<div v-show='show' class='s-t'>
<li v-for="(item,index) in timeList" @click='tabChange(index,item)' :key="index">
{{item}}
</li>
</div>
</ul>
</div>
</div>
</template>
<script>
export default {
props:['theme'],
name:'sell',
data(){
return{
data:[],
time:'2020年2月28日',
timeArr:[],
currentIndex:0,
show:false
}
},
watch:{
theme(v)
{
console.log(v);
this.myMap.dispose();
this._initChart();
this._resizeCode();
}
},
computed:
{
timeList()
{
return this.timeArr.filter((item,index)=>{
if(item!=this.time)
{
return true;
}
})
// return
}
},
mounted()
{
this._getData();
//适配化配置调用
this._resize();
},
//组件销毁前卸载监听
beforeDestroy()
{
window.onresize=null;
},
methods:{
async _getData()
{
let res=await this.$axios.get('/data/');
let data=JSON.stringify(res.data);
data=JSON.parse(data);
this.data=data;
this.data.forEach((item,index)=>{
if(this.timeArr.indexOf(item["发布时间"])==-1)
{
this.timeArr.push(item["发布时间"]);
}
});
this._initChart();
},
_initChart()
{
this.myMap = this.$echarts.init(this.$refs.sell,'chalk');
//完成除数据和宽度适配以外的一些初始配置
let option={
title:{
text:'| 四川省成都市风险图',
left: 20,
top: 20,
textStyle:{
color:'white'
}
},
animationDurationUpdate: function(idx) {
// 越往后的数据延迟越大
return idx * 100;
},
animationEasingUpdate: 'bounceIn',
series:[
{
type: 'graph',
layout: 'force',
force: {
repulsion: 30,
edgeLength: 10
},
roam: true,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}',
fontSize: 12,
fontStyle: '400',
}
},
links: [{
"source": "1",
"target": "总集"
},
{
"source": "2",
"target": "总集"
},
{
"source": "3",
"target": "总集"
},
{
"source": "4",
"target": "总集"
},
{
"source": "5",
"target": "总集"
},
{
"source": "6",
"target": "总集"
}, {
"source": "7",
"target": "总集"
}, {
"source": "8",
"target": "总集"
}, {
"source": "9",
"target": "总集"
}, {
"source": "10",
"target": "总集"
},{
"source": "11",
"target": "总集"
},
{
"source": "12",
"target": "总集"
},
{
"source": "13",
"target": "总集"
},
{
"source": "14",
"target": "总集"
},
{
"source": "15",
"target": "总集"
},
{
"source": "16",
"target": "总集"
}, {
"source": "17",
"target": "总集"
}, {
"source": "18",
"target": "总集"
}, {
"source": "19",
"target": "总集"
}, {
"source": "20",
"target": "总集"
}
]
}
],
}
this.myMap.setOption(option);
this._updateChart(this.time)
},
//根据数据配置图表
_updateChart(date)
{
//根据当前页数获取对应数据
let sdata=this._handleData(date);
let option = {
legend:{show:true},
series: [{
data: sdata,
categories:[{name:'低风险',itemStyle:{color:'#03fc62'}},{name:'中风险',itemStyle:{color:'#00fff7'}}],
}]
}
this.myMap.setOption(option);
},
_handleData(date)
{
// (())
let sdata=[];
let sdata2=[];
this.data.forEach((item,index)=>{
if(item["发布时间"]==date)
{
if(item["级别"]=='低风险')
{
sdata=item['区'].map((address,index)=>{
if(index==0)
{
return{
"name": index+1+'',
"value": address,
x: 75,
y: 6,
"symbolSize": 55,
"draggable": true,
category:'低风险',
"itemStyle": {
"normal": {
"borderColor": "#03fc62",
"borderWidth": 4,
"shadowBlur": 20,
"shadowColor": "#03fc62",
"color": "#11213b"
}
}
}
}
return{
"name": index+1+'',
"value": address,
"symbolSize": 55,
category:'低风险',
x: 0,
y: 0,
"draggable": true,
"itemStyle": {
"normal": {
"borderColor": "#03fc62",
"borderWidth": 4,
"shadowBlur": 20,
"shadowColor": "#03fc62",
"color": "#11213b"
}
}
}
})
// len=;
}else if(item["级别"]=='中风险'){
sdata2=item['区'].map((address,index)=>{
return{
"name": index+1+'',
"value": address,
"symbolSize": 55,
x: 0,
y: 0,
"draggable": true,
category:'中风险',
"itemStyle": {
"normal": {
"borderColor": "#00fff7",
"borderWidth": 4,
"shadowBlur": 20,
"shadowColor": "#00fff7",
"color": "#11213b"
}
}
}
})
}
}
})
sdata=sdata.concat(sdata2);
for(let i=20-sdata2.length;i<20;i++)
{
sdata[i].name=i+1+'';
}
sdata.push({
"name": "总集",
"value": '成都市',
"symbolSize": 80,
x: 0,
y: 0,
"draggable": true,
"itemStyle": {
"normal": {
"borderColor": "#0a95e6",
"borderWidth": 4,
"shadowBlur": 20,
"shadowColor": "#0a95e6",
"color": "#11213b"
}
}
});
return sdata;
},
showTab()
{
this.show=!this.show;
},
tabChange(index,time)
{
this.time=time;
this.show=!this.show;
this._updateChart(this.time);
},
//适配监听，整体图表,已经图表中的元素适配
_resize()
{
//第一次打开和刷新不改变窗口时,也进行适配
if(this.first)
{
this._resizeCode();
this.first=false;
}
//标题大小适配,根据容器大小分成100份,根据份数来试
window.onresize=()=>{
this._resizeCode();
}
},
//适配代码
_resizeCode()
{
let container=this.$refs.sell.offsetWidth;
let titleFontSize=container/100*3.6;
//适配图表
let option={
title:{
textStyle:{
fontSize:titleFontSize
}
},
tooltip:{
axisPointer:{
lineStyle:{
width:titleFontSize
}
}
},
series:{
barWidth:titleFontSize,
itemStyle: {
barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
}
}
}
this.myMap.setOption(option);
this.myMap.resize();
},
//鼠标监听,鼠标放上停止,移开播放
}
}
</script>
<style lang='less' scoped>
.s-c{
width: 100%;
height:100%;
position: relative;
.s-chart{
width: 100%;
height:100%;
}
.s-i{
position: absolute;
top:40px;
right: 20px;
padding: 5px 10px;
user-select: none;
.s-t{
background-color: #222733;
}
>ul{
list-style: none;
li:hover{
background-color:#397080;
cursor: pointer;
}
}
}
}
</style>