Vue使用echarts
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的更多相关文章
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- vue中echarts引入中国地图
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...
- vue使用echarts可视化图形插件
1.安装echarts: cnpm/npm i echarts -S 2.main.js中 import echarts from 'echart' Vue.prototype.$echa ...
- vue 使用Echarts 环形图 自定义legend formatter 富文本标签
main.js 引入echarts // 引入echarts import Echarts from 'echarts' Vue.prototype.$echarts = Echarts < ...
- webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将vue.echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准: 1webpack配置: // webpack.base.conf.js ...
- 基于vue和echarts的数据可视化实现
基于vue和echarts的数据可视化: https://github.com/MengFangui/awesome-vue.git
- 16、vue引入echarts,划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- vue使用Echarts图表
vue使用Echarts图表 童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
- vue 引入 echarts 图表 并且展示柱状图
npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...
随机推荐
- python数据取整
第三方包:numpy 安装 $ sudo dnf install numpy 4舍6入5取偶 def getInteger(): a = np.float(5.5) # 4舍6入 5取偶 int_a ...
- iOS开发心得
一步一步来,慢慢走. 正如昨天黄大哥所说:全身心地投入,遇到喜欢的工作更好,遇到不喜欢的工作那就把它当作一种能力的培养.坚持坚持!!!
- python 生成器推导式与列表推导式的区别
生成器表达式现用现生成,列表推导式一次性生成静态数据 L = [2, 3, 5, 7] L2 = (x**2+1 for x in L) it = iter(L2) print(next(it)) L ...
- 【测试工具】tcpdump + wireshark 抓包实践
Tcpdump + Wireshark 抓包实践 工具介绍 Tcpdump 看到dump大家应该有所意识吧,就是下载数据,抓数据.tcpdump是linux下的一个抓取tcp包的命令 Usage: t ...
- 添加dom节点及优化
创建并添加dom加点如何进行优化? 1.使用文档片(DocumentFragment) 可以理解为"仓库",用来保存将来可能会添加到DOM中的节点: var fragment = ...
- [译]HIPAA要求的SSL/TLS等级
原文链接:https://luxsci.com/blog/level-ssl-tls-required-hipaa.html 原文发表时间:2015.1.13 本博文仅仅是上述原文的翻译,仅供研究参考 ...
- CF1130E Wrong Answer
E Wrong Answer 注意到 \(n\geq 2\) 时才可能有解,可以按如下方式构造一个 \(a_{1,2\dots n}\): 令 \(a_1=-1\) ,而后面的数都为正.记 \(s=\ ...
- BZOJ2820 YY的GCD 【莫比乌斯反演】
BZOJ2820 YY的GCD Description 神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, ...
- Windows 10 四月更新,文件夹名称也能区分大小写?
Windows 向来是不区分文件和文件夹大小写的,但是从 NTFS 开始却又支持区分文件夹大小写.而 Linux/Mac OS 一向都是区分文件和文件夹大小写的. 本文将推荐 Windows 10 四 ...
- 语义耦合(Semantic Coupling)
跟小伙伴一起重构一段 UI,试图将用户界面和业务代码分离的时候,小伙伴试图在业务代码中直接调用 UI.我们当然都知道这会产生耦合,于是小伙伴试图定义一些属性.变量或接口来解决这个耦合.虽然在代码的静态 ...