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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
详解node中创建服务进程
May 09 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
原生js开发的日历插件
2017/02/04 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
基于python中的TCP及UDP(详解)
2017/11/06 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
通过代码实例了解Python sys模块
2020/09/14 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
《特殊的葬礼》教学反思
2014/04/27 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
离婚财产处理协议书
2014/09/30 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
红歌会主持词
2015/07/02 职场文书
心理健康教育主题班会
2015/08/13 职场文书
社区宣传标语口号
2015/12/26 职场文书
《将心比心》教学反思
2016/02/23 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python