Vue使用echarts

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

安装echarts依赖

npm install echarts -S

创建图表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
<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 必须把路径写全。

页面展示:

参考自:https://blog.csdn.net/mr_wuch/article/details/70225364

Vue使用echarts的更多相关文章

  1. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

  2. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  3. vue使用echarts可视化图形插件

    1.安装echarts:  cnpm/npm i echarts -S 2.main.js中   import echarts from 'echart'    Vue.prototype.$echa ...

  4. vue 使用Echarts 环形图 自定义legend formatter 富文本标签

    main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts   < ...

  5. webpack打包不引入vue、echarts等公共库

    如果我们打包的时候不想将vue.echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准: 1webpack配置: // webpack.base.conf.js ...

  6. 基于vue和echarts的数据可视化实现

    基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git

  7. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  8. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  9. vue 引入 echarts 图表 并且展示柱状图

    npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...

随机推荐

  1. php开发中一些前端知识杂总

    推荐几个jqyuey插件的好地方 http://jqueryui.com/ http://www.jq22.com/ 背景: 服务端采用ci3.0框架,twig作为模板嵌套. twig模板手册: ht ...

  2. 今天在win7下安装Fedora22

    <h4>技嘉主板970如何设置BIOS从U盘启动安装系统</h4>1.电脑开机按“Del”键进入主板设置项,选择“BIOS”设置 <a href="http:/ ...

  3. C# Post发送数据返回页面结果

    public string GetPage(string posturl, string postData) { Stream outstream = null; Stream instream = ...

  4. Intro to DBSCAN

    DBSCAN Density-Based Spatial Clustering of Application with Noise It can discover cluster of arbitra ...

  5. ssm+PageHelper实现分页查询

    通过搭建ssm框架,然后通过mybatis的分页插件pagehelp进行分页查询.源码:https://gitee.com/smfx1314/pagehelper 看一下项目结构: 首先创建一个mav ...

  6. test20190320

    全连 \(n\leq 10^6\) ,保证答案在 \(long\ long​\) 范围内. 比较浅显的 \(dp\ ?\) 记 \(f[i]\) 表示考虑前 \(i\) 个音符,其中第 \(i\) 个 ...

  7. hessian协议原理

    Hessian 原理分析 一.      远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机,基于传输协议和网络 IO 来实现,其中传输协议比较出名的有 http . t ...

  8. 1、Docker学习笔记

    Docker是一个基于LXC 的高级容器引擎,源代码托管在 GitHub 上, 基于Go语言开发并遵从Apache 2.0协议开源.它是一个开发的平台,用来为开发者和系统管理员构建.发布和运行分布式应 ...

  9. bzoj 3867: Nice boat

    题意:给定一个正整数序列,操作是1.区间赋值,2.区间大于x的数与x取gcd,最后输出操作后的序列 用平衡树维护相同数组成的连续段,每次操作至多增加两个连续段,操作2记录一下区间最小值然后暴力修改,每 ...

  10. python查找字符串 函数find() 用法

    sStr1 = 'abcdefg' sStr2 = 'cde' print sStr1.find(sStr2) 输出 2意思是在sStr1字符里的第2位置找到了包含cde字符的字段