echarts地图与横向柱状图

最新推荐文章于 2024-11-04 14:30:42 发布
最新推荐文章于 2024-11-04 14:30:42 发布
阅读量138 收藏
点赞数
文章标签： echarts vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_56164131/article/details/130842840
版权

地图代码

<template>
    <div id="dt" style="width: 100%;height:100%;"></div>
</template>
 
<script lang="ts" setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    const mapList = ref([
        {name:"温岭市",value:80},
        {name:"椒江区",value:50},
        {name:"路桥区",value:50}
    ])
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom:any = document.getElementById('bt');
        let getJson = ""
        let getJson1 = ""
        let myChart = echarts.init(chartDom);
        //对每个地区定位,水滴显示
	    let convertData = function(arr) {
			let res = [];
			for (let i = 0; i < arr.length; i++) {
				let geoCoord = getJson1[arr[i].name];
				if (geoCoord) {
					res.push({
						name: arr[i].name,
						value: geoCoord.concat(arr[i].value)
					});
				}
			}
			return res;
		};
        //引入绘制地图json
		echarts.registerMap('map', getJson, {});
		let option = {
			tooltip: {
				// backgroundColor: "#062444",
				// borderColor: "#ff2b73",
				triggerOn: 'mousemove', //click
				enterable: true,
				// formatter: '{b}<br/>{c} (p / km2)'
				formatter: function(params) { //用于显示多个数据
					let tipHtml = params.name;
					return tipHtml;
				}
			},
			geo: {
				show: true,
				aspectScale: 1, //地图长度比
				zoom: 1.1,
				map: 'map',
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false,
					}
				},
				roam: false, //地图设置不可拖拽，固定的
				itemStyle: {
					// normal: {
					// 	areaColor: '#00406b',
					// 	borderWidth: 1,
					// 	shadowColor: '#00406b',
					// 	shadowBlur: 100,
					// }
					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)',
						// shadowColor: 'rgba(255, 255, 255, 1)',
						shadowOffsetX: -2,
						shadowOffsetY: 2,
						shadowBlur: 10
					},
					emphasis: { // 移动样式
						areaColor: '#389BB7',
						borderWidth: 0
					}
				}
			},
			series: [{
				select: {
					label: {
						show: true,
						color: '#fff'
					},
					itemStyle: { //选择后的样式
						borderColor: '#a5f2fc',
						borderWidth: 1,
						color: {
							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, 1)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
					}
				},
				name: '',
				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)',
						// shadowColor: 'rgba(255, 255, 255, 1)',
						shadowOffsetX: -2,
						shadowOffsetY: 2,
						shadowBlur: 10
					},
					emphasis: { // 移动样式
						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, 1)' // 100% 处的颜色
							}],
							globalCoord: false // 缺省为 false
						},
						borderWidth: 0
					}
				},
				type: 'map',
				mapType: 'map',
				aspectScale: 1, //地图长度比
				zoom: 1.1,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 10,
							fontWeight: 'bold'
						}
					},
					emphasis: {
						show: true,
						textStyle: {
							color: '#fff'
						}
					}
				},
				data: mapList.value
			},{
				name: 'Top 5',
				type: 'scatter',
				coordinateSystem: 'geo',
				symbol: 'pin',
				data:convertData(mapList.value),
				symbolSize: [45, 45],//水滴大小
				label: {
					normal: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 9,//字体
						},
						formatter(value) {
							return value.data.value[2]
						}
					}
				},
				itemStyle: {
					normal: {
						color: "rgba(1, 29, 91, 1)",//水滴颜色
						// borderColor: '#0be7a5'
					},
					// emphasis: {
					// 	color: '#e4b500', //标志颜色
					// 	borderColor: '#286291'
					// }
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke'
				},
				hoverAnimation: true,
				zlevel: 1
			}]
		}
		myChart.setOption(option);
		myChart.on('click', function (params) {
			
		});
 
    }
</script>

横向柱状图代码

<template>
    <div id="hxzz" style="width: 100%;height:100%;"></div>
</template>
 
<script lang="ts" setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    const mapList= ref([
        {name:"测试数据1",value:50},
        {name:"测试数据2",value:50},
        {name:"测试数据3",value:50}
    ])
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom:any = document.getElementById('hxzz');
        let myChart = echarts.init(chartDom);
        let yLabel = []
		let yData = []
		mapList.value.forEach(val=>{
			yLabel.push(val.name)
			yData.push(val.value)
		})
	    let colorList = ['#fb4d4b', '#f39c12', '#00a65a', "#1DE9B6", "#EEDD78","#32C5E9", "#FFDB5C","#37A2DA", "#04B9FF"]
		let dfColor = {
			type: 'linear',
			x: 0,
			y: 0,
			x2: 1,
			y2: 0,
			colorStops: [{
				offset: 1,
				color: '#0489f0' // 0% 处的颜色
			}, {
				offset: 0,
				color: '#28d9e8' // 100% 处的颜色
			}],
			global: false // 缺省为 false

		};
		yData.forEach((val, index) => {
			let col = ""
			colorList.forEach((v, i) => {
				if (index == i) {
					col = v
				}
			})
			yData1.push({
				value: val,
				itemStyle: {
					color: col == "" ? dfColor : col
				}
			})

		})
		let option = {
			grid: {
				left: '5%',
				right: '5%',
				bottom: '5%',
				top: '10%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'none'
				},
				formatter: function(params) {
					return params[0].name + '<br/>' +
						"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
						params[0].seriesName + ' : ' + params[0].value + ' <br/>'
				}
			},
			xAxis: {
				type: 'value',
				axisLine: {
					show: false,
					lineStyle: {
						color: '#2f4475',
						type: "dashed"
					},
				},
				position: 'top',
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
					fontFamily: 'MicrosoftYaHei',
					fontSize: 12,
					color: '#a6acbe'
				},
				axisTick: {
					show: false,
					alignWithLabel: true,
				},
			},
			yAxis: [{
					type: 'category',
					inverse: true,
					axisLabel: {
						show: true,
						margin: 15,
						textStyle: {
							color: '#dddddd',
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true
					},
					data: yLabel
				},
				// {
				//        type: 'category',
				//        inverse: true,
				//        axisTick: 'none',
				//        axisLine: 'none',
				//        show: true,
				//        axisLabel: {
				//            textStyle: {
				//                color: '#dddddd',
				//                fontSize: '12'
				//            },
				// 		},
				// 	data: yData
				// },
			],
			series: [{
				name: '数量',
				type: 'bar',
				zlevel: 1,
				itemStyle: {
					normal: {
						barBorderRadius: [0, 30, 30, 0],
						color: [],
						shadowBlur: 0,
						shadowColor: 'rgba(87,220,222,0.7)'
					},
				},
				barWidth: 10,
				data: yData1
			}, ]
		};

 
		myChart.setOption(option);
		myChart.on('click', function (params) {
			
		});
 
    }
