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 动态添加表格行
Jun 22 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
基于Vue单文件组件详解
Sep 15 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
详解javascript void(0)
Jul 13 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
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
vue组件学习教程
2017/09/09 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python 实现敏感词过滤的方法
2019/01/21 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
党员检讨书
2014/10/13 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
健康证明
2015/06/19 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
学术会议领导致辞
2015/07/29 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python