echart使用

安装方式从 npm 获取 

npm install echarts

使用的页面js部分引入:

import * as echarts from "echarts"; // 图标引入 

html:需要带id标签的div

  <div class="bottom">
      <div id="main1"></div>
    </div>

css:需要设定长宽

 #main1
{
  width: 49%;
  // height: 70vh;
  height: 40vh;
  background: #fff;
}

js :

  mounted() {
     // 渲染图表
          this.$nextTick(() => {
            this.drawChart1();
          });
  },
   drawChart1() {
      // 基于准备好的dom,初始化echarts实例  这个和上面的main对应
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      myChart.clear(); // 清空图表,重新渲染图表
      // 指定图表的配置项和数据
      let option = {
        grid: {
          top: "18%",
          left: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
          right: "5%", // grid布局设置适当调整避免X轴文字只能部分显示
          bottom: "7%",
        },
        title: {
          text: "7日识别总次数",
        },
        tooltip: {},
        legend: {
          data: ["人数"],
        },
        // 日期
        xAxis: {
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: this.Days7,
        },
        yAxis: {},
        series: [
          {
            name: "次数",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20],
            data: this.Days7Data,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

就是直接去复制官网中你要的那个的完整代码,第一行的引入上面已经写了

 补充:

要想获取数据的时候再重新渲染表格只需加一行:
 myChart.clear(); // 清空图表,重新渲染图表

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

opencv-python(五)

opencv的颜色通道中顺序是B&#xff0c;G&#xff0c;R。 图像属性 import cv2img cv2.imread(jk.jpg) print(fshape{img.shape}) print(fsize{img.size}) print(fdtype{img.dtype}) shape&#xff1a;图像像素的行&#xff0c;列&#xff0c;通道 size&#xff1a;行数 X …

磁盘怎么分区?3 款最佳免费磁盘分区软件

您可能已经注意到&#xff0c;大多数计算机至少有 2 个分区&#xff1a;一个安装 Windows 操作系统和程序&#xff08;C:&#xff09;&#xff0c;另一个安装其他文件&#xff08;D:&#xff09;。 默认情况下&#xff0c;计算机只有一个硬盘和一个分区。建议创建 2 个或更多分…

逐步掌握最佳Ai Agents框架-AutoGen 九 RAG应用

在最近的几篇文章里&#xff0c;我们使用AutoGen实现了一些Demo。这篇文章&#xff0c;我们将使用AutoGen来完成RAG应用开发。 RAG应用 RAG全称"Retrieval-Augmented Generation",即检索增强生成&#xff0c;它是自然语言处理中的一项技术。这种模型结合了检索式&a…

try…except语句

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在程序开发时&#xff0c;有些错误并不是每次运行都会出现。例如&#xff0c;实例01&#xff0c;只要输入的数据符合程序的要求&#xff0c;程序就可…

智能监测,无忧续航!Battery Indicator for Mac,让电池状态尽在掌握

Battery Indicator for Mac 是一款设计精良的电池状态监测软件&#xff0c;它极大地增强了Mac用户对电池使用情况的感知和管理能力。 首先&#xff0c;Battery Indicator for Mac 能够实时显示电池电量百分比。这意味着&#xff0c;无论你是在处理文件、浏览网页还是观看视频&…

vue无需引入第三方, 将web页面内容直接下载为docx

vue无需引入第三方&#xff0c; 将web页面内容直接下载为docx 将web页面内容重绘 html &#xff0c;通过 a 标签直接下载 通过写行内样式&#xff0c;控制docx中的文字图效果 let echHtmlWithIf ;if (this.chartImg.length) {if (this.exceed10Min) {echHtmlWithIf <div…

c++ - list常用接口模拟实现

文章目录 一、模拟list类的框架二、函数接口实现1、迭代器接口2、常用删除、插入接口3、常用其他的一些函数接口4、默认成员函数 一、模拟list类的框架 1、使用带哨兵的双向链表实现。 2、链表结点&#xff1a; // List的结点类 template<class T> struct ListNode {Li…

opencv进阶 ——(十一)基于RMBG实现生活照生成寸照

实现步骤 1、检测人脸&#xff0c;可以使用opencv自带的级联分类器或者dlib实现人脸检测 2、放大人脸范围&#xff0c;调整到正常寸照尺寸 3、基于RMGB算法得到人像掩码 4、生成尺寸相同的纯色背景与当前人像进行ALPHA融合即可 alpha融合实现 void alphaBlend(cv::Mat&…

场外个股期权交易最新指南

场外个股期权交易最新指南 场外个股期权作为一种灵活的衍生品工具&#xff0c;允许投资者在特定条件下对交易所指定的股票进行买卖。相较于标准化的场内个股期权&#xff0c;场外个股期权为投资者提供了更大的自由度。以下是关于场外个股期权交易的基本步骤和要点&#xff1a;…

股票期权是什么意思?期权懂为你介绍股票期权操作方法

今天带你了解股票期权是什么意思&#xff1f;期权懂为你介绍股票期权操作方法。股票期权是一种有着多种用途的金融工具&#xff0c;它给企业、员工、投资人和公司带来了丰厚的收益&#xff0c;对于投资人而言&#xff0c;在市场风险和机会之间寻找平衡&#xff0c;从而实现稳健…

bbbike下载OSM路网数据后使用GraphHopper离线进行路径规划

一、bbbike下载OSM路网数据 GraphHopper是一种快速且内存有效的Java导航引擎&#xff0c;默认使用OSM和GTFS数据&#xff0c;也可导入其他的数据源。支持CH&#xff08;Contraction Hierarchies&#xff09;、A*、Dijkstra算法。 1、搭建之前要保证jdk安装完成&#xff0c;且完…

openeuler系统配置dns

openeuler系统配置dns 第1步 在/etc/sysconfig/network-scripts/ifcfg-ens192文件配置 注意PEERDNSno一定要配上 第2步 vim /etc/resolv.conf #编辑dns指向文件 nameserver 192.168.187.129 #添加我们配置的dns服务器的ip第3步 # 配置完以后需要重启网卡 systemctl res…

每天的CTF小练--6.5(ascll码高级运用)

题目&#xff1a;[HUBUCTF 2022 新生赛]baby_encrypt hint&#xff1a; 781612443113954655886887407898899451044114412011257135914071455155316031651170318041861191719652013207021272183228423832485254125932643269827992924 注意查看前面的数字&#xff0c;这题不想现…

python入门3

文章目录 前言一、函数为什么要使用函数&#xff1f;函数定义函数定义和调用定义函数返回值定义空函数函数参数传递传递实参位置实参关键词实参默认值实参等效函数调用实参可选传递任意数量的实参任意数量关键字实参任意参数*与** 的区别使用元组和字典传参如果既有实参又有任意…

高效管理近30万稳定运力,科技物流企业万联易达这样做

万联易达物流科技有限公司&#xff08;以下简称“万联易达”&#xff09;&#xff0c;是由中泽集团投资设立的创新型物流科技企业。为提高平台数智化服务水平&#xff0c;提升业务开展效率&#xff0c;达到运输全场景合规化管理&#xff0c;万联易达平台引用法大大电子合同&…

Hadoop3:MapReduce之MapTask的FileInputFormat的切片原理解读(2)

Job那块的断点代码截图省略&#xff0c;直接进入切片逻辑 参考&#xff1a;Hadoop3&#xff1a;MapReduce之MapTask的Job任务提交流程原理解读&#xff08;1&#xff09; 4、FileInputFormat切片源码解析 切片入口 获取切片数 获取最大和最小切片数 判断文件是否可以切片&…

MFC 模态对话框的实现原理

参考自MFC 模态对话框的实现原理 - 西昆仑 - OSCHINA - 中文开源技术交流社区 1. 模态对话框 在涉及 GUI 程序开发的过程中&#xff0c;常常有模态对话框以及非模态对话框的概念 模态对话框&#xff1a;在模态对话框活动期间&#xff0c;父窗口是无法进行消息响应&#xff0…

JVM类加载机制和双亲委派

类加载机制 java文件需要编译成字节码文件(.class文件)&#xff0c;jvm是通过类加载机制&#xff0c;将.class文件加载进内存&#xff0c;经过验证连接->初始化直到使用该对象的过程就是类加载机制&#xff0c;当new对象的时候&#xff0c;jvm首先去常量池寻找该类的符号引用…

罗永浩创业史!普通人也能逆袭!2024轻资产创业项目!2024普通人的出路! 2024普通人做什么行业赚钱!

罗永浩出身草根&#xff0c;一路打拼至今&#xff0c;虽然屡屡受挫但是从未妥协&#xff0c;罗永浩真正的诠释了什么叫“彪悍的人生不需要解释”&#xff01; 回顾罗永浩的传奇创业史: 1. 从新东方出来做牛博网--失败 2.创办老罗英语培训学校--失败 3.致敬乔布斯做锤子科技-…

Mybatis01-初识Mybatis

简介 1、 什么是Mybatis MyBatis 是一款优秀的持久层框架; 它支持自定义 SQL、存储过程以及高级映射 MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。 MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Ol…