ECharts基础使用方法 ---vue

news2024/9/23 12:18:49
1.安装依赖文件

仔细看项目" README.md " 描述,确定用什么安装

npm

npm install echarts --save //官网推荐使用

pnpm

pnpm install echarts --save

其他也是

在项目根目录,打开当前目录命令控制栏,输入以上命令并运行

 安装成功后去看 " package.json " 查看是否安装成功,成功如下图所示:

2.书写配置

 template 部分类容

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

script 部分类容

import * as echarts from 'echarts'; //在哪里使用就在那里导入

export default {
//mounted用于dom挂载
  mounted(){    
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}
3.效果展示

-------------------------- 

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

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

相关文章

动动手指探索世界,旅游APP如何定制开发?

旅游APP的出现为旅行带来了许多便利。随着移动互联网的发展&#xff0c;旅游行业也在不断寻求创新与变革。旅游APP为游客提供了更加便捷的旅行体验&#xff0c;通过旅游APP&#xff0c;用户可以了解旅游信息、旅游服务、在线咨询等&#xff0c;实现在线一站式解决旅行需求的目标…

Github 2024-09-23 开源项目周报 Top15

根据Github Trendings的统计,本周(2024-09-23统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6C++项目3C项目3HTML项目2PowerShell项目1TypeScript项目1JavaScript项目1Blade项目1PHP项目1Bootstrap 5: Web上开发响应式、移动优…

【文心智能体】 旅游手绘手帐 开发分享 零代码 手绘风景 记录行程和心情 旅游攻略

旅游手绘手帐&#xff0c;点击文心智能体平台AgentBuilder | 想象即现实 (baidu.com) 目录 背景 创作灵感 开发历程 一、基础配置 二、高级配置 三、引导示例&#xff08;提示词&#xff09; 期待优化 背景 这个智能体是一个零代码智能体&#xff08;文心智能体平台现…

MySQL篇(管理工具)

目录 一、系统数据库 二、常用工具 1. mysql 2. mysqladmin 3. mysqlbinlog 4. mysqlshow 5. mysqldump 6. mysqlimport/source 6.1 mysqlimport 6.2 source 一、系统数据库 MySQL数据库安装完成后&#xff0c;自带了一下四个数据库&#xff0c;具体作用如下&#xf…

JDBC和一下重要的jar包,分层结构

系列文章目录 JDBC和方便使用的jar包 目录 系列文章目录 文章目录 一、JDBC 1.步骤 2.SQL注入 3.SQL注入解决&#xff08;PreparedStatement&#xff09; 4.批处理和事务控制 5.连接池 Druid连接池&#xff08;德鲁伊&#xff09; 6.封装为工具类 7.ThreadLocal 、小秘书 二、…

大语言模型(LLM)入门学习路线图

Github项目上有一个大语言模型学习路线笔记&#xff0c;它全面涵盖了大语言模型的所需的基础知识学习&#xff0c;LLM前沿算法和架构&#xff0c;以及如何将大语言模型进行工程化实践。这份资料是初学者或有一定基础的开发/算法人员入门活深入大型语言模型学习的优秀参考。这份…

【FPGA】FPGA芯片结构

目录 1 可编程输出/输出单元&#xff08;IOB&#xff09;2 可配置逻辑块&#xff08;CLB&#xff09;3 数字时钟管理模块&#xff08;DCM&#xff09;4 嵌入式块存储器&#xff08;BRAM&#xff09;5 布线资源6 内嵌功能模块&#xff08;专用IP单元&#xff09;6.1 PLL&#xf…

SpringBoot简易商品管理系统

> 这是一个基于SpringBootThymeleaf实现的简易商品管理系统。 > 包含基本的登录/注册与商品管理功能。 > 界面简洁美观&#xff0c;代码结构清晰&#xff0c;适用于JAVA初学者在此基础上进行二次开发。 一、项目演示 二、技术框架 框架描述Spring Boot容器管理 S…

CV之OCR:GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略

CV之OCR&#xff1a;GOT-OCR2.0的简介、安装和使用方法、案例应用之详细攻略 目录 GOT-OCR2.0的简介 1、更新 GOT-OCR2.0的安装和使用方法 1、安装 安装环境cuda11.8torch2.0.1 安装包 安装Flash-Attention GOT权重&#xff1a;1.43G 2、演示 3、训练 4、评估 GOT-…

Tomcat靶场攻略

一.CVE-2017-12615 1.首页抓包&#xff0c;修改为 PUT 方式提交 ,将jsp木马写到数据包中 2.哥斯拉默认秘钥连接 二.后台弱⼝令部署war包 1.制作WAR包,上传 将JSP⽊⻢压缩为ZIP格式&#xff0c;然后修改后缀为war 2.文件上传成功后&#xff0c;默认会在网站根目录下生成和wa…

使用centos7搭建wiki论坛,使用nginx网站来搭建wiki负载均衡,反向代理。

1.安装一个wget&#xff0c;进入目录opt下 #安装wget yum -y install wget#进入目录/opt/下面 cd /opt/2.获取 mysql8.0 rpm包,安装mysql8.0,安装mysql-server&#xff0c;yum会自动下载所需安装及依赖包. #获取 mysql8.0 rpm包 wget https://dev.mysql.com/get/mysql80-comm…

2024人工智能结课作业-DFS/BFS/Astar解决数码问题

1 深度优先遍历搜索(DFS) 1.1算法介绍 深度优先搜索算法&#xff08;Depth-First-Search&#xff0c;DFS&#xff09;是一种用于遍历或搜索树或图的算法。沿着树的深度遍历树的节点&#xff0c;尽可能深的搜索树的分支。当节点v的所在边都己被探寻过&#xff0c;搜索将回溯到发…

基于SSM的“在线CRM管理系统”的设计与实现(源码+数据库+文档+开题报告)

基于SSM的“在线CRM管理系统”的设计与实现&#xff08;源码数据库文档开题报告) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 总体功能模块图 登录页面 后台管理页面 产品信息页面 客…

【Android】BottomSheet基本用法总结(BottomSheetDialog,BottomSheetDialogFragment)

BottomSheet BottomSheet 是一种位于屏幕底部的面板&#xff0c;用于显示附加内容或选项。提供了从屏幕底部向上滑动显示内容的交互方式。这种设计模式在 Material Design 中被广泛推荐&#xff0c;因为它可以提供一种优雅且不干扰主屏幕内容的方式来展示额外信息或操作。 具体…

大型综合医院供配电系统设计

摘要&#xff1a;众所周知&#xff0c;医院供配电系统关系着整个医院的正常运行&#xff0c;一旦出现故障将会对病患的安全造成威胁。基于此&#xff0c;本文就大型综合医院供配电系统设计进行深入探讨&#xff0c;以期为其他类似医院建筑供配电系统设计提供借鉴。 关键词&…

代理模式详解:控制对象访问的利器

代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。代理模式通常用于延迟对象的创建、控制对对象的访问或在访问对象时添加一些额外的操作。 代理模式通过引入一个代理对象来控制对目标对象的访…

超详细超实用!!!AI编程之cursor配置中文(一)

云风网 云风笔记 云风知识库 一、配置中文扩展 打开扩展&#xff0c;搜索chinese,安装chinese(simplified) 简体中文语言包,重启即可 二、配置中文方法二 使用快捷键组合【CtrlShiftp】&#xff0c;在搜索框中输入configure display language,选择中文也可配置中文 三、配置…

九、成功版--windows上安装artifactory配置postgressql

centos上搞不定&#xff0c;windows上搞定了 现阶段是想用java写程序控制制品库&#xff0c;等以后研究多了需要写一些脚本的时候&#xff0c;在研究linux上安装artifactory&#xff08;公司就用的linux安装的配置mysql&#xff0c;有空对着配一下linux的&#xff09; 源码地…

【实证数据】国家信息消费试点城市(2000年-2023年)

数据说明&#xff1a;2013年&#xff0c;国务院发布《促进信息消费若干意见》&#xff0c;旨在激发需求、拓宽市场及丰富服务内容。随后&#xff0c;工信部启动信息消费试点城市建设&#xff0c;分两批确立104个试点区域&#xff0c;旨在通过试点引领&#xff0c;促进信息消费增…

STM32—I2C通信外设

1.I2C外设简介 STM32内部集成了硬件I2C收发电路&#xff0c;可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能&#xff0c;减轻CPU的负担支持多主机模型&#xff08;可变多主机&#xff09;支持7位/10位地址模式&#xff08;11110......)支持不同的通…