Uniapp中使用Echarts

在小程序中使用echarts

我直接调用了HbuilderX的百度图表进行使用

LimeUi - 多端uniapp组件库 (qcoon.cn)

通用代码去官网找一下就好了赋值进去第一个柱状图表就可以显示了

地图的使用

html 复制代码
<template>
	<view style="height: 750rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>
javascript 复制代码
import * as echarts from '../../uni_modules/lime-echart/static/echarts.min.js';
	import china from './china.json'

我这里导入的是echarts还有中国地图

地图下载地址:DataV.GeoAtlas地理小工具系列

挂载时候显示中国地图,放了隐藏右侧南海诸岛的代码,但是点击还是会显示出来,是那一个bug

series里的data和visualMap是一组隐射关系'

data的name与json相对应,后续的value与visualMap设置的最大最小值相对应

例如 设置1-20 颜色黄色还有蓝色 设置的值为1代表黄色,20蓝色 2-19是这两个色系的渐变 也可以多设置几个颜色进行自己分配

javascript 复制代码
		mounted() {
			this.$refs.chart.init(echarts, async chart => {
				const data = china
				echarts.registerMap('china', data);
				const option = {
					geo: [{
						name: 'chinamap',
						type: 'map',
						map: 'china',
						top:'20%',
						zoom: 1.3, //倍数
						center: [105, 30],
						label: {
							show: true,
							align: 'center',
							fontSize: '10'
						},
						regions: [
						// 	{
						// 	name: "南海诸岛",
						// 	itemStyle: {
						// 		// 隐藏地图
						// 		normal: {
						// 			opacity: 0, // 为 0 时不绘制该图形
						// 		}
						// 	},
						// 	label: {
						// 		show: false // 隐藏文字
						// 	}
						// },
						],


					}],
					series: [{
						type: 'map',
						geoIndex: 0,
						animation: false,

						// 设置的地图映射情况 配合坐标轴颜色
						data: [{
								name: '黑龙江',
								value: 10
							},
							{
								name: '湖南',
								value: 22
							},
							{
								name: '安徽',
								value: 22
							},
							{
								name: '山东',
								value: 22
							}
						],
					}],
					visualMap: {
						min: 1,
						max: 20,
						// text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						show: false,///不显示左侧色值表
						inRange: {
							color: ['#546cb9', '#f5f7fd']
						}
					},
				}
                   //挂载修改option
				chart.setOption(option);
			})
		},

数据更新

可以使用触发事件改变配置项

javascript 复制代码
	getClick() {
                //随机赋值点亮一个省份
				let randomIndex = Math.floor(Math.random() * this.province.length);
				let valueName = this.province[randomIndex];
				console.log(valueName);
				this.Ename = valueName
				const option = {

					geo: [{
						name: 'chinamap',
						type: 'map',
						map: 'china',
						zoom: 1.3, //倍数
						// center: [105, 30],
						label: {
							show: true,
							align: 'center',
							fontSize: '10'
						},

						select: { //选中状态下的多边形和标签样式
							label: {
								show: true,
								color: '#ff0c96'
							},
							itemStyle: {
								areaColor: 'rgb(234, 223, 194)'
							}
						},
						// 在地图中对特定的区域配置样式。
						regions: [
						// 	{
						// 	name: "南海诸岛",
						// 	itemStyle: {
						// 		// 隐藏地图
						// 		normal: {
						// 			opacity: 0, // 为 0 时不绘制该图形
						// 		}
						// 	},
						// 	label: {
						// 		show: false // 隐藏文字
						// 	}
						// },
						{
							name: valueName, //地区名字  例如广东
							seleted: true, //是否被选中
							itemStyle: { //该区域的多边形样式设置
								// areaColor: 'red',//地图区域颜色
								// color: 'red',//图形颜色
								borderColor: 'red', //图形描边颜色
								borderWidth: '2'
							}
						}]

					}]
				}
				this.$refs.chart.setOption(option)
			
			}

点亮省有一个坑的地方就是和隐射的省份颜色冲突不会显示 我是改成了轮廓

相关推荐
编程猪猪侠24 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞28 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架