微信小程序 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.mzph.cn/news/49278.shtml

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

相关文章

会计资料(借贷记账法、试算平衡)

6.借贷记账法 这样的格式是会计学家提出的。 6.1 借贷记账法的详细使用 这里要把会计的六大分类搞明白,才能够使用借贷记账法 6.2 借贷记账法的记账规则 6.3 借贷记账法下的账户与会计分录 6.4 会计分录的介绍 这里一笔会计分录只能写一笔经济业务,或者…

使用 Ansible Galaxy 安装角色

使用 Ansible Galaxy 安装角色 使用 Ansible Galaxy 和要求文件 /home/curtis/ansible/roles/requirements.yml 。从以下 URL 下载角色并安装到 /home/curtis/ansible/roles : http://rhgls.area12.example.com/materials/haproxy.tar 此角色的名称应当为 balancer …

Cpp学习——list的模拟实现

目录 一,实现list所需要包含的三个类 二,三个类的实现 1.list_node 2.list类 3.iterator_list类 三,功能实现 1.list类里的push_back() 2.iterator类里的运算符重载 3,list类里面的功能函数 1.insert(&#xff…

认识负载均衡||WEBSHELL

目录 一、负载均衡 1.nginx负载均衡算法 2.nginx反向代理-负载均衡 二、webshell 1.构造不含数字和字母的webshell 2.如何绕过 一、负载均衡 1.nginx负载均衡算法 (1)轮询(默认)每个请求按时间顺序逐一分配到不同的后端服务&…

vue3 setup语法糖导入mixin

像这样直接导入,然后通过defineOptions声明mixin 然后就可以在这个组件使用mixin里的数据和方法了

Java版B/S架构 智慧工地源码,PC、移动、数据可视化智慧大屏端源码

智慧工地是什么?智慧工地主要围绕绿色施工、安全管控、劳务管理、智能管理、集成总控等方面,帮助工地解决运营、管理方面各个难点痛点。在互联网的加持下促进项目现场管理的创新与发展,实现工程管理人员与工程施工现场的整合,构建…

centos9 mysql8修改数据库的存储路径

一、环境 系统:CentOS Stream release 9 mysql版本:mysql Ver 8.0.34 for Linux on x86_64 (MySQL Community Server - GPL) 二、修改mysql的数据库,存储路径 查看目录数据存储的位置 cat /etc/my.cnf操作 1、新建存放的目录,…

【JAVA基础】 IO详解

【JAVA基础】 IO详解 文章目录 【JAVA基础】 IO详解一、概述二、IO流的作用三、IO流的使用场景四、IO流的分类4.1 传输数据的单位分:4.2 数据传输的方向分:4.3 流的角色的不同分: 五、IO流体系六、字节输入流InputStream七、字节输出流 Outpu…

c++ 友元 运算符重载详解

友元 c是面向对象的,目的之一:封装 封装: 优点之一,就是安全。 缺点:在某些特殊的场合,不是很方便。 华为与IBM 40亿的咨询故事 IBM需要对华为各级部门做深度咨询分析, 为了提高咨询效率&a…

Transformer在医学影像中的应用综述-分类

文章目录 COVID-19 Diagnosis黑盒模型可解释的模型 肿瘤分类黑盒模型可解释模型 视网膜疾病分类小结 总体结构 COVID-19 Diagnosis 黑盒模型 Point-of-Care Transformer(POCFormer):利用Linformer将自注意的空间和时间复杂度从二次型降低到线性型。POCFormer有200…

Docker基础操作

1.安装docker服务,配置镜像加速器 安装docker服务 清理缓存 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-enginesystemctl enable --now docker 脚…

微积分进阶 1.1 函数

一、函数的概念 在观察自然现象或工程实际问题时,我们经常发现有几个变量在变化,这些变量之间并不是彼此孤立的,而是相互制约的,这些变量是怎么变化的呢?它们之间有什么联系呢?存什么规律呢?怎…

ARM开发(cortex-A7核中断实验)

1.实验目的:实现KEY1/LEY2/KE3三个按键,中断触发打印一句话,并且灯的状态取反; key1 ----> LED3灯状态取反; key2 ----> LED2灯状态取反; key3 ----> LED1灯状态取反; 2.分析框图: …

IDEA快速设置Services窗口

现在微服务下面会有很多SpringBoot服务,Services窗口方便我们管理各个SpringBoot服务,但有时IDEA打开项目后无法的看到Services窗口,以下步骤可以解决!

西瓜书之神经网络

一,神经元模型 所谓神经网络, 目前用得最广泛的一个定义是“神经网络是由具有适应性的简单单元组成的广泛并行互连的网络,它的组织能够模拟生物神经系统对真实世界物体所做出的交互反应”。 M-P神经元 M-P神经元:接收n个输入(…

Nodejs-nrm:快速切换npm源 / npm官方源和其他自定义源之间切换

一、理解 Nodejs nrm Nodejs nrm 是一个管理 npm 源的工具。由于 npm 在国内的速度较慢,很多开发者会使用淘宝的 npm 镜像源,但是也会遇到一些问题,例如某些包在淘宝镜像源中不存在,或者淘宝镜像源本身也会有问题。 Nodejs nrm …

计算机竞赛 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 基于CNN实现谣言检测 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐&am…

AWS解决方案日:Web 3业务安全方案

近日,AWS合作伙伴之Web3解决方案日在香港举办,多家科技公司专家和企业代表就WEB 3.0方案、AI创新和Web 3.0安全进行了探讨。顶象现场展示了Web 3.0业务安全解决方案。 NFT是Web 3.0典型场景之一。NFT基于区块链技术的非同质化代币,具有不可分…

Java入坑之 数据库编程

一、基础概念 1.1JDBC 步骤 导入驱动jar包 注册驱动 获取数据库连接对象 Connection DataSource dSource; dSource.getConnection(); 定义sql语句 String sql "update account set balance 500 where id 1"; 获取执行sql语句的对象 Statement PreparedStatement…

在mac下,使用Docker安装达梦数据库

前言:因为业务需要安装达梦数据库 获取官网下载tar包(达梦官网的下载页面https://www.dameng.com/list_103.html),或者通过命令 一、下载tar包 命令下载:wget -O dm8_docker.tar -c https://download.dameng.com/eco/…