微信小程序使用Echarts

本文介绍了在Uniapp项目中如何安装和使用Echarts,包括遇到的地图文件缺失问题及在线定制Echarts时需要注意的事项。详细讲解了地图、柱状图(堆叠柱状图、数据集柱状图、柱状图+折线)和扇形图的实现,并提到了扇形图的懒加载配置。
摘要由CSDN通过智能技术生成


一、安装Echarts

在Uniapp项目中安装echarts依赖,参考其他人的博客https://blog.csdn.net/wxh958548129/article/details/107520566
我安装的时候好像少了地图文件,我还是重别的地方拷进去的,不知道你们会不会出现这个问题,还有就是在线订制echarsjs文件时需注意自己要用的图表和对应的属性,不然到时没显示,当时漏了视觉映射,导致做地图块分层色没显示,以此为鉴。
在这里插入图片描述

二、各种图表的使用

1.地图

在这里插入图片描述

代码如下(示例):

let lineOption = {
   
				title: {
   
					text: '各地市备案设备统计',
					subtext: '',
					left: 'center'
				},

				visualMap: {
   
					show: true,
					min: 0,
					max: 40000,
					text: ['High', 'Low'],
					realtime: false,
					calculable: true,
					inRange: {
   
						color: ['lightskyblue', 'yellow', 'orangered']
					}
				},
				tooltip: {
   
					trigger: 'item',
					formatter: function(e, t, n) {
   
						return '地区:' + e.data.name + '\n备案设备数量:' + e.data.value;
					},
					textStyle: 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值