怎么在vue项目中使用echars实现一个上浮与下钻效果

本篇文章给大家分享的是有关怎么在vue项目中使用echars实现一个上浮与下钻效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

第一步：

在vue项目中安装echars

npm i echars -S

第二步:

main.js配置 这里是全局引入

//引入echars
importechartsfrom'echarts'
Vue.prototype.$echarts=echarts

第三步

直接上代码

<template>
<divid="container">
<header>浙江省echars地图</header>
<divid="echarsMap"></div>
</div>
</template>
<script>
//引入json
importzhejiangfrom"../../../static/zhejiangJson/zhejiang";
importhangzhoufrom"../../../static/zhejiangJson/hangzhou";
importhuzhoufrom"../../../static/zhejiangJson/huzhou";
importjiaxingfrom"../../../static/zhejiangJson/jiaxing";
importjinhuafrom"../../../static/zhejiangJson/jinhua";
importlanzhoufrom"../../../static/zhejiangJson/lanzhou";
importlishuifrom"../../../static/zhejiangJson/lishui";
importningbofrom"../../../static/zhejiangJson/ningbo";
importquzhoufrom"../../../static/zhejiangJson/quzhou";
importshaoxingfrom"../../../static/zhejiangJson/shaoxing";
importtaizhoufrom"../../../static/zhejiangJson/taizhou";
importwenzhoufrom"../../../static/zhejiangJson/wenzhou";
importzhoushanfrom"../../../static/zhejiangJson/zhoushan";
exportdefault{
name:"echars1",
data(){
return{
cityName:"",//区域的名字
markerArr:[],//接收散点图数据
};
},
methods:{
//画地图
initEchars(cityName){
varcityMap={
杭州市:hangzhou,
丽水市:lishui,
兰州市:lanzhou,
台州市:taizhou,
嘉兴市:jiaxing,
宁波市:ningbo,
温州市:wenzhou,
湖州市:huzhou,
绍兴市:shaoxing,
舟山市:zhoushan,
衢州市:quzhou,
金华市:jinhua
};
varname=[cityName];
varpos={
leftPlus:115,
leftCur:150,
left:198,
top:50
};
varline=[[0,0],[8,11],[0,22]];
//style
varstyle={
font:'18px"MicrosoftYaHei",sans-serif',
textColor:"#eee",
lineColor:"rgba(147,235,248,.8)"
};
if(cityName==""||cityName=="浙江"){
cityName="浙江";
this.$echarts.registerMap("浙江",zhejiang);
}
letmapCharts=this.$echarts.init(document.getElementById("echarsMap"));
letmapCharts_option={
//鼠标悬浮点标记
//tooltip:{
//padding:0,
//enterable:true,
//transitionDuration:1,
//textStyle:{
//color:"#000",
//decoration:"none"
//},
//formatter:function(params){
//vartipHtml="";
//tipHtml=
//'<div>'+
//'<div>'+
//'<i>'+
//"</i>"+
//'<span>'+
//params.data.org_name+
//"</span>"+
//"</div>"+
//'<div>'+
//'<p>'+
//'<i>'+
//"</i>"+
//"工程名称："+
//'<span>'+
//params.data.name+
//"</span>"+
//"</p>"+
//"</div>"+
//"</div>";
//returntipHtml;
//}
//},
//单词意思图形图表
graphic:[
{
type:"group",
left:pos.left,
top:pos.top-4,
children:[
{
type:"line",
left:0,
top:-20,
shape:{
x1:0,
y1:0,
x2:60,
y2:0
},
style:{
stroke:style.lineColor
}
},
{
type:"line",
left:0,
top:20,
shape:{
x1:0,
y1:0,
x2:60,
y2:0
},
style:{
stroke:style.lineColor
}
}
]
},
{
id:"",
type:"group",
left:pos.left+2,
top:pos.top,
children:[
{
type:"polyline",
left:90,
top:-12,
shape:{
points:line
},
style:{
stroke:"transparent",
key:name[0]
},
onclick:function(){}
},
{
type:"text",
left:0,
top:"middle",
style:{
text:"浙江",
textAlign:"center",
fill:style.textColor,
font:style.font
},
onclick:()=>{
mapCharts.clear();
this.$echarts.registerMap("浙江",zhejiang);
mapCharts_option.geo.map="浙江";
mapCharts.setOption(mapCharts_option,true);
}
},
{
type:"text",
left:0,
top:10,
style:{
text:"zhejiang",
textAlign:"center",
fill:style.textColor,
font:'12px"MicrosoftYaHei",sans-serif'
},
onclick:()=>{
mapCharts.clear();
this.$echarts.registerMap("浙江",zhejiang);
mapCharts_option.geo.map="浙江";
mapCharts.setOption(mapCharts_option,true);
}
}
]
}
],
//设置地图
geo:{
map:cityName,
zoom:"1.2",//缩放比例
scaleLimit:{
//缩放的限度
min:1,
max:30
},
roam:true,//单词意思是漫步实际是可以拖拽
label:{
//文字的颜色单词意思标签
normal:{
//静态的时候显示的默认样式
show:true,
color:"#fff"
},
emphasis:{
//鼠标移入动态的时候显示的默认样式
//show:false,
//color:'#333'
}
},
itemStyle:{
//区域设置
normal:{
borderColor:"rgba(147,235,248,1)",
borderWidth:1,
areaColor:{
type:"radial",
x:0.5,
y:0.5,
r:0.8,
colorStops:[
{
offset:0,
color:"rgba(147,235,248,0)"//0%处的颜色
},
{
offset:1,
color:"rgba(147,235,248,.2)"//100%处的颜色
}
],
globalCoord:false//缺省为false
},
shadowColor:"rgba(128,217,248,1)",
shadowOffsetX:-2,
shadowOffsetY:2,
shadowBlur:10
},
emphasis:{
//鼠标移入动态的时候显示区域颜色
areaColor:"#389BB7",
borderWidth:0
}
}
},
series:[]//存点标记的地方
};
mapCharts.clear();
mapCharts.setOption(mapCharts_option,true);
mapCharts.resize();
mapCharts.on("click",params=>{
//地图下钻
console.log(params);
if(cityMap[params.name]){
this.cityName=params.name;
varurl=cityMap[params.name];//对应的拼音区域
this.$echarts.registerMap(params.name,url);
mapCharts_option.geo.map=params.name;
mapCharts.setOption(mapCharts_option,true);
}
});
},
},
mounted(){
this.initEchars("浙江");
}
};
</script>
<stylelang="less"scoped>
#container{
width:100%;
height:calc(100%-78px);
background-color:pink;
#echarsMap{
width:80%;
height:80%;
background-color:#000;
margin:auto;
}
}
</style>

以上就是怎么在vue项目中使用echars实现一个上浮与下钻效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。