vue结合echarts-点击echarts图表内容，在图表上⾯出现⼀个弹框， 最近有⼀个效果，就是在vue项⽬中使⽤echarts图表，点击图表的时候，弹⼀个框，在点击图表其它部分，弹框消失，并且，弹框要显⽰在图表范围内，不可超出图表区域。
看⼀下效果图
上代码：
css代码
#gxid{
height: 100%;
width: 100%;
border: 1px solid #efefef;
}
.con_box{
position: relative;
height: 600px;
width: 900px;
margin: 0 auto;
}
.vshow{
position: absolute;
width: 300px;
height: 280px;
background: lightcoral;
湖南
科技学院图书馆
}
html
<template>
<div class="con_box">
<div id="gxid"@click.prevent="boxss"></div>
<div class="vshow"v-if="modelShow":>
<div @click="bons">123132</div>
</div>
</div>
</template>
<script>
import axios from"@/assets/js/axios.js";
import ECharts from'echarts'
export default{
data(){
return{
msg:"",
modelShow:false,
modelLeft:'',
modelright:'',
ecbox:{//图表宽⾼
width:900,
height:600
},
ecmodel:{//弹框宽⾼
width:300,
height:280
},
modelStyle:{
left:'',
top:''
}
};
金大奶奶},
mounted(){
<();
},
methods:{
bons(){
console.log(11)
},
boxss(){
},
gxec(){
<("../a.json").then((res)=>{
});
},
gxecharts(graph){
const _this=this
var myChart = ECharts.ElementById("gxid"));//注意获取id⽅式 console.log(graph)
var categories =[];
for(var i =0; i <9; i++){
categories[i]={
name:"类⽬"+ i,
};
}
node.itemStyle =null;
node.value = node.symbolSize;
node.symbolSize /=1.5;
node.label ={
show: node.symbolSize >30,
};
node.category = dularity_class;
});
let option ={
title:{
text:"Les Miserables",
subtext:"Default layout",
top:"bottom",
left:"right",
},
tooltip:{},
legend:[
{
// selectedMode: 'single',
data: categories.map(function(a){
return a.name;
}),
王潮歌老公
},
],
animationDuration:1500,
animationEasingUpdate:"quinticInOut",
series:[
{
name:"Les Miserables",
730矿
type:"graph",
layout:"none",
data: des,
links: graph.links,
categories: categories,朱莉娅 吉拉德
roam:true,
focusNodeAdjacency:true,
itemStyle:{
itemStyle:{
borderColor:"#fff",
borderWidth:1,
shadowBlur:10,
shadowColor:"rgba(0, 0, 0, 0.3)",
},
label:{
position:"right",
formatter:"{b}",
},
lineStyle:{
color:"source",
curveness:0.3,
},
emphasis:{
lineStyle:{
width:10,
},
},
},
],
};
myChart.setOption(option);
<('click',function(params){
//点击空⽩处阻⽌默认事件
工程监理企业资质管理规定params.event.event.stopPropagation()
console.log(params)
//当图表被点击的时候，
_delShow=true;
let mw=window.event;
//当model框显⽰时，判断是否有⾜够的空间
if((_box.width - mw.offsetX -20)>_del.width){
_delStyle.left=mw.offsetX+20+"px"
}else{
_delStyle.left=mw.offsetX - _del.width -20+'px' }
if((_box.height - mw.offsetY -10)>_del.height){ _p=mw.offsetY +"px"
}else{
_p=mw.del.height +'px'
}
})
},
},
};
</script>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议