在Vue项目中如何使用其他插件(eCharts & wangeditor)
2017-12-25 11:09
1026 查看
使用 echartys
1.使用其他插件 ,直接npm安装即可:npm install echarts -S //安装echarts依赖
2.创建图表,在 main.js 全局引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
3.在需要使用 echarts 图表的地方 ,插入 html标签以及 js
<template> <div id="myChart" :style="{width: '1500px', height: '600px'}"></div> </template>
<script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({ title: { text: '冬季销量统计' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子",'毛衣','秋裤','外套','短袖','手套','帽子','卫衣','棒球服'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20,15,22,33,8,6,21,22,39] }] }); } } } </script>
使用wangeditor
1.使用 npm下载 :npm install wangeditor --save //(注意 wangeditor 全部是小写字母)
2.在需要的地方引入:
<template> <div> <div id="editorElem" style="text-align:left"></div> </div> </template>
<script> import E from 'wangeditor' export default { name: 'editor', data () { return { editorContent: '' } }, mounted() { var editor = new E('#editorElem') editor.customConfig.onchange = (html) => { this.editorContent = html } editor.create() } } </script>
相关文章推荐
- 详解如何在vue项目中使用lodop打印插件
- 如何使用 Red5 插件创建 Red5 项目?
- Xcode7  如何使用代码对齐插件XAlign
- 多模块Maven项目如何使用javadoc插件生成文档
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
- Android—如何使用Eclipse svn插件管理Android项目
- [Unity3D]手机3D游戏开发:如何实现最高分的存储与显示(九)----使用PreviewLabs插件提速与完整的项目源码
- 如何制作Vuejs组件,并且在项目中使用
- vue组件如何被其他项目引用
- Android—如何使用Eclipse svn插件管理Android项目
- Vue系列——在vue项目中使用echarts
- ABAP--如何在'REUSE_ALV_GRID_DISPLAY'使用自定义F4帮助,返回多个字段以及计算修改其他字段
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- 如何使用vue-cli生成项目
- 如何使用 Red5 插件创建 Red5 项目?
- Gradle 使用Jetty插件启动web项目时出现"java.lang.OutOfMemoryError: PermGen space"解决方法
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
- 项目开发经验----如何同时应对多个项目 & embedded tomcat 使用
- 使用maven插件对普通的java项目如何打jar包
- 多模块Maven项目如何使用javadoc插件生成文档