vue-echarts在vue中的使用
安装依赖:
【win】npm install echarts vue-echarts
【mac】sudo npm install echarts vue-echarts
Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。
修复方法是在vue.config.js中添加如下代码:
// For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
引入:
import ECharts from 'vue-echarts'
各零件按需加载,手动引入 ECharts 各模块来减小打包体积:
import "echarts/lib/chart/line"; // 线图
import "echarts/lib/chart/bar"; // 柱图
import 'echarts/lib/component/legend' // 图例
import 'echarts/lib/component/tooltip' //提示框
etc...
注册:
Vue.component('myEchart', ECharts)
使用组件:
<myEchart :options="echartsOptions" ref="myCharts" />
vue-echarts的options设置基本同echarts,配置文档看echarts官网即可。
vue-echarts在vue中的使用的更多相关文章
- echarts在vue中使用的感悟
echarts在vue中使用的感悟 echarts作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录 ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- vue echarts 动态数据
安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.n ...
- vue+echarts实现可拖动节点的折现图(支持拖动方向和上下限的设置)
本篇文档主要是利用echarts实现可拖动节点的折现图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c= ...
- vue + eCharts 实现图表展示
一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...
- Vue echarts
方式一.直接引入echarts 先 npm 安装 echarts npm install echarts --save // main.js import myCharts from './comm/ ...
- 如何在vue单页应用中使用百度地图
作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- Vue:在vue-cli中使用Bootstrap
一.安装jQuery Bootstrap需要依赖jQuery,所以引用Bootstrap之前要先引用jQuery,使用下面的命令引用jQuery: npm install jquery --save ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
随机推荐
- 另一种缓存,Spring Boot 整合 Ehcache
用惯了 Redis ,很多人已经忘记了还有另一个缓存方案 Ehcache ,是的,在 Redis 一统江湖的时代,Ehcache 渐渐有点没落了,不过,我们还是有必要了解下 Ehcache ,在有的场 ...
- web应急:新闻源网站劫持
新闻源网站一般权重较高,收录快,能够被搜索引擎优先收录,是黑灰产推广引流的必争之地,很容易成为被攻击的对象.被黑以后主要挂的不良信息内容主要是博彩六合彩等赌博类内容,新闻源网站程序无论是自主开发的还是 ...
- Window 远程桌面漏洞风险,各个厂家的扫描修复方案(CVE-2019-0708)
自微软公司于2019年5月14日发布远程桌面服务远程代码执行漏洞(CVE-2019-0708)安全公告后,整个业界都一直在密切关注,这个漏洞编号必将在当今网络中掀起腥风血雨.各大厂商也纷纷推出自己的修 ...
- Jenkins的使用(一)
Jenkins 介绍: Jenkins是一个独立的开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成 变成可能.前身是Huds ...
- 浅析负载均衡的6种算法,Ngnix的5种算法
常见的几种负载均衡算法 1.轮询法 将请求按顺序轮流地分配到后端服务器上,它均衡地对待后端的每一台服务器,而不关心服务器实际的连接数和当前的系统负载. 2.随机法 通过系统的随机算法,根据后端服务器的 ...
- Android源码分析(八)-----系统启动流程&IPC简述
一 :系统启动流程图 从下往上依次启动linux kernel -->zygote-->SystemServer-->NativeService-->AndroidServic ...
- ssh免密登录(公钥私钥)指令
1.在.ssh目录中执行ssh-keygen -t rsa命令生成两个秘钥,公钥(id_rsa.pub)和私钥(id_rsa) 2.ssh-copy-id -i id_rsa.pub 对方用户名@对方 ...
- 小程序插件集成functional-page-navigator真机调试报错
小程序集成插件 插件里面有functional-page-navigator标签 一."小程序开发版已过期,请重新扫码连接" 真机在调用插件的时候报错 "小程序开发版已过 ...
- 【转】Pandas学习笔记(二)选择数据
Pandas学习笔记系列: Pandas学习笔记(一)基本介绍 Pandas学习笔记(二)选择数据 Pandas学习笔记(三)修改&添加值 Pandas学习笔记(四)处理丢失值 Pandas学 ...
- Detectron2源码阅读笔记-(三)Dataset pipeline
构建data_loader原理步骤 # engine/default.py from detectron2.data import ( MetadataCatalog, build_detection ...