Vue项目中引入Echarts
2019-03-28 08:47
260 查看
Vue项目中引入Echarts
2018年06月22日 16:44:28 酷酷小七 阅读数:2339
在Vue项目中使用Echats,可以极大程度的方便完成很多Canvas功能。
1. 安装Echats
[code]npm install echarts --save
2.项目main.js中引入Echarts
-
// 引入Echarts
-
import Echarts from 'echarts'
-
Vue.prototype.echarts = Echarts
-
Vue.use(Echarts)
3.项目中使用,挂载到一个div标签上
html
[code]<div id="echarts" :style="{width: '300px', height: '300px'}"></div>
js
[code]mounted() { var dom = document.getElementById('echarts') var myChart = this.echarts.init(dom) // 绘制图表 myChart.setOption({ series: [{ name: '访问来源', type: 'pie', radius: '55%', data: [{ value: 235, name: '视频广告' }, { value: 274, name: '联盟广告' }, { value: 310, name: '邮件营销' }, { value: 335, name: '直接访问' }, { value: 400, name: '搜索引擎' } ] }] }); },
显示效果
相关文章推荐
- 百度Echarts图表在Vue项目的完整引入以及按需加载
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
- vue-cli创建的项目中引入第三方库报错 'caller', 'calle', and 'arguments' properties may not be...
- 用vue构建项目笔记2(引入自定义头部组件)
- 在Vue项目中引入腾讯验证码服务的教程
- vue项目中使用了vw适配方案,引入第三方ui框架mint-ui时,适配问题解决
- 在vue项目中引入highcharts图表的方法
- vue-cli快速构建项目以及引入bootstrap、jq
- vue-cli 引入mui时,生成项目mui的字体无法显示
- vue-cli项目引入boostrap
- 在vue项目npm run build后,index.html中引入css和js 报MIME type问题
- 在Vue-cli项目中使用echarts
- 从新建vue项目到引入组件Element流程
- 构建vue全家桶项目-引入vue-resource
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 【vue】如何在 Vue-cli 创建的项目中引入iView
- vue项目中引入jquery
- Vue系列——在vue项目中使用echarts
- 在vue-cli项目中引入jQuery和bootstrap