效果图

在这里插入图片描述

绘制省级地图

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>
Logo

前往低代码交流专区

更多推荐