vue使用echarts图表的详细方法


Posted in Javascript onOctober 22, 2018

本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下

该示例使用 vue-cli  脚手架搭建

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像:

安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

cnpm install echarts -S

创建图表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted(){
  this.drawLine();
 },
 methods: {
  drawLine(){
    // 基于准备好的dom,初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      title: { text: '在Vue中使用echarts' },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
  }
 }
}

注意:这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

按需引入

上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

Hello.vue

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
 name: 'hello',
 data() {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 mounted() {
  this.drawLine();
 },
 methods: {
  drawLine() {
   // 基于准备好的dom,初始化echarts实例
   let myChart = echarts.init(document.getElementById('myChart'))
   // 绘制图表
   myChart.setOption({
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
     name: '销量',
     type: 'bar',
     data: [5, 20, 36, 10, 10, 20]
    }]
   });
  }
 }
}

这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。

页面展示

vue使用echarts图表的详细方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 随机展示头像实现代码
Dec 06 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
初步了解javascript面向对象
Nov 09 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
小程序实现录音功能
Sep 22 Javascript
js实现筛选功能
Nov 24 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 #Javascript
Koa 使用小技巧(小结)
Oct 22 #Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 #Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 #Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 #Javascript
详解Axios 如何取消已发送的请求
Oct 20 #Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 #Javascript
You might like
需要注意的几个PHP漏洞小结
2012/02/05 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
python数组过滤实现方法
2015/07/27 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python3 Random模块代码详解
2017/12/04 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python实现的分层随机抽样案例
2020/02/25 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
租房协议书
2014/04/10 职场文书
员工趣味活动方案
2014/08/27 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python