微信小程序 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.hqwc.cn/news/79920.html

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

相关文章

Docker创建 LNMP 服务+Wordpress 网站平台

文章目录 Docker创建 LNMP 服务Wordpress 网站平台一.环境及准备工作1.项目环境2.服务器环境3.任务需求 二.Linux 系统基础镜像三.docker构建Nginx1.建立工作目录上传安装包2.编写 Dockerfile 脚本3.准备 nginx.conf 配置文件4.生成镜像5.创建自定义网络6.启动镜像容器7.验证 n…

【数据结构与算法】—— 手撕红黑树

目录 (一)红黑树的定义 1、红黑树的引入 2、红黑树的概念 3、红黑树的性质 (二)红黑树的操作 1、红黑树节点的定义 2、红黑树的插入操作 1️⃣ 思路 2️⃣ 代码实现 3、红黑树的删除操作(了解) …

SDXL:Improving latent diffusion models for high-resolution image synthesis

文生图模型之SDXL - 知乎之前的文章 文生图模型之Stable Diffusion已经介绍了比较火的文生图模型Stable Diffusion,近期Stability AI又发布了新的升级版本SDXL。目前SDXL的代码、模型以及技术报告已经全部开源:官方代码:https://github.…htt…

伴儿行“共享七彩童年”红色教育讲堂篇

迎着徐徐海风,一群青少年缓缓漫步于刘公岛的海岸线,在威海市环翠区伴儿行青少年服务中心老师的带领下,一场沉浸式的红色教育讲堂在百年后的甲午海战战场拉开帷幕。 从甲午海战的前期国际形势讲到当今的国际国内形势,从甲午清朝海军…

「Qt」文件读写操作

0、引言 我们知道 C 和 C 都提供了文件读写的类库,不过 Qt 也有一套自己的文件读写操作;本文主要介绍 Qt 中进行文件读写操作的类 —— QFile。 1、QFileDialog 文件对话框 一般的桌面应用程序,当我们想要打开一个文件时,通常会弹…

华为将收取蜂窝物联网专利费,或将影响LPWAN市场发展

近日,华为正式公布了其4G和5G手机、Wi-Fi6设备和物联网产品的专利许可费率,其中包含了长距离通信技术蜂窝物联网。作为蜂窝物联网技术的先驱,华为是LTE Category NB (NB-IoT)、LTE Category M和其他4G物联网标准的主要贡献者。 在NB-IoT领域…

Linux TCP编程流程

一、TCP编程流程 TCP 提供的是面向连接的、可靠的、字节流服务。TCP的服务器端和客户端编程流程如下: 1.socket()方法 用来创建一个套接字,有了套接字就可以通过网络进行数据的收发。这也是为什么进行网络通信的程序首先要创建一个套接字。创建套接字时…

摩托车外廓尺寸检测软件

本系统为摩托车外廓尺寸检测软件,该系统共涉及两种测量方法:自动测量和手动测量,旨在测量出每一台摩托车的外廓尺寸,包括但不限于摩托车的车长、车宽、车高、轮距、前悬、后悬、前伸距等需要测量的参数,可通过运行软件…

工业生产全面感知!工业感知云来了

面向工业企业数字化转型需求,天翼物联基于感知云平台创新能力和5G工业物联数采能力,为客户提供工业感知云服务,包括工业泛协议接入、感知云工业超轻数采平台、工业感知数据治理、工业数据看板四大服务,构建工业感知神经系统新型数…

【SpringSecurity】五、UserDetails接口和UserDetailsService接口

文章目录 1、SpringSecurity原理2、UserDetails接口3、UserDetailService接口4、权限配置 1、SpringSecurity原理 Spring Security是做安全访问控制,对所有进入系统的请求进行拦截,并做校验,这可以通过Filter或者AOP实现,Spring …

设计模式(9)建造者模式

一、 1、概念:将一个复杂对象的构造与它的表示分离,使得同样的构造过程可以创建不同的表示。建造者模式主要用于创建一些复杂的对象,这些对象内部构建间的顺序通常是稳定的,但对象内部的构建通常面临着复杂的变化;建造…

R语言机器学习方法在生态经济学领域

近年来,人工智能领域已经取得突破性进展,对经济社会各个领域都产生了重大影响,结合了统计学、数据科学和计算机科学的机器学习是人工智能的主流方向之一,目前也在飞快的融入计量经济学研究。表面上机器学习通常使用大数据&#xf…