vue结合echarts-点击echarts图表内容,在图表上面出现一个弹框,
最后有一个效果,就是在vue项目中使用echarts图表,点击图表的时候,弹一个框,在点击图表其它部分,弹框消失,并且,弹框要显示在图表范围内,不可超出图表区域。看一下效果图上代码:<style>#gxid {height: 100%;width: 100%;border: 1px solid #efefef;}.con_box{position: relative;height: 6
·
最近有一个效果,就是在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" :style="modelStyle">
<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() {
this.gxec();
},
methods: {
bons(){
console.log(11)
},
boxss(){
this.modelShow=false
},
gxec() {
axios.get("../a.json").then((res) => {
this.gxecharts(res.data)
});
},
gxecharts(graph) {
const _this= this
var myChart = ECharts.init(document.getElementById("gxid")); //注意获取id方式
console.log(graph)
var categories = [];
for (var i = 0; i < 9; i++) {
categories[i] = {
name: "类目" + i,
};
}
graph.nodes.forEach(function (node) {
node.itemStyle = null;
node.value = node.symbolSize;
node.symbolSize /= 1.5;
node.label = {
show: node.symbolSize > 30,
};
node.category = node.attributes.modularity_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",
type: "graph",
layout: "none",
data: graph.nodes,
links: graph.links,
categories: categories,
roam: true,
focusNodeAdjacency: true,
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);
myChart.on('click',function(params){
//点击空白处阻止默认事件
params.event.event.stopPropagation()
console.log(params)
//当图表被点击的时候,
_this.modelShow=true;
let mw=window.event;
//当model框显示时,判断是否有足够的空间
if((_this.ecbox.width - mw.offsetX -20)>_this.ecmodel.width){
_this.modelStyle.left=mw.offsetX+20 +"px"
}else{
_this.modelStyle.left=mw.offsetX - _this.ecmodel.width -20 + 'px'
}
if((_this.ecbox.height - mw.offsetY - 10 )>_this.ecmodel.height){
_this.modelStyle.top=mw.offsetY +"px"
}else{
_this.modelStyle.top=mw.offsetY-_this.ecmodel.height + 'px'
}
})
},
},
};
</script>
这是全部代码,直接复制引入echarts就可以
更多推荐
已为社区贡献4条内容
所有评论(0)