微信小程序 echarts 画多个横向柱状图

然后是json 

{"usingComponents": {"ec-canvas": "../../common/ec-canvas/ec-canvas"},"navigationBarTitleText": "主题活动"
}

ec-canvas获取方式 在链接里下载代码 然后copy ec-canvas文件夹到自己的项目

https://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_accelerator&from_codechina=yeshttps://gitcode.net/mirrors/ecomfe/echarts-for-weixin?utm_source=csdn_github_accelerator&from_codechina=yes

//js里引入echarts 在page上面
import * as echarts from '../../common/ec-canvas/echarts'
Page({...})getStatisticThemeActivitiesTrend(){const that = thislet oUserInfo = this.data.userInfoutil.request(api.statisticThemeActivitiesTrend + oUserInfo.userId + '&startDate=' + that.data.startDate + '&endDate=' + that.data.endDate, '', 'get').then(res => {if (res.code == 200) {let odata = res.datathis.setData({info: odata})if(!odata.themeList || odata.themeList.length == 0){util.alert("暂无数据")return}//主要代码odata.themeList.forEach(function (item, index) {        let echartsComponnet = that.selectComponent('#area-dom-'+index);echartsComponnet.init((canvas, width, height, dpr) => {// 初始化图表const Chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});Chart.setOption(that.getAreaPie(item));// 注意这里一定要返回 chart 实例,否则会影响事件处理等return Chart;});          })} else {wx.showModal({title: res.msg,icon: 'error',showCancel: false,duration: 3000});}});},getAreaPie(odata) {    let option = {grid: { //图表距边框的距离top: 0,right: 30,        bottom: 0,left: 0,containLabel: false,},xAxis: {type: 'value',"splitLine": {     //网格线"show": false}},yAxis: {show : false,type: 'category',data: ['','','','']},series: [{data: [odata.countActivityNumber, odata.countPhysicalRecordNumber, odata.countDetailNumber, odata.countObservationNumber],type: 'bar',itemStyle: {   //通常情况下:normal:{  label : {show: true,position: 'right',},//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组color: function (params){var colorList = ['#70b603', '#00bfbf', '#027db4', '#6300bf']return colorList[params.dataIndex];}},//鼠标悬停时:emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},},}]};return option},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/104413.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

八、pikachu之越权

文章目录 1、越权概述2、水平越权3、垂直越权 1、越权概述 如果使用A用户的权限去操作B用户的数据,A的权限小于B的权限,如果能够成功操作,则称之为越权操作。 越权漏洞形成的原因是后台使用了 不合理的权限校验规则导致的。 一般越权漏洞容易…

Python实现企业微信群告警

Python实现企业微信告警 1. 创建企业微信群机器人 1-1. 什么是企业微信群机器人? 企业微信群机器人是企业微信平台提供的一种功能,可以通过Webhook方式将消息发送到指定的企业微信群中。它可以用于自动化发送通知、告警等信息,实现监控和信…

如何利用SFTP协议远程实现更安全的文件传输 ——【内网穿透】

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《高效编程技巧》《cpolar》 ⛺️生活的理想,就是为了理想的生活! 文章目录 1. 安装openSSH1.1 安装SSH1.2 启动ssh 2. 安装cpolar2.1 配置termux服务 3. 远程SFTP连接配置3.1 查看生成的随机公…

jenkins Linux如何修改jenkins 默认的工作空间workspace

由于jenkins默认存放数据的目录是/var/lib/jenkins,一般这个var目录的磁盘空间很小的,就几十G,所以需要修改jenkins的默认工作空间workspace 环境 jenkins使用yum安装的 centos 7 正题 1 查看jenkins安装路径 [rootlocalhost jenkins_old_data]# rpm…

unity动画融合

1、抛砖引玉 在大型复杂的场景中,一定遇到过手在鼓掌,头在摇头,腿又是其他动作的要求,但是这些东西又不能做一起,因为有时候要把某个动画单独使用,这时候就用到了动画融合,利用动画状态机分层机…

股票预测和使用LSTM(长期-短期-记忆)的预测

一、说明 准确预测股市走势长期以来一直是投资者和交易员难以实现的目标。虽然多年来出现了无数的策略和模型,但有一种方法最近因其能够捕获历史数据中的复杂模式和依赖关系而获得了显着的关注:长短期记忆(LSTM)。利用深度学习的力…

Redis中的淘汰策略

前言 本文主要说明在Redis面临key过期和内存不足的情况时,可以采用什么策略进行解决问题。 Redis中是如何应对过期数据的 正如我们知道的Redis是基于内存的、单线程的一个中间件,在面对过期数据的时候,Redis并不会去直接把它从内存中进行剔…

【SpringCloud技术专题】「Gateway网关系列」(1)微服务网关服务的Gateway组件的原理介绍分析

为什么要有服务网关? 我们都知道在微服务架构中,系统会被拆分为很多个微服务。那么作为客户端要如何去调用这么多的微服务呢?难道要一个个的去调用吗?很显然这是不太实际的,我们需要有一个统一的接口与这些微服务打交道&#xf…

Java后端开发面试题——消息中间篇

RabbitMQ-如何保证消息不丢失 交换机持久化: Bean public DirectExchange simpleExchange(){// 三个参数:交换机名称、是否持久化、当没有queue与其绑定时是否自动删除 return new DirectExchange("simple.direct", true, false); }队列持久化…

大数据项目实战(安装准备)

一,搭建大数据集群环境 1.1安装准备 1.1.1虚拟机安装与克隆 1.虚拟机的安装和设置以及启动虚拟机并安装操作系统(以下仅供参考) 安装一台虚拟机主机名为:hadoop01的虚拟机备用 VMware虚拟机安装Linux教程(超详细)_vmware安装…

初始Netty

文章目录 目录 文章目录 前言 一、netty 总结 前言 认识netty 一、netty Netty是一个基于Java的高性能网络应用框架,用于快速开发可扩展的网络服务器和客户端。它提供了易于使用的抽象API,使开发人员能够轻松地构建各种网络应用程序,包括…

【Git】分支管理

文章目录 一、理解分支二、创建、切换、合并分支三、删除分支四、合并冲突五、合并模式六、分支策略七、bug分支八、强制删除分支 努力经营当下 直至未来明朗! 一、理解分支 HEAD指向的是master分支,master中指向的是最新一次的提交,也就是m…

消息中间件介绍

消息队列已经逐渐成为企业IT系统内部通信的核心手段。它具有低耦合、可靠投递、广播、流量控制、最终一致性等一系列功能,成为异步RPC的主要手段之一。当今市面上有很多主流的消息中间件,如ActiveMQ、RabbitMQ,Kafka,还有阿里巴巴…

ElementUI中的日历组件加载无效的问题

在ElementUI中提供了一个日历组件。在某些场景下还是比较有用的。只是在使用的时候会有些下坑&#xff0c;大家要注意下。   官网提供的信息比较简介。我们在引入到项目中使用的时候可以能会出现下面的错误提示。 Unknown custom element: <el-calendar> - did you …

Qt文件系统操作和文件的读写

一、文件操作类概述 QIODevice&#xff1a;所有输入输出设备的基础类 QFile&#xff1a;用于文件操作和文件数据读写的类QSaveFile&#xff1a;用于安全保存文件的类QTemporaryFile&#xff1a;用于创建临时文件的类QTcpSocket和QUdpSocket&#xff1a;分别实现了TCP和UDP的类…

再学http-为什么文件上传要转成Base64?

1 前言 最近在开发中遇到文件上传采用Base64的方式上传&#xff0c;记得以前刚开始学http上传文件的时候&#xff0c;都是通过content-type为multipart/form-data方式直接上传二进制文件&#xff0c;我们知道都通过网络传输最终只能传输二进制流&#xff0c;所以毫无疑问他们本…

C语言实例_双向链表增删改查

一、双向链表介绍 双向链表&#xff08;Doubly Linked List&#xff09;是一种常见的数据结构&#xff0c;在单链表的基础上增加了向前遍历的功能。与单向链表不同&#xff0c;双向链表的每个节点除了包含指向下一个节点的指针外&#xff0c;还包含指向前一个节点的指针。 作用…

Docker之Compose

目录 前言 一、Docker-compose概述 1.1Docker Swarm与Docker Compose 1.1.1Docker Swarm 1.1.2Docker Compose 1.1.2.1 三层容器 ​编辑 二、YAML 2.1YAML概述 2.2注意事项 2.3Docker Compose 环境安装 2.3.1下载 三、Docker-Compose配置常用字段 四、Docker-com…

高手进阶之路---pyqt自定义信号

高手进阶之路—pyqt自定义信号 1.思考问题为什么要自定义信号&#xff0c;qt5本身已有信号槽函数 # pushButton 被clicked的时候connect 函数print self.pushButton.clicked.connect(self.print)def print(self):print("我被点击了")或者使用 # 需要引入 pyqtSlo…

C#__自定义类传输数据和前台线程和后台线程

// 前台线程和后台线程 // 默认情况下&#xff0c;用Thread类创建的线程是前台线程。线程池中的线程总是后台线程。 // 用Thread类创建线程的时候&#xff0c;可以设置IsBackground属性&#xff0c;表示一个后台线程。 // 前台线程在主函数运行结束后依旧执行&#xff0c;后台线…