首页 > 其他分享 >Vue中使用Echarts可视化图表

Vue中使用Echarts可视化图表

时间:2023-07-26 11:11:06浏览次数:36  
标签:npm Vue echarts 图表 可视化 import Echarts

1、首先在项目中安装Echarts

1 npm install echarts
2 npm install echarts --save

 

2、在项目 main.js 中全局引入

1 import echarts from 'echarts'
2 // 挂载到vue原型上
3 Vue.prototype.$echarts = echarts

 

1 //全局引入echarts
2 import * as echarts from 'echarts';
3 //需要挂载到Vue原型上
4 Vue.prototype.$echarts = echarts

 

3、在vue文件中定义好图表容器,随后使用容器构建图表(在函数中构建图表)

 

4、图表出现

 

标签:npm,Vue,echarts,图表,可视化,import,Echarts
From: https://www.cnblogs.com/HE0318bei/p/17581922.html

相关文章

  • uni-app vue-cli命令行创建项目,拉取模板(dcloudio/uni-preset-vue)失败,443超时报错
    安装vue/clinpminstall-g@vue/cli问题根据官网提示,通过vue-cli命令行创建项目,出现如下报错。Fetchingremotepresetdcloudio/uni-preset-vue...ERRORFailedfetchingremotepresetdcloudio/uni-preset-vue:ERRORRequestError:connectETIMEDOUT192.30.25......
  • vue3之element-plus
    1.安装elementPlus和自动导入插件npmielementPlusnpminstall-Dunplugin-vue-componentsunplugin-auto-import2、配置自动按需导入//引入插件importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{......
  • vue : 无法加载文件 C:\Users\jianfei\AppData\Roaming\npm\vue.ps1,因为在此系
    背景在新电脑上配置vue环境PSE:\CODE_PROJ\myvue\vue23\P61_使用脚手架\vue_test>npminstall-g@vue/[email protected]:Seehttps://github.com/lydell/source-map-url#[email protected]:Pleaseseehttps://github......
  • DevExpress WPF Tree List组件,让数据可视化程度更高!(一)
    DevExpressWPFTreeList组件是一个功能齐全、数据感知的TreeView-ListView混合体,可以把数据信息显示为REE、GRID或两者的组合,在数据绑定或非绑定模式下,具有完整的数据编辑支持。DevExpressWPF 拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过......
  • SpringBoot+Prometheus+Grafana实现系统可视化监控
    场景SpringBoot中集成Actuator实现监控系统运行状态:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124272494基于以上Actuator实现系统监控,还可采用如下方案。PrometheusPrometheus,是一个开源的系统监控和告警的工具包,其采用Pull方式采集时间序列的度量数据(也......
  • Vue中的虚拟DOM和Diff算法
    一、虚拟DOM1.什么是虚拟DOM?一个用来表示真实DOM节点的JS对象,主要包含标签名tag、属性attrs和子元素对象children属性等。代码示例如下:<divclass="contain"id="baseNo"><h4class="item">标题</h4><pclass="item">段落内容</p>&......
  • 前端Vue仿支付宝自定义可滑动轮播分页宫格菜单组件,可支持九宫格 十二宫格 十五宫格
    背景介绍随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且......
  • vue--day44-todolist的localStorage本地存储
    添加修改删除数据发生变化,可以用watch监测来实现监测数据的变化1.App.vue  <template><divid="root"><divclass="todo-container"><divclass="todo-wrap"><!--传递函数儿子给父亲传东西,父亲偷偷传递一个函数,儿子调用这个函数--><MyHeader:addTodo=&q......
  • Vue详解----一篇带你从头领悟到尾,享受飞升的感觉
    ......
  • 初学vue
    做为一个在圈子内混饭吃的我来说,对于vue是久有耳闻,但是混饭吃嘛,也不要太新的技术,一般实现客户需求就好,毕竟不是一线城市最近有一个项目需要用到Vue,而且计划给公司用uniapp开发一个手机端应用,里面也需要用到vue的相关技术,所以今天开始了学习之路初学嘛,当然跳过Vue2直接学vue3首......