在vue-cli项目中使用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 必须把路径写全。
页面展示
如果需要引入像字符云之类的官方包里没有的图表,可以在github上找到,如何使用具体请参考我前一阵子的文章http://www.cnblogs.com/Smiled/p/7146550.html
字符云示例:
cnpm install echarts -S
在需要使用的页面引入
require('echarts-wordcloud');
页面展示:
在vue-cli项目中使用echarts的更多相关文章
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
- 在vue项目中封装echarts的正确姿势
为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...
随机推荐
- c#发送get请求
c#发送get请求爬取网页 关键点:在控制台中发送一个get请求,将响应的内容写入文件流中保存html格式 static void Main(string[] args) { string url = ...
- BZOJ 4819 新生舞会
第一句话:算出3.363636的孩子啊,你跑错流种了. 貌似上一篇我讲SDOI出原题?嘿还真是! 半个月前有一个叫WG的男人给我们搞过一场考试... ... 里面有一道题叫做保密... ...SDOI ...
- CSS3 文字与字体相关样式
给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...
- 手撕vue-cli配置文件——config篇
最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西.正所谓"工欲善其事必先利其器" ...
- django xdmin使用
我们来看看我们原先django给我们自带的admin后台是什么样子的呢 有人说,你的界面怎么那么丑,我说这个还叫丑吗,他说丑,我说你来,我看看你的,上图 看到登录界面后,我说别看了,我去修改,修改,我 ...
- Linux_服务器_07_ 将用户设置为管理员
二.参考资料 1.CentOS普通用户获得管理员权限 2.linux下添加用户并赋予root权限
- Java订单功能模块设计与实现
在商城项目中,之前我们介绍了购物车功能模块的实现,商品加入到购物车之后,就是到购物车结算,然后显示购物车的商品列表,点击去结算,然后到了未提交前的订单列表, 点击提交订单后,生成此订单,返回订单的订单 ...
- C# DataGridVie利用model特性动态加载列
今天闲来无事看到ORm的特性映射sql语句.我就想到datagridview也可以用这个来动态添加列.这样就不用每次都去界面上点开界面填列了. 代码简漏希望有人看到了能指点一二. 先定义好Datagr ...
- robotframework的学习笔记(十六)----robotframework标准库String
官方文档:http://robotframework.org/robotframework/latest/libraries/String.html Introduction A test libra ...
- redis 写入的时候报错
redis 写入报错 1)报错内容 Exception in thread "main" redis.clients.jedis.exceptions.JedisDataExcep ...