</script>

运行结果

 

Echarts实现的地图关联柱状图
08-19
Echarts实现的地图关联柱状图
【Echarts】中国地图、堆叠图、横向柱状图
星河梦~的博客
08-10 1315
中国地图，堆叠图，横向柱状图代码实现
Vue中使用echarts实现地图与柱状图结合展示
Beconcentrated的博客
12-27 2437
Vue中使用echarts实现地图与柱状图结合展示
【Echarts】二维地图叠加柱状图
心生的小鱼专栏
06-25 1238
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts 地图</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src..
echarts-省份地图+柱状图组合.zip
03-26
echarts 省份地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
echarts 应用示例 线图 柱状图饼图 地图 异步数据加载
12-09
ECharts 支持横向和纵向柱状图，还可以通过堆叠、百分比堆叠等方式展示数据比例关系。同时，柱状图可以与其他图表结合，例如与折线图混合显示，增强数据解读。 3. **饼图（Pie Chart）**：饼图用于表示整体与部分...
极致呈现系列之：ECharts3D柱状图的维度穿梭
九仞山的专栏
06-30 1647
ECharts3D柱状图的使用
echarts图表——条形图（柱状图）的动态横向显示设置_echarts横向条形图(1)
2401_85013604的博客
05-14 1175
/ window.onresize = function () { //适应页面。
vue+echarts之堆叠柱状图做法
weixin_43569405的博客
11-27 4193
echarts-子组件 <template> <div class="chart" ref="chartEle"></div> </template> <script> import echarts from "echarts"; import eventBus from '@/components/event/event-b...
echarts使用getZr()点击事件获取柱状图数据
weixin_54366356的博客
05-27 8455
echarts柱状图精确点击事件传参 先上效果图！！！ 当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
Echarts地图registerMap使用的GeoJson数据获取
jieyucx的博客
11-28 3303
也可以直接在地图上点击对应区域。可以选择省，市，区。
Echarts使用柱状图实现横向数据展示，实现为每个柱子设置不同的颜色
最新发布
MissRen920的博客
11-04 1491
这里使用echarts柱状图实现横向数据展示，同时给每个柱子设置不同的颜色，给柱子设置背景颜色等。
Echarts地图柱状图问题
weixin_62364503的博客
09-16 1850
echarts 地图上嵌套柱状图，柱状图可以复用，出现双柱状图。需要给数据提供2套经纬度
Echarts地图添加柱状图解决方案
前端开发-陈善强
11-24 1296
在使用echarts做地图时，遇到了在地图上添加叠加柱状图的需求，当时遇到不少问题，为了有同样需求而无从下手的前端开发人员，能够高效完成开发，特此分享自己的一点经验。
echarts关于地图和柱状图的结合展示
热门推荐
u013255947的博客
01-02 1万+
忙了好几个月的其他项目，忘了更新接下来的echarts其他的功能展示了，实在抱歉。这次讲的主要是两个地图的结合展示，echarts的官网大部分的都是柱状图和折线图一起展示的例子，对于地图和柱状图的结合展示很少，我找了半天也只有饼图和柱状图的结合（PS：最后还是找到了，挖了很久.....）。 这边我先展示下效果图给大家看下： 上图的柱状图的数据和地图上的数据可以不一致，两者的数据源可以在地图的配
GIS引擎使用echarts专题图之—柱状图
qq_58151324的博客
11-02 1026
GIS和echarts配合做出树状图，饼状图等专题图
使用echarts实现地图map
tanqingfu1的博客
08-07 2195
<!doctype html> <html> <head> <meta charset="utf-8"> <title>echarts.js中国地图省份悬浮提示</title> <script src="../js/echarts.min.js"></script> <script type...
echarts图表和map地图
你还有我
04-06 2830
echarts和map地图基础
echarts地图示例
m0_51431448的博客
04-04 5929
地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件 各个地区的json文件链接数据可视化平台(各个地区的json文件) 示例1 <template> <div :id="id" style="width: 100%;height: 100%;">111</div> </template> <script setup> import * as echarts from "echarts"; impor....
echarts带百分比横向柱状图
06-01
要绘制带百分比横向柱状图，您可以使用 echarts 的 series-bar 组件和 series-label 组件。以下是一个示例代码，您可以将其修改为满足您的需求： ```javascript // 指定图表的配置项和数据 var option = { tooltip...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈琦鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值