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

安装echarts依赖

npm install echarts -S

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

  • 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1
  • 使用
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图表打包,导致体积过大,所以我觉得最好还是按需引入。

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 必须把路径写全。

版权声明:本文为CSDN博主「ChosenWu」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/mr_wuch/article/details/70225364

第一个简单的Echarts实例的更多相关文章

  1. 第一节 简单的jsp实例

    1.打开Eclipse,依次点击“File” .“New” .“Other” ,选择生成动态Web项目. 2.输入项目名字,点击Finish 生成项目结构如下: 3.在WebContent目录上,单击 ...

  2. Qt5.9一个简单的多线程实例(类QThread)(第一种方法)

    Qt开启多线程,主要用到类QThread.有两种方法,第一种用一个类继承QThread,然后重新改写虚函数run().当要开启新线程时,只需要实例该类,然后调用函数start(),就可以开启一条多线程 ...

  3. 程序演示:C语言第一个简单实例

    在信息化.智能化的世界里,可能很早很早 我们就听过许多IT类的名词,C语言也在其中,我们侃侃而谈,到底C程序是什么样子?让我们先看简单的一个例子: 1 2 3 4 5 6 7 8 9 #include ...

  4. jquery实战第一讲---概述及其入门实例

    就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...

  5. 使用JAVA实现的一个简单IOC注入实例

    https://blog.csdn.net/echoshinian100/article/details/77977823 欲登高而望远,勿筑台于流沙 RSS订阅 原 使用JAVA实现的一个简单IOC ...

  6. Linux守护进程简单介绍和实例具体解释

    Linux守护进程简单介绍和实例具体解释 简单介绍 守护进程(Daemon)是执行在后台的一种特殊进程.它独立于控制终端而且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种非常实用的进程. ...

  7. php实现找两个链表的第一个公共结点(实例演示)

    php实现找两个链表的第一个公共结点(实例演示) 一.总结 因为是链表,第一个节点公共之后,后面所有的节点都公共了 画个图实例演示一下,会超清晰且简单 二.php实现找两个链表的第一个公共结点 题目描 ...

  8. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  9. 审核流(3)低调奢华,简单不凡,实例演示-SNF.WorkFlow--SNF快速开发平台3.1

    下面我们就从什么都没有,结合审核流进行演示实例.从无到有如何快速完美的实现,然而如此简单.低调而奢华,简单而不凡. 从只有数据表通过SNF.CodeGenerator代码生成器快速生成单据并与审核流进 ...

随机推荐

  1. Mysql的exist与in的区别

    如果查询的两个表大小相当,那么用in和exists差别不大. 如果两个表中一个较小,一个是大表,则子查询表大的用exists,子查询表小的用in:    例如:表A(小表),表B(大表)   1: s ...

  2. C++面试出现频率最高的30道题目

    http://blog.csdn.net/wangshihui512/article/details/9092439 1.new.delete.malloc.free关系 delete会调用对象的析构 ...

  3. np.where()

    numpy.where (condition[, x, y]) numpy.where()两种用法 1. np.where(condition, x, y) 满足条件(condition),输出x,不 ...

  4. kafka Windows安装

    1:安装JDK. 2:安装Zookeeper 下载地址:https://zookeeper.apache.org/releases.html 下载后,解压放在目录D:\bigdata(本文所用的目录) ...

  5. SQL学习(二)SQL基础的增删改查

    在测试时使用数据库时,用的比较多的就是增删改查SQL了. 一.增加(insert into ...values) 用于向表中插入新记录 1.不指定列(表示:依次插入所有列的值) insert into ...

  6. Hibernate不同数据库的连接及SQL方言

    本文讲述Hibernate不同数据库的连接及SQL方言.Hibernate不同数据库的连接可能会出现错误,有一种情况是由于Hibernate SQL方言设置不正确而导致的. 以下代码展示Hiberna ...

  7. Android逆向——破解水果大战

    最近公司需要测试安卓app安全,但安卓基本上0基础,决定开始学习下安卓逆向根据吾爱破解上教程 <教我兄弟学Android逆向系列课程+附件导航帖> https://www.52pojie. ...

  8. caoz的梦呓:创业公司如何做好信息安全

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/gCWjzHBRfbPFhNeg2VtFhA https://mp.weixin.qq.com/s/bmifCmD2CHV1 ...

  9. Python报错module 'scipy.misc' has no attribute 'xxx'

    Python报错module 'scipy.misc' has no attribute 'imresize' 解决办法: 安装Pillow包,命令如下: pip install Pillow 然后重 ...

  10. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...