VUE echarts绘制省级/市级地图&自动轮循tooltip
VUE echarts绘制省级/市级地图&自动轮循tooltip1.echarts中没有直接的市级json；从[DataV](http://datav.aliyun.com/portal/school/atlas/area_selector)下载（以江苏南京市为例）2.创建nanjing.json，并把上图拿到的json数据放进去3.注入南京市地图json4.完整代码包含自动轮循
·
效果图
绘制省级地图
1.安装echarts依赖，并在main.js中准备
import echarts from "echarts"
Vue.prototype.$echarts = echarts
2.直接引入echarts里的省级地图json（江苏为例）
import 'echarts/map/js/province/jiangsu'
3.完整代码包含自动轮循
<template>
<div class="chartBox">
<div id="chartMap" style="width: 100%; height: 100%;"></div>
</div>
</template>
<script>
export default {
data () {
return {
timer:null,
};
},
mounted () {
this.draw('chartMap');
},
methods: {
getData(){
let _this = this
return new Promise(resolve => {
let citys = [
{name: '南京市', value: 0,total:0},
{name: '常州市', value: 0,total:0},
{name: '徐州市', value: 0,total:0},
{name: '淮安市', value: 0,total:0},
{name: '南通市', value: 0,total:0},
{name: '宿迁市', value: 0,total:0},
{name: '无锡市', value: 0,total:0},
{name: '扬州市', value: 0,total:0},
{name: '盐城市', value: 0,total:0},
{name: '苏州市', value: 0,total:0},
{name: '泰州市', value: 0,total:0},
{name: '镇江市', value: 0,total:0},
{name: '连云港市', value: 0,total:0}
]
resolve(citys)
})
},
draw (chart) {
let _this = this
let myChart = this.$echarts.init(document.getElementById(chart))
myChart.clear();
myChart.showLoading();
let index = -1;
_this.timer = setInterval(function () {
// 显示提示框
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index + 1,
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
// 高亮指定的数据图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index + 1,
});
index++;
if (index > 13) {
index = -1;
}
}, 4000);
myChart.on("click", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
myChart.on("mousemove", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
}); //---------------------------------------------鼠标移入静止播放
myChart.on("mouseout", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
}); //鼠标移出后先把上次的高亮取消
_this.timer = setInterval(function () {
// 隐藏提示框
myChart.dispatchAction({
type: "hideTip",
seriesIndex: 0,
dataIndex: index,
});
// 显示提示框
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index + 1,
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
// 高亮指定的数据图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index + 1,
});
index++;
if (index > 13) {
index = -1;
}
}, 2000);
});
myChart.hideLoading();
this.getData().then(result=>{
let citys = []
let cityMin = 0, cityMax = 0;
if(result&&result.length>0){
citys = result
cityMin = citys[0].value ? citys[0].value : 0;
cityMax = citys[0].value ? citys[0].value : 0;
for (var i = 0; i < citys.length - 1; i++) {
cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMin
cityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax
}
}
let option = {
title: {
text: '江苏省xx人数情况',
left: 0,
textStyle: {
fontSize: 16,
color: "#257dff",
}
},
grid: {
x:50,
y:55,
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
let zs_count = params.value?params.value:0
return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;
},
position:'right',
confine: true,
},
visualMap: {
left: 'left',
min: cityMin,
max: cityMax,
inRange: {
color: [
'#AFEEEE',
'#e0f3f8',
'#B0C4DE',
'#abd9e9',
'#87CEFA',
'#74add1',
'#6495ED',
'#4575b4',
'#4169E1',
'#5A4ABD',
'#6166b5',
]
},
text: ['High', 'Low'],
calculable: true,
show: false
},
series: [
{
name: '人数',
type: 'map',
roam: true,
map: '江苏',//这里的名字和导入的echarts/map/js/province/jiangsu.js文件里的名字要对应
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
textShadowBlur: 5,
textShadowColor: '#000',
}
}
},
itemStyle: {
emphasis: {
label: {
show: true,
textStyle: {
color: '#000',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
textShadowBlur: 10,
textShadowColor: '#fff',
}
},
areaColor: '#ff0'
}
},
// 文本位置修正
textFixed: {
Alaska: [20, - 20]
},
data: citys,
left: '30%',
top: 0,
right: '10%',
bottom: 0,
}
]
};
myChart.setOption(option)
})
},
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
destroyed () {
window.onresize = null;
clearInterval(this.timer);
this.timer = null;
}
};
</script>
<style scope lang="less" type="text/less">
.chartBox {
//width: 100%;height: 100%;
width: 500px;height: 500px;
}
</style>
市级地图（在上面省级地图的基础上修改）
1.echarts中没有直接的市级json；从DataV下载（以江苏南京市为例）
2.创建nanjing.json，并把上图拿到的json数据放进去
3.注入南京市地图json，没有这一步就不能继续玩了
let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
this.$echarts.registerMap('南京',nj_map);
4.完整代码包含自动轮循
<template>
<div class="chartBox">
<div id="chartMap" style="width: 100%; height: 100%;"></div>
</div>
</template>
<script>
export default {
data () {
return {
timer:null,
};
},
mounted () {
this.draw('chartMap');
},
methods: {
getData(){
let _this = this
return new Promise(resolve => {
let nanjing= require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
let citys= []
let areaList = nanjing.features
for (let i = 0; i < areaList.length; i++) {
res.push({
name: areaList[i].properties.name,
value: 0,
total: 0
})
}
resolve(citys)
})
},
draw (chart) {
let _this = this
let myChart = this.$echarts.init(document.getElementById(chart))
myChart.clear();
myChart.showLoading();
let index = -1;
_this.timer = setInterval(function () {
// 显示提示框
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index + 1,
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
// 高亮指定的数据图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index + 1,
});
index++;
if (index > 13) {
index = -1;
}
}, 4000);
myChart.on("click", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
myChart.on("mousemove", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
}); //---------------------------------------------鼠标移入静止播放
myChart.on("mouseout", function (e) {
clearInterval(_this.timer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
}); //鼠标移出后先把上次的高亮取消
_this.timer = setInterval(function () {
// 隐藏提示框
myChart.dispatchAction({
type: "hideTip",
seriesIndex: 0,
dataIndex: index,
});
// 显示提示框
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index + 1,
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
// 高亮指定的数据图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index + 1,
});
index++;
if (index > 13) {
index = -1;
}
}, 2000);
});
myChart.hideLoading();
//注入南京市地图json，没有这一步就不能继续玩了
let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
this.$echarts.registerMap('南京',nj_map);
this.getData().then(result=>{
let citys = []
let cityMin = 0, cityMax = 0;
if(result&&result.length>0){
citys = result
cityMin = citys[0].value ? citys[0].value : 0;
cityMax = citys[0].value ? citys[0].value : 0;
for (var i = 0; i < citys.length - 1; i++) {
cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMin
cityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax
}
}
let option = {
title: {
text: '南京市xx人数情况',
left: 0,
textStyle: {
fontSize: 16,
color: "#257dff",
}
},
grid: {
x:50,
y:55,
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
let zs_count = params.value?params.value:0
return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;
},
position:'right',
confine: true,
},
visualMap: {
left: 'left',
min: cityMin,
max: cityMax,
inRange: {
color: [
'#AFEEEE',
'#e0f3f8',
'#B0C4DE',
'#abd9e9',
'#87CEFA',
'#74add1',
'#6495ED',
'#4575b4',
'#4169E1',
'#5A4ABD',
'#6166b5',
]
},
text: ['High', 'Low'],
calculable: true,
show: false
},
series: [
{
name: '人数',
type: 'map',
roam: true,
map: '南京',//这里的名字和上面registerMap里的名字要对应
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
textShadowBlur: 5,
textShadowColor: '#000',
}
}
},
itemStyle: {
emphasis: {
label: {
show: true,
textStyle: {
color: '#000',
textShadowOffsetX: 0,
textShadowOffsetY: 0,
textShadowBlur: 10,
textShadowColor: '#fff',
}
},
areaColor: '#ff0'
}
},
// 文本位置修正
textFixed: {
Alaska: [20, - 20]
},
data: citys,
left: '30%',
top: 0,
right: '10%',
bottom: 0,
}
]
};
myChart.setOption(option)
})
},
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
destroyed () {
window.onresize = null;
clearInterval(this.timer);
this.timer = null;
}
};
</script>
<style scope lang="less" type="text/less">
.chartBox {
//width: 100%;height: 100%;
width: 500px;height: 500px;
}
</style>
前往低代码交流专区
更多推荐
8
0- 0
已为社区贡献2条内容
所有评论(0)