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的更多相关文章

  1. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  2. 如何在Vue中建立全局引用或者全局命令

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.u ...

  3. 如何在vue中使用svg

    1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置    const path = require('path'); func ...

  4. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  5. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  6. 在Vue中使用Echart图表库。【全网最简单】

    使用npm安装echart npm install echarts --save 然后在使用的页面上直接import import echarts from "echarts"; ...

  7. 如何在vue中使用sass

    使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...

  8. 如何在vue中请求本地json文件

    1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...

  9. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

随机推荐

  1. C#如何使用PythonTuple类型

    示例代码: new PythonTuple(new[] { 1, 2, 3 }); PythonTuple myTuple = PythonOps.MakeTuple(new object[] { 1 ...

  2. web appbuilder 正式版用yo esri-appbuilder-js:widget生成widget读取不到config解决方案

           对于在webappBuilder正式版中,如果用yo esri-appbuilder-js:widget生成的widget,在写widget的时候widget里面的config.json ...

  3. SQL语法详解

    ALTER DATABASE修改数据库全局特性 ALTER DATABASE实际上是修改数据库目录中的dp.opt文件 ALTER TABLE修改表的结构 ALTER TABLE对表进行增删列,创建取 ...

  4. 初涉Delphi Socket编程

    不是第一次接触socket编程了,但以前都是看别人的依葫芦画瓢,也不知道具体的原理. 新的项目,有了新的开始,同时也需要有新的认识. Delphi 中带有两套TCP Socket组件: Indy So ...

  5. Qt 5.6.2 静态编译(VS2013 x86 target xp openssl icu webkit)

    在去年4月份的时候,我写过一篇动态编译Qt5.6.0的文章,当时是为了解决webkit不能在winxp下面跑的问题,动态编译有一个缺点,就是发布的时候,要携带一大堆dll,使安装包的体积增大.而静态编 ...

  6. C#每天进步一点--事件

    事件:如果类型定义了事件成员,那么类型就可以通知其他对象发生了特定的事情.例如,Button类提供了一个名为Click的事件.应用程序中的一个或者多个对象可能想接收关于这个事件的通知,以便在Butto ...

  7. Realm_King 之 .NET 打包详细教程(B)

    上篇(Realm_King 之 .NET 打包详细教程(A))给大家讲述了打包基本的操作,接下来帮助大家如何覆盖安装,希望大家仔细阅读... (一)看到你的解决方案,选中你的安装程序,点击F4会弹出改 ...

  8. ZooKeeper学习第四期---构建ZooKeeper应用(转)

    转载来源:https://www.cnblogs.com/sunddenly/p/4064992.html 一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那 ...

  9. 简单学习js

    由于是个前端小白,通过这一两天的学习html,css,js和jquery等,基本上前端会用了,而且熟悉我博客的人来说,没错,我把自己的博客给优化了一下(一些大佬都是禁用模板的所有样式,然后自己设计页面 ...

  10. Jenkins持续部署-自动生成版本号

    目录 Jenkins持续部署-自动生成版本号 目录 前言 目的 详细流程 获取SVN Reversion 获取需求号 设置编译前读取版本号 总结 参考文献 Jenkins持续部署-自动生成版本号 目录 ...