1. npm安装 echarts

npm install echarts --save

2. 引入Main.js中

// 引入方式如下，否则报错
import * as echarts from 'echarts'
// 将 createApp(App) 封装
let app=createApp(App);
// 注册全局的方法
app.config.globalProperties.$echarts = echarts;

3. 使用 echarts 第一步

给 echarts页面 准备一个宽高
<div id="myChart" :style="{ width: '1200px', height: '500px' }"></div>

4. 使用 echarts 第二步

mounted() {// 准备实例//this.$root => applet myChart = this.$root.$echarts.init(document.getElementById("myChart"));// echarts 配置// 绘制图表myChart.setOption({title: { text: "时间" },tooltip: {},xAxis: {data: ["8-21", "8-22", "8-23", "8-24", "8-25", "8-26"],},yAxis: {},series: [{name: "日期",type: "bar",data: [6, 12, 12, 18, 12, 18],},],});}
}

最后echarts完成了初步的入门

参考官方文档链接： https://echarts.apache.org/

Vue3 --- 安装和使用echarts相关推荐

在vue3.0中安装并使用echarts
(vue3.0安装并使用echarts) 1. 安装echarts npm install echarts --save 2. main.js import { createApp } from 'v ...
【01Vue3 安装】Vue3 安装引入 Vue.js创建Vue实例编写Vue应用程序在HTML中使用Vue应用程序
Vue3 安装在开始使用 Vue.js 3之前,需进行一些简单的设置和安装步骤.本教程将指导完成Vue3的安装过程. 步骤 1:引入 Vue.js 首先,在HTML文件中引入Vue.js库.可通过以 ...
windows vue3 安装及搭建
windows vue3 安装及搭建 1 安装node 1.1安装node.js 1.2 设置nodejs cache缓存路径 1.3 设置nodejs prefix全局路径 2 设置系统环境变量 2 ...
vue3安装vue-router
vue3安装vue-router 安装 # npm npm install vue-router@4# yarn yarn add vue-router@4 新建 router 文件夹路径:/src ...
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
Vue3安装配置.开发环境搭建(组件安装卸载)(图文详细) 本文目录: 一.vue的主要安装使用方式二.node.js安装和配置 1.支持运行 Node.js的平台 2.Node.js 版本开发发布 ...
Vue3+Cli4 中使用 Echarts 5
文章目录前言一.按需引入二.全局引入三.4小时血泪史 1.第一个困难 2.第二轮太阳总结前言最近在做这个项目,这也是驱使我探求Vue3和Echarts结合方法的原因,虽然还没做完,我挑一 ...
【3d地图】vue3.0中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中总结前言之前我们已经 ...
vue3安装_Vue 3.0正式发布了！
点击上方"前端极客技术",轻松关注 Vue团队于2020年9月18日晚发布了Vue 3.0 正式版本,代号:One Piece(海贼王) 官方Release Doc地址如下: ht ...
物联网设备数据流转之搭建前端服务框架：Vue3.0, ElementPlus, Axios, Echarts
背景有了后端服务接口,我们就要开始前端项目搭建啦,终于可以看到展示物联网设备数据的页面了.这篇文章搭建基于最新版 Vue 3.2.13 . ElementPlus 2.1.9 的极简前端脚手架,方便 ...

Vue3 --- 安装和使用echarts

1. npm安装 echarts

2. 引入Main.js中

3. 使用 echarts 第一步

4. 使用 echarts 第二步

最后echarts完成了初步的入门

Vue3 --- 安装和使用echarts相关推荐

最新文章

热门文章