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 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
微信小程序实现多行文字滚动
Nov 18 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
用python代码做configure文件
2014/07/20 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
市三好学生主要事迹
2014/01/28 职场文书
小学生环保演讲稿
2014/04/25 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Python实现单例模式的5种方法
2021/06/15 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android