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.hqwc.cn/news/434178.html

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

相关文章

HCIA学习作业二

要求&#xff1a;基于192.168.1.0/24进行合理划分&#xff0c;要求全网通 [AR3]display ip interface brief [AR3]display ip routing-table [AR1]display ip interface brief [AR1]display ip routing-table [AR2]display ip interface brief [AR2]display ip routing-tab…

STM32(更新中)

目录 1 时钟&#xff08;心跳&#xff09; 1.1 CubeMX基本配置 1.2 外设在时钟上的分配原理 1.3 时钟树 2 寄存器&#xff08;地址&#xff09; 3 GPIO 3.1 GPIO实物 3.2 GPIO两种结构&#xff08;推挽/开漏&#xff09; 3.3 LED 3.4 CUBEMX 3.5 常用函数 …

利用aiohttp异步爬虫实现网站数据高效抓取

前言 大数据时代&#xff0c;网站数据的高效抓取对于众多应用程序和服务来说至关重要。传统的同步爬虫技术在面对大规模数据抓取时往往效率低下&#xff0c;而异步爬虫技术的出现为解决这一问题提供了新的思路。本文将介绍如何利用aiohttp异步爬虫技术实现网站数据抓取&#x…

【深度学习】sdxl中的 tokenizer tokenizer_2 区别

代码仓库&#xff1a; https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/tree/main 截图&#xff1a; 为什么有两个分词器 tokenizer 和 tokenizer_2&#xff1f; 在仔细阅读这些代码后&#xff0c;我们了解到 tokenizer_2 主要是用于 refiner 模型的。 #…

如何在yolov8中验证时计算FPS

ultralytics-main/ultralytics/engine/validator.py文件下&#xff0c;第200行左右&#xff0c;添加如下代码 LOGGER.info(fFPS:{(1000 / sum(self.speed.values())):.2f}) speed.values()是一个字典&#xff0c;包括preprocess,inference,loss,postprocess的时间&#xff0c;所…

node 第二十三天 mongoDB shell 命令 CRUD 增删改查 基础

什么是 mongoDB shell 命令 mongoDB shell 命令就是在cmd窗口或者powershell窗口与mongoDB交互的命令, 以下简称mongosh 对应我们上一天安装的 mongosh 工具 有什么用 mongosh 对一般的开发者可能意义不大, 因为在开发过程中我们会基于某一款语言来使用mongoDB, 比如在node端我…

研发日记,Matlab/Simulink避坑指南(七)——数据溢出钳位Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(三)——向上取整Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑…

mysql连接查询,备忘

mysql连接查询 在MySQL数据库查询中&#xff0c;经常会使用到多表查询&#xff0c;本篇介绍mysql中的内连接&#xff0c;左连接&#xff0c;右连接。 用作备忘。 使用两个简单的数据表做展现。 表A AidAvalue1a0012a0023a0034a0045a005 表B BidBvalue1b0012b0023b0034b0046b…

应用机器学习的建议

一、决定下一步做什么 在你得到你的学习参数以后&#xff0c;如果你要将你的假设函数放到一组新的房屋样本上进行测试&#xff0c;假如说你在预测房价时产生了巨大的误差&#xff0c;你想改进这个算法&#xff0c;接下来应该怎么办&#xff1f;实际上你可以考虑先采用下面的几种…

C++初阶入门之命名空间和缺省参数的详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.前言 二.命名空间 2.1命名冲突的例子 2.2解决方案 2.3命…

如何让思维系统化,拥有「自己的想法」?

先思考一个问题&#xff1a; 如果外星人来访地球&#xff0c;你觉得他们更有可能是善意的&#xff0c;还是恶意的&#xff1f; 你的反应是什么&#xff0c;会如何切入思考&#xff1f; 一般人可能会这样回答&#xff1a; 当然是恶意的&#xff0c;因为要争夺资源啊&#xff0c;…

基于LLaMA-Factory的微调记录

文章目录 数据模型准备基于网页的简单微调基于网页的简单评测基于网页的简单聊天 LLaMA-Factory是一个非常好用的无代码微调框架&#xff0c;不管是在模型、微调方式还是参数设置上都提供了非常完备的支持&#xff0c;下面是对微调全过程的一个记录。 数据模型准备 微调时一般…