uniapp 使用echarts做折线图条形图。

在这里插入图片描述
在这里插入图片描述

提前10天把中烟活动做完了,以为能打酱油到除夕那天,结果又要做什么数据看板,方便烟草领导过年查看数据,还只给5天时间,真实压榨剥削啊,下辈子再也不‘拍黄片’了,不!下份工作我就转前端了,php我再也不写了。

1.安装echarts 依赖 npm install echarts

2.引用 import * as echarts from ‘echarts’;

3.上代码

				<canvas :style="{width: '100%', height: '500rpx'}" id="mychart" canvas-id="mychart":canvas-type="canvasType"></canvas>
chart() {const ctx = document.getElementById('mychart');const chart = echarts.init(ctx);chart.setOption({grid: {// 设置图表距离顶部,左侧,右侧和底部的高度top: '50rpx',left: '50rpx',right: '50rpx',bottom: '50rpx',},color: ["#2363FF", "#03C6D4", "#6B49F5"],title: {left: "center",text: this.ChartDatatext,},tooltip: {width: '100%',trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},legend: {bottom: 0,itemWidth: 15,itemHeight: 8,itemGap: 40,data: ['小盒扫码数', '条盒扫码数', '总扫码数']},xAxis: [{type: 'category',data: this.tongdate,axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: '',min: 0,//max: 0,max: function(value) {return Math.ceil(value.max * 1.2);},interval: 1000,axisLabel: {formatter: '{value}'}},],series: [{name: '小盒扫码数',type: 'bar',data: this.box},{name: '条盒扫码数',type: 'bar',data: this.bar},{name: '总扫码数',type: 'line',data: this.all}]})},

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

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

相关文章

操作系统--Linux虚拟内存管理

​一、什么是虚拟内存地址 收货地址是一个虚拟地址&#xff0c;它是人为定义的 而我们的城市&#xff0c;小区&#xff0c;街道是真实存在的&#xff0c;他们的地理位置就是物理地址 以 Intel Core i7 处理器为例&#xff0c;64 位和32位虚拟地址的格式为&#xff1a; 二、为什…

Android App开发基础(3)——App的设计规范

3 App的设计规范 本节介绍了App工程的源码设计规范&#xff0c;首先App将看得见的界面设计与看不见的代码逻辑区分开&#xff0c;然后利用XML标记描绘应用界面&#xff0c;同时使用Java代码书写程序逻辑&#xff0c;从而形成App前后端分离的设计规约&#xff0c;有利于提高App集…

快毕业了,同学纪念册如何制作出高级感

​快毕业了&#xff0c;这是一个充满回忆和感慨的时刻。同学们都想制作一本高级感的同学纪念册&#xff0c;留住这段美好的时光。但是自己着手制作的纪念册太丑&#xff0c;那不出手怎么办&#xff1f;那你就问对人了&#xff0c;我给大家演示几个步骤&#xff0c;需要的可以学…

【java】常见的面试问题

目录 一、异常 1、 throw 和 throws 的区别&#xff1f; 2、 final、finally、finalize 有什么区别&#xff1f; 3、try-catch-finally 中哪个部分可以省略&#xff1f; 4、try-catch-finally 中&#xff0c;如果 catch 中 return 了&#xff0c;finally 还会执行吗&#…

瀑布流布局 (初版)

瀑布流布局 文章目录 瀑布流布局前言1. 背景2. 点⬇️&#x1f517;去体验效果如下图所示&#xff1a; 一、初版waterfall布局和问题暴露&#xff1f;1.效果图如下&#xff1a;2.暴露问题如下图所示&#xff1a;第一张问题图&#xff1a;第二张问题图&#xff1a; 3.HTML代码如…

有效的字母异位词

42. 有效的字母异位词https://leetcode.cn/problems/valid-anagram/ 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s …

8.6 代理设计模式

文章目录 一、代理模式&#xff08;Proxy Pattern&#xff09;概述二、代理模式和观察者设计模式三、模式结构四、协作角色五、实现策略六、相关模式七、示例八、应用 一、代理模式&#xff08;Proxy Pattern&#xff09;概述 代理模式是一种设计模式&#xff0c;它通过引入一个…

智能体AI Agent的极速入门:从ReAct到AutoGPT、QwenAgent、XAgent

前言 如这两天在微博上所说&#xff0c;除了已经在七月官网上线的AIGC模特生成系统外&#xff0c;我正在并行带多个项目组 第二项目组&#xff0c;论文审稿GPT第2版的效果已经超过了GPT4&#xff0c;详见《七月论文审稿GPT第2版&#xff1a;用一万多条paper-review数据集微调…

Vue-38、Vue中插件使用

1、新建plugins.js文件 2、可以在plugins.js 定义全局过滤器 定义全局指令 定义混入 给vue原型上添加一个方法 export default {install(Vue){console.log("install",Vue);//全局过滤器Vue.filter(mySlice,function (value) {return value.slice(0,4)});//定义全局…

遇到这3种接口测试问题,其实,你可以这么办~

作为整个软件项目的必经环节&#xff0c;软件测试是不可缺少的“查漏补缺”环节。而作为软件测试中的重要一环——接口测试&#xff0c;几乎串联了整个项目所有的输入和输出环节。 前几年&#xff0c;我在做后端测试时&#xff0c;接触最多的正是接口测试。基于此&#xff0c;…

操作系统-进程通信(共享存储 消息传递 管道通信 读写管道的条件)

文章目录 什么是进程通信为什么进程通信需要操作系统支持共享存储消息传递直接通信方式间接通信方式 管道通信小结注意 什么是进程通信 分享吃瓜文涉及到了进程通信 进程通信需要操作系统支持 为什么进程通信需要操作系统支持 进程不能访问非本进程的空间 当进程P和Q需要…

幻兽帕鲁服务器数据备份

搭建幻兽帕鲁个人服务器&#xff0c;最近不少用户碰到内存不足、游戏坏档之类的问题。做好定时备份&#xff0c;才能轻松快速恢复游戏进度 这里讲一下如何定时将服务器数据备份到腾讯云轻量对象存储服务&#xff0c;以及如何在有需要的时候进行数据恢复。服务器中间的数据迁移…

数据结构(顺序表)

文章目录 一、线性表1、线性表1.1、线性表的定义1.2、线性表的操作 2、顺序表2.1、顺序表的实现--静态分配2.2、顺序表的实现--动态分配2.2、顺序表的特点 3、顺序表的基本操作3.1、插入操作3.2、删除操作3.3、查找操作3.2、按位查找3.2、按值查找 一、线性表 1、线性表 1.1、…

Git 删除已经 Push 到远程多余的文件

例如要删除 data/log 文件 1. 在当前项目下打开终端 2. 查看有哪些文件夹 dir 3. 预览将要删除的文件&#xff08;如果不清楚该目录下是否存在不应该删除的文件&#xff09; git rm -r -n --cached 文件/文件夹名称 加上 -n 这个参数&#xff0c;执行命令时&#xff0c;是不会…

Numpy应用-股价分析实战

股价统计分析 数据样本 股价常用指标 极差 越高说明波动越明显 股价近期最高价的最大值和最小值的差价 成交量加权平均价格 英文名VWAP&#xff08;Volume-Weighted Average Price&#xff0c;成交量加权平均价格&#xff09;是一个非常重要的经济学量&#xff0c;代表着金融…

苹果Find My市场需求火爆,伦茨科技ST17H6x芯片助力客户量产

苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、AirPods、Apple Watch&#xff0c;如今的Find My已经不单单可以查找苹果的设备&#xff0c;随着第三方设备的加入&#xff0c;将丰富Find My Network的版图。产…

Google Chrome RCE漏洞 CVE-2020-6507 和 CVE-2024-0517 流程分析

本文深入研究了两个在 Google Chrome 的 V8 JavaScript 引擎中发现的漏洞&#xff0c;分别是 CVE-2020-6507 和 CVE-2024-0517。这两个漏洞都涉及 V8 引擎的堆损坏问题&#xff0c;允许远程代码执行。通过EXP HTML部分的内存操作、垃圾回收等流程方式实施利用攻击。 CVE-2020-…

操作符详解(上)

目录 操作符的分类 二进制和进制转换 2进制转10进制 10进制转2进制数字 2进制转8进制 2进制转16进制 原码、反码、补码 移位操作符 左移操作符 右移操作符 位操作符&#xff1a;&、|、^、~ 单目操作符 逗号表达式 操作符的分类 • 算术操作符&#xff1a; …

【C++干货铺】 RAII实现智能指针

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 为什么需要智能指针&#xff1f; 内存泄漏 什么是内存泄漏&#xff0c;内存泄露的危害 内存泄漏的分类 堆内存泄漏&#xff08;Heap leak&#xff09; 系统资…

CMG GPP 0.05°全球区域2000~2019年月数据分享

各位同学们好&#xff0c;今天分享的是CMG GPP 0.05全球区域2000~2019年月数据。您可以私信或评论。 一、数据简介 准确估算陆地植被的初级生产总值&#xff08;GPP&#xff09;对于了解全球碳循环和预测未来气候变化至关重要。目前有多种基于不同方法的 GPP 产品&#xff0c…