<template>
<div class="ui-map" id="main">
123
</div>
</template>
<script>
import * as echarts from "echarts";
import JSON from "../utils/500236.json"
export default {
data(){
return {
}
},
mounted () {
this.leftCenterMap()
},
methods:{
leftCenterMap () {
var chinaGeoCoordMap = {
'平安乡': [109.17,31.34],
'竹园镇': [109.27,31.30],
"青莲镇": [109.12,31.23],
'红土乡': [109.11,31.12],
"公平镇": [109.20,31.12],
"石岗乡": [109.34,31.12],
"大树镇": [109.33,31.21],
"康乐镇": [109.44,31.11],
"汾河镇": [109.51,31.13],
"岩湾乡": [109.53,31.19],
"草堂镇": [109.65,31.09],
"白帝镇": [109.60,31.06],
"白帝城风景区管理委员会": [109.55,31.04],
"永安镇": [109.46,31.02],
"朱衣镇": [109.39,31.02],
"康坪乡": [109.25,30.98],
"永乐镇": [109.52,31.03],
"安坪镇": [109.30,30.91],
"鹤峰乡": [109.55,30.93],
"新民镇": [109.47,30.90],
"甲高镇": [109.18,30.89],
"羊市镇": [109.05,30.82],
"吐祥镇": [109.16,30.71],
"青龙镇": [109.28,30.78],
"五马镇": [109.38,30.85],
"冯坪乡": [109.50,30.83],
"云雾土家族乡": [109.13,30.60],
"太和土家族乡": [109.26,30.64],
"龙桥土家族乡": [109.37,30.61],
"长安土家族乡": [109.56,30.83],
"兴隆镇": [109.45,30.66],
};
var datamap = [
{ name: '兴隆镇', value: 250 },
{ name: '长安土家族乡', value: 250 },
{ name: '龙桥土家族乡', value: 250 },
{ name: '太和土家族乡', value: 250 },
{ name: '云雾土家族乡', value: 250 },
{ name: '冯坪乡', value: 250 },
{ name: '五马镇', value: 250 },
{ name: '青龙镇', value: 250 },
{ name: '吐祥镇', value: 250 },
{ name: '羊市镇', value: 250 },
{ name: '甲高镇', value: 250 },
{ name: '新民镇', value: 250 },
{ name: '鹤峰乡', value: 250 },
{ name: '安坪镇', value: 250 },
{ name: '永乐镇', value: 250 },
{ name: '白帝城风景区管理委员会', value: 250 },
{ name: '白帝镇', value: 250 },
{ name: '草堂镇', value: 250 },
{ name: '岩湾乡', value: 250 },
{ name: '汾河镇', value: 250 },
{ name: '康乐镇', value: 250 },
{ name: '大树镇', value: 250 },
{ name: '公平镇', value: 250 },
{ name: '石岗乡', value: 250 },
{ name: '红土乡', value: 250 },
{ name: '青莲镇', value: 250 },
{ name: '竹园镇', value: 250 },
{ name: '平安乡', value: 250 },
];
var convertData = function (datamap) {
var res = [];
for (var i = 0; i < datamap.length; i++) {
var geoCoord = chinaGeoCoordMap[datamap[i].name];
if (geoCoord) {
res.push({
name: datamap[i].name,
value: geoCoord.concat(datamap[i].value)
});
}
}
return res;
}
var myChart = echarts.init(document.getElementById('main')) // 拿到一个实例
echarts.registerMap('my', JSON, {})//引入地图文件
console.log(JSON)
var option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0)',
textStyle: {
color: '#000',
decoration: 'none',
},
formatter: function (params) {
// console.log(params)
var tipHtml = '';
tipHtml = `
<div class="ui-map-img">
<div class='ui-maptxt'>${params.name}</div>
<div class='ui-mapNum'>产量: ${params.value} 吨</div>
</div>
`
return tipHtml;
},
},
grid: {
left: '0', // 与容器左侧的距离
right: '0', // 与容器右侧的距离
top: '0', // 与容器顶部的距离
bottom: '0', // 与容器底部的距离
},
geo: {
map: 'my',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '60%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.3,
},
},
},
series: [
{
type: 'map',
mapType: 'my',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '60%',
zoom: 0.5, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
data: datamap,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [{
offset: 0,
color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
}],
},
borderColor: 'RGBA(52, 140, 250, 1)',
borderWidth: 2,
shadowColor: '#092f8f', //外发光
shadowBlur: 20,
},
emphasis: {
areaColor: '#0c274b',
// borderColor: '#087cf9',
// borderWidth: 5,
label: {
color: '#fff'
},
},
}
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#f28813',
fontWeight: "bold",
fontSize: 14
}
},
data:
[
{
name: "平安乡",
value: [109.17,31.34],
},
{
name: "竹园镇",
value: [109.27,31.30],
},
{
name: "青莲镇",
value: [109.12,31.23],
},
{
name: "红土乡",
value: [109.11,31.12],
},
{
name: "公平镇",
value: [109.20,31.12],
},
{
name: "石岗乡",
value: [109.34,31.12],
},
{
name: "大树镇",
value: [109.33,31.21],
},
{
name: "康乐镇",
value: [109.44,31.11],
},
{
name: "汾河镇",
value: [109.51,31.13],
},
{
name: "岩湾乡",
value: [109.53,31.19],
},
{
name: "草堂镇",
value: [109.65,31.09],
},
{
name: "白帝镇",
value: [109.60,31.06],
},
{
name: "白帝城风景区管理委员会",
value: [109.55,31.04],
},
{
name: "永安镇",
value: [109.46,31.02],
},
{
name: "朱衣镇",
value: [109.39,31.02],
},
{
name: "康坪乡",
value: [109.25,30.98],
},
{
name: "永乐镇",
value: [109.52,31.03],
},
{
name: "兴隆镇",
value: [109.45,30.66],
},
{
name: "长安土家族乡",
value: [109.56,30.83],
},
{
name: "龙桥土家族乡",
value: [109.37,30.61],
},
{
name: "太和土家族乡",
value: [109.26,30.64],
},
{
name: "云雾土家族乡",
value: [109.13,30.60],
},
{
name: "冯坪乡",
value: [109.50,30.83],
},
{
name: "五马镇",
value: [109.38,30.85],
},
{
name: "青龙镇",
value: [109.28,30.78],
},
{
name: "吐祥镇",
value: [109.16,30.71],
},
{
name: "羊市镇",
value: [109.05,30.82],
},
{
name: "甲高镇",
value: [109.18,30.89],
},
{
name: "新民镇",
value: [109.47,30.90],
},
{
name: "鹤峰乡",
value: [109.55,30.93],
},
{
name: "安坪镇",
value: [109.30,30.91],
},
],
symbolSize: function (val) {
return 6;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: false,
},
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow',
},
},
zlevel: 1,
},
]
}
myChart.setOption(option)
var index = 0; //播放所在下标
var showTip = setInterval(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
index++;
if (index >= 28) {
index = 0;
}
}, 2000);
myChart.on('mouseover', function (params) {
console.log(params);
clearInterval(showTip);
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
});
myChart.on('mouseout', function (params) {
showTip && clearInterval(showTip);
showTip = setInterval(function () {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
index++;
if (index >= 28) {
index = 0;
}
}, 2000);
});
}
}
}
</script>
<style>
.ui-map {
width: 50%;
height: 80vh;
background-color: #000;
margin: 0 auto;
}
.ui-map-img {
background: RGBA(52, 140, 250, 1);
padding: 0.5vw;
color: #fff;
}
</style>Vue: 参照 JSON マップ
おすすめ
転載: blog.csdn.net/Ygaidi/article/details/128559663
おすすめ
ランキング