如何在vue中使用echart
2019年10月23日进行更新,这里不再建议使用document.getElementById的方式获取元素的id,而是建议使用ref来代替。这样的话就会避免Echarts的图形容器还未生成就对其进行了初始化,产生如下的错误。
1.安装echarts依赖 npm install echarts --save
2.在main.js中全局中引用
import echarts from 'echarts' Vue.prototype.$echarts = echarts
3.在你需要用到echart的地方先设置一个div的id、宽高,
例子:
<div ref="chart1" style="width:100%;height:376px"></div>
然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。
mounted(){
this.getEchartData1()
},
methods: {
getEchartData1() {
const chart1 = this.$refs.chart1;
if (chart1) {
const myChart = this.$echarts.init(
document.getElementById("chart-part1")
);
const option = {};
myChart.setOption(option);
window.addEventListener("resize", function() {
myChart.resize();
});
}
}
}
其中const option = { }就是我们需要引进echart图表的代码,需要什么例子可以在官方例子https://www.echartsjs.com/examples/里面找。
注意!目前我遇到两个比较特殊的图表需要在main.js里面引入一下才能使用,一个是词云图,一个是盒须图。代码如下:
require('echarts-wordcloud') require('echarts/dist/extension/dataTool.js')
Echarts常见的属性改变
通常一个Echarts图表通常由title(标题)、legend(图例)、grid(网格)xAxis(x轴)、yAxis(y轴)、dataZoom(区域缩放)tooltip(提示框组件)、toolbox(工具栏)、series(系列列表。每个系列通过 type 决定自己的图表类型)组成。例子如下图所示:
具体需要修改哪一项的属性可以再官方配置项里面查找https://www.echartsjs.com/option.html#title
以后我这边也会贴出一些常见的属性更改。
如何在vue中使用echart的更多相关文章
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- 如何在Vue中建立全局引用或者全局命令
1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...
- 如何在vue中使用svg
1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置 const path = require('path'); func ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- 如何在Vue中优雅的使用防抖节流
1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...
- 在Vue中使用Echart图表库。【全网最简单】
使用npm安装echart npm install echarts --save 然后在使用的页面上直接import import echarts from "echarts"; ...
- 如何在vue中使用sass
使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- 如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
随机推荐
- C#如何使用PythonTuple类型
示例代码: new PythonTuple(new[] { 1, 2, 3 }); PythonTuple myTuple = PythonOps.MakeTuple(new object[] { 1 ...
- web appbuilder 正式版用yo esri-appbuilder-js:widget生成widget读取不到config解决方案
对于在webappBuilder正式版中,如果用yo esri-appbuilder-js:widget生成的widget,在写widget的时候widget里面的config.json ...
- SQL语法详解
ALTER DATABASE修改数据库全局特性 ALTER DATABASE实际上是修改数据库目录中的dp.opt文件 ALTER TABLE修改表的结构 ALTER TABLE对表进行增删列,创建取 ...
- 初涉Delphi Socket编程
不是第一次接触socket编程了,但以前都是看别人的依葫芦画瓢,也不知道具体的原理. 新的项目,有了新的开始,同时也需要有新的认识. Delphi 中带有两套TCP Socket组件: Indy So ...
- Qt 5.6.2 静态编译(VS2013 x86 target xp openssl icu webkit)
在去年4月份的时候,我写过一篇动态编译Qt5.6.0的文章,当时是为了解决webkit不能在winxp下面跑的问题,动态编译有一个缺点,就是发布的时候,要携带一大堆dll,使安装包的体积增大.而静态编 ...
- C#每天进步一点--事件
事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...
- Realm_King 之 .NET 打包详细教程(B)
上篇(Realm_King 之 .NET 打包详细教程(A))给大家讲述了打包基本的操作,接下来帮助大家如何覆盖安装,希望大家仔细阅读... (一)看到你的解决方案,选中你的安装程序,点击F4会弹出改 ...
- ZooKeeper学习第四期---构建ZooKeeper应用(转)
转载来源:https://www.cnblogs.com/sunddenly/p/4064992.html 一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那 ...
- 简单学习js
由于是个前端小白,通过这一两天的学习html,css,js和jquery等,基本上前端会用了,而且熟悉我博客的人来说,没错,我把自己的博客给优化了一下(一些大佬都是禁用模板的所有样式,然后自己设计页面 ...
- Jenkins持续部署-自动生成版本号
目录 Jenkins持续部署-自动生成版本号 目录 前言 目的 详细流程 获取SVN Reversion 获取需求号 设置编译前读取版本号 总结 参考文献 Jenkins持续部署-自动生成版本号 目录 ...