Cuando echart desarrolle mapas, encontrará una visualización detallada de los datos del mapa de la subregión. Por ejemplo, en la provincia de Sichuan, profundizamos hasta el nivel municipal de la ciudad de Chengdu y luego hasta el nivel de distrito. Dirección de descarga:Serie de gadgets geográficos DataV.GeoAtlas
1. Primero, debe descargar el mapa correspondiente. Si está conectado a Internet, puede descargar uno directamente para implementar el desglose. Puede buscarlo o implementarlo usted mismo. Este artículo trata principalmente sobre sin conexión. mapas
2. Después de descargar el paquete de mapas correspondiente que necesita, vaya al siguiente paso de edición
3. También necesita obtener la longitud y latitud de cada uno. región. Puedes ir a Internet para buscar la longitud y latitud y hacer clic para obtenerla. También puedes hacerlo en nuestro Haga clic en el mapa echarts para obtener
el estilo final
//获取方法
myChart.on('click', (params) => {
this.Show = 0
// 获取点击的经纬度坐标时使用
// console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));
if (params.componentSubType === 'map') {
try {
this.chinaJson = require(`@/assets/MapData/${
params.name}.json`)
this.ClickName = params.name
this.cityList.forEach(item =>{
if(item.xzqhmc === this.ClickName){
this.getDialogData(item.xzqhszDm)
this.Restcenter()
}
})
} catch (r) {
// this.$message({
// message: '无本地资源',
// type: 'warning'
// });
}
}
})
```javascript
//放echarts的地方
<div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div>
``
//引入 在scrit代码块内引入
import * as echarts from 'echarts';
//在data内引入下载的地图图片
ClickName: '四川', //空代表还没有点击城市 初始进入时的地图显示
chinaJson: require("@/assets/MapData/四川省.json"),
//echarts的初始化
init() {
if (this.myChart.id !== undefined) {
this.myChart.dispose(); //销毁 这是因为多次点击会出现渲染的问题，需要先销毁再渲染
}
let myChart = echarts.init(document.getElementById('main'), null, {
renderer: 'svg' });//这里是让地图的清晰度更高
echarts.registerMap('sichuan', this.chinaJson);
this.myChart = myChart
//点击时间监听
myChart.on('click', (params) => {
// 这个是项目用到的，可以根据需要保留this.Show = 0
// 获取点击的经纬度坐标时使用
// console.log(myChart.convertFromPixel('geo', [params.event.offsetX, params.event.offsetY]));
if (params.componentSubType === 'map') {
try {
this.chinaJson = require(`@/assets/MapData/${
params.name}.json`)
this.ClickName = params.name
this.cityList.forEach(item =>{
if(item.xzqhmc === this.ClickName){
this.getDialogData(item.xzqhszDm)
this.Restcenter()
}
})
} catch (r) {
// this.$message({
// message: '无本地资源',
// type: 'warning'
// });
}
}
})
window.addEventListener('resize', function () {
myChart.resize();
});
echarts.registerMap("js", this.chinaJson);
// 柱状图左边数量显示
let scatterData = this.mapData.map((item) => {
return [
this.center[item.name][0],
this.center[item.name][1],
];
});
let option =
{
backgroundColor: "rgba(0,0,0,0)",
tooltip: {
trigger: 'item',
show: true,
enterable: true,
textStyle: {
fontSize: 20,
color: '#fff'
},
backgroundColor: 'rgba(0,0,0,0.5)',
formatter: function (item) {
let tipHtml = "";
//提示内容
tipHtml = item
return tipHtml;
},
},
visualMap: {
min: 0,
max:100,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// 地图图层样式
geo: [
{
map: "js",
aspectScale: 0.9,
// roam: false, //是否允许缩放
roam: true,
zoom: 1, //默认显示级别
label: {
show: true },
emphasis: {
label: {
show: true },
textStyle: {
color: '#444',
fontSize: 8
},
},
zlevel: 3,
},
],
series: [
// 颜色图层
{
type: "map",
coordinateSystem: "geo",
geoIndex: 0,
zlevel: 5,
label: {
show: true,
},
map: 'china', // 自定义扩展图表类型
// normal: {label: {show: true}},
emphasis: {
label: {
show: true },
textStyle: {
color: '#444',
fontSize: 8
}
},
data: this.mapData,
},
// 柱形左边数量显示
{
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
zlevel: 5,
label: {
show: !0,
position: "left",
formatter: (params) => this.mapData[params.dataIndex].value,
padding: [4, 8],
backgroundColor: "#003F5E", //数字显示框颜色
borderRadius: 5,
borderColor: "#67F0EF",
borderWidth: 1,
color: "#67F0EF",
},
silent: true,
data: scatterData,
},
],
}
myChart.setOption(option, true);
},
El código completo de la página se puede utilizar directamente, preste atención a la introducción.
<template>
<div class="MapEcharts">
<el-button size="medium" v-if="this.history.length === 0" @click="$router.back()" class="sucessbutton" type="text">
<SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>
返回
</el-button>
<el-button v-if="this.history.length > 0" type="text" class="sucessbutton"
@click="datas()">
<SvgIcon icon-name="rollback" class="popoverIcon"></SvgIcon>
返回上一级</el-button>
<div id="main" :style="{ height: '100%', width: '100%', }" ref="myEchart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import SvgIcon from '@/components/public/SvgIcon' //图标可以去掉这个
import {
mixins} from '@/mixins/mixins' //这是其他区域的中心点放在后面了
export default {
name: 'MapData',
data() {
return {
historyOld:'',
Show:0,