Vue2

1、什么是Vue

  • Vue 是目前最火的一个前端框架，React是最流行的一个前端框架
  • Vue 是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！
  • Vue 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
  • 下载用于传统的html项目使用，若是Vue项目则不需要下载
  • 下载地址：Vue

2、Vue的优点

  • 轻量级，体积小是一个重要指标
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

3、什么是MVVM

MVVM（Model-View-ViewModel）是一种软件架构设计模式，是一种简化用户界面的事件驱动编程方式

MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

mvvm

4、MVVM的优点

  • 双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化。
  • View的功能进一步的强化，具有控制的部分功能，若想无限增强它的功能，甚至控制器的全部功几乎都可以迁移到各个View上（不过这样不可取，那样View干了不属于它职责范围的事情）。View可以像控制器一样具有自己的View-Model.
  • 由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。
  • 可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。

5、MVVM的缺点

  • 数据绑定使得 Bug 很难被调试。
  • 一个大的模块中，model也会很大，虽然使用方便了也很容易保证了数据的一致性，当长期持有，不释放内存，就造成了花费更多的内存。
  • 数据双向绑定不利于代码重用。

6、第一个vue项目

使用html导入vue.js，实现vue项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<!--View-->
<div id="vue">
     {{message}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({ // ViewModel
        el: '#vue', // 绑定id
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>
</html>

7、vue的基本语法

1、v-bind

用于绑定标签内的属性

例：

1
2
3
<span v-bind:id="testId">
   测试
</span>

v-bind可以省略

简写：

1
2
3
<span :id="testId">
  测试
</span>

注意：如果testId在vue实例化中的data内不存在，则会报错

2、条件判断

1、v-if、v-else-if、v-else

条件判断语句应该用的最多，就不需要解释了

例：

1
2
3
<span v-if="judge">测试1</span>
<span v-else="judge==1">elseif测试</span>
<span v-else>else测试</span>

若judge在vue实例化中是布尔类型，则可以直接使用，如果是数据则可以==或===比较

==比较值

===比较类型跟值

2、v-show

使用跟v-if一致，

唯一的区别：

  • v-if如果条件不成立，该条标签不显示，
  • 如果使用v-show的话则会使用样式的display:none远程

3、v-for

调用格式为：v-for=”item in items”

注：items表示数组，item 表示迭代的别名

例：

1
2
3
<ul>
	<li v-for="ary in arr" :id="ary.id">{{ary.name}}</li>
</ul>
1
2
3
4
5
6
7
8
<script>
    let test=new Vue({
        el:"#test",
        data:{
            arr:[{id:1,name:"数组1"},{id:2,name:"数组2"},{id:3,name:"数组3"}]
        }
    })
</script>

4、v-on

用于绑定事件

例：

1
<p v-on:click="test">111</p>

可以使用@符号等代替v-on简化

1
<p  @click="test">111</p>

绑定的方法也需要在vue实例化中写，如果方法没有参数，括号可以省略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    let test=new Vue({
        el:"#test",
        data:{
            name:"znsd",
            id:1,
            url:"www.baidu.com",
            judge:false,
            arr:[{id:1,name:"数组1"},{id:2,name:"数组2"},{id:3,name:"数组3"}],
            key:['id','name']
        },
        methods:{
            test(){
                alert(111)
            }
        }
    })
</script>

8、双向数据绑定

双向数据绑定，也就是视图发生改变时，数据会根据同步发生改变，数据发生改变，视图也会发生该表

注意！！！

使用v-model进行表单双向绑定时候，会跟随

  • input的value值，
  • selecet默认选中值value(selected)
  • input中type=checkbox的checked的选中的value

注意：下面的例子都需要用id为test的包起来

1、单行文本

1
<input type="text" v-model="message" :value="message"/>
1
2
3
4
5
6
7
8
<script>
    let test = new Vue({
        el: "#test",
        data: {
            message: "文本框"
        }
    })
</script>

当input文本框的value发生改变，vue实例对象的对应data也会发生改变

2、单选框

1
2
<input type="radio" name="gender" v-model="gender" value="1"> 男
<input type="radio" name="gender" v-model="gender" value="2"> 女
1
2
3
4
5
6
7
8
<script>
    let test = new Vue({
        el: "#test",
        data: {
            gender: 1
        }
    })
</script>

当值gender为1的时候，默认选中input中value为1的值

当单选框选值发生改变，data中gender也发生该表，例选中女，女的value为2，则gender值为2

3、多选框

这里我偷懒，使用了vue的for循环，暂时不知道怎么显示name值

1
<input type="checkbox" v-for="hobby in hobbys" v-model="hobbysChecked" :value="hobby.id">
1
2
3
4
5
6
7
8
9
<script>
    let test = new Vue({
        el: "#test",
        data: {
            hobbys: [{id: 1, name: "篮球"}, {id: 2, name: "排球"}],
            hobbysChecked: [1]
        }
    })
</script>

因为是多选框，所以莫默认选中值则是一个数组，具体操作跟单选框差不多

4、下拉框

这里继续偷懒

1
2
3
4
<select v-model="hobbySelected">
    <option value="0">请选择爱好</option>
    <option v-for="hobby in hobbys" :value="hobby.id">{{hobby.name}}</option>
</select>
1
2
3
4
5
6
7
8
9
<script>
    let test = new Vue({
        el: "#test",
        data: {
            hobbys: [{id: 1, name: "篮球"}, {id: 2, name: "排球"}],
            hobbySelected: 1
        }
    })
</script>

因为下拉框只有一个选中，所以将双向绑定绑定于select，会随data中的hobbySelected值找对应的value来默认selected选中

9、Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 自动转换 JSON 数据

GitHub源码地址：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

1、为什么要使用 Axios

由于 Vue 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。

2、Axios的生命周期

vue2生命周期

10、vue-cli

ue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板

主要的功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

1、需要的环境

Node.js下载地址Node.js

Git下载地址：Git

确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

Node.js会默认去下载国外的，所以我们为了添加下载速度，需要配置淘宝镜像加速器

1
2
3
4
5
6
7
8
# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题（如安装axios）
npm install axios --registry=https://registry.npm.taobao.org

# 永久更改使用指定镜像（淘宝）
npm config set registry https://registry.npm.taobao.org

虽然安装了cnpm,但是尽量少用!

安装地址在C盘的用户里面的AppData\Roaming\npm

2、安装 vue-cli

1
2
3
npm install vue-cli -g
#或
cnpm install vue-cli -g

测试是否安装成功

1
vue list

查询vue-cli是否安装成功

3、第一个vue-cli程序

选中一个文件夹进入cmd输入命令

1
2
# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

安装中会有一些选中，这里推荐

  • Project name：项目名称，默认 回车 即可
  • Project description：项目描述，默认 回车 即可
  • Author：项目作者，默认 回车 即可
  • Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
  • Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
  • Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
  • Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
  • Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行;运行结果!

初始化并且运行

1
2
3
cd myvue  #这个是你创建的名字
npm install
npm run dev

然后输入http://localhost:8080就可以访问

也可以npm run build 将vue项目打包

打包以后可以直接放入nginx的html文件夹直接访问

4、vue-cli的目录结构

vue-cli目录结构

  • build 和 config：WebPack 配置文件
  • node_modules：用于存放 npm install 安装的依赖文件
  • src： 项目源码目录
  • static：静态资源文件
  • .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
  • .editorconfig：编辑器配置
  • eslintignore：需要忽略的语法检查配置文件
  • .gitignore：git 忽略的配置文件
  • .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html：首页，仅作为模板页，实际开发时不使用
  • package.json：项目的配置文件
    • name：项目名称
    • version：项目版本
    • description：项目描述
    • author：项目作者
    • scripts：封装常用命令
    • dependencies：生产环境依赖
    • devDependencies：开发环境依赖

5、src目录介绍

src 目录是项目的源码目录，所有代码都会写在这里

1、main.js

main.js是入口文件，里面会默认生成以下代码

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

代码分析

  • import Vue from 'vue'：ES6 写法，会被转换成 require(“vue”);
  • import App from './App'：意思同上，但是指定了查找路径，./ 为当前目录
  • Vue.config.productionTip = false：关闭浏览器控制台关于环境的相关提示
  • new Vue({...})：实例化 Vue
    • el: '#app'：查找 index.html 中 id 为 app 的元素
    • template: '<App/>'：模板，会将 index.html 中的App替换
    • omponents: { App }：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件;

2、App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • template：HTML 代码模板，会替换 中的内容
  • import HelloWorld from ‘./components/HelloWorld’：引入 HelloWorld 组件，用于替换 template 中的
  • export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入
    • name: ‘App’：定义组件的名称
    • components: { HelloWorld }：定义子组件

11、安装Webpack

1、安装

安装：

1
2
npm install webpack -g
npm install webpack-cli -g

测试是否安装成功：

1
2
webpack -v
webpack-cli -v

2、webpack.config.js 配置文件

  • entry：入口文件，指定 WebPack 用哪个文件作为项目的入口
  • output：输出，指定 WebPack 把处理完成的文件放置到指定路径
  • module：模块，用于处理各种类型的文件
  • plugins：插件，如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听，用于设置文件改动后直接打包

使用webpack命令即可打包

3、使用webpack

1、创建目录modules，用于放js模块等资源

2、创建一个js文件

1
2
3
exports.testznsd =function(){
    document.write("<h1>测试</h1>")
}

3、在创建一个main.js的入口文件

1
2
let test= require("./test")  //导入js文件
test.testznsd() //调用js的方法

4、在项目目录下创建webpack.config.js 配置文件

1
2
3
4
5
6
module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/app.js"
    }
};

5、使用webpack打包

6、随便创建一个html文件引入打包后的js即可调用

12、Vue-Router

1、介绍

Vue Router 是 Vue 官方的路由管理器。它和 Vue 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

2、下载

需要进入你vue-cli创建的项目先查询package.json查询是否安装，然后在安装

1
npm install vue-router --save-dev

3、使用

1、创建views文件内创建俩个vue文件，一个Main.vue,一个Content.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div>
  <h1>主页面</h1> <!--这个main的，Content为页面内容，也可以自定义-->
</div>
</template>

<script>
export default {
  name: "Main" <!--这个在创建的时候会自动生成-->
}
</script>

<style scoped>
</style>

2、创建router文件夹中创建index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from "vue"; //导入vue
import Router from "vue-router";  //导入vue路由
import Main from "../views/Main";
import Content from "../views/Content";

Vue.use(Router)

export default new Router({
  routes:[{
    name:"main",
    path: "/main",
    component:Main
  },{
    name:"content",
    path: "/content",
    component:Content
  }
  ]
})<!--创建路由器对象-->

3、在main.js中引入路由

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
import router from './router/index' //引入路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, 
  components: { App },
  template: '<App/>'
})

4、在App.vue中添加

1
2
3
<router-link to="/main">主页面</router-link>
<router-link to="/content">内容</router-link>
<router-view /> <!--不加这个则会不显示内容-->

即可直接使用npm run dev

13、ElementUI使用

1、安装ElementUI

1
2
3
npm i element-ui -S
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev

2、导入ElementUI

在 main.js 中写入

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

注意：不要直接cv，一步一步粘贴到指定位置

3、基本使用

直接去官网粘贴代码即可使用

Element

14、富文本编辑器

1、安装富文本编辑器组件

1
npm install vue-quill-editor --save

2、页面对应黏贴就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
      </quill-editor>
    </el-card>
</template>

<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return {
        content: null,
        editorOption: {}
      }
    }
  }

</script>

<style scoped>
</style>

3、实现自定义上传图片接口

1、引入图片上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
    <div>
        <!-- 图片上传组件辅助-->
        <el-upload
                class="avatar-uploader"
                :action="serverUrl"
                name="img"
                :headers="header"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :before-upload="beforeUpload">
        </el-upload>
        <!--富文本编辑器组件-->
       <el-row v-loading="uillUpdateImg">
        <quill-editor
                v-model="detailContent"
                ref="myQuillEditor"
                :options="editorOption"
                @change="onEditorChange($event)"
                @ready="onEditorReady($event)"
        >
        </quill-editor>
       </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
                serverUrl: '',  // 这里写你要上传的图片服务器地址
                header: {token: sessionStorage.token},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
                detailContent: '', // 富文本内容
                editorOption: {}  // 富文本编辑器配置
            }
        },
        methods: {
            // 上传图片前
            beforeUpload(res, file) {},
            // 上传图片成功
            uploadSuccess(res, file) {},
            // 上传图片失败
            uploadError(res, file) {}
        }
    }
</script>

2、修改data数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default {
    data() {
        return {
            serverUrl: '',  // 这里写你要上传的图片服务器地址
            header: {token: sessionStorage.token},  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
            detailContent: '', // 富文本内容
            editorOption: {
                placeholder: '',
                theme: 'snow',  // or 'bubble'
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    document.querySelector('#quill-upload input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                	}
            	}
        	}
		}
	}
}

3、配置工具栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
]
</script>

4、修改editorOption属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
data() {
 	return {
		editorOption: {
          	placeholder: '',
          	theme: 'snow',  // or 'bubble'
          	modules: {
            	toolbar: {
             		container: toolbarOptions,  // 工具栏
              		handlers: {
                		'image': function (value) {
                            if (value) {
                                //输出1则测试成功
                                alert(1)
                            } else {
                                this.quill.format('image', false);
                            }
                		}
              		}
           	 	}
         	 }
        }
    }
	}
}

5、修改editorOption内属性handlers

1
2
3
4
5
6
7
8
9
10
handlers: {
	'image': function (value) {
		if (value) {
		// 触发input框选择图片文件
			document.querySelector('.avatar-uploader input').click()
		} else {
			this.quill.format('image', false);
		}
	}
}

6、修改上传图片的回调方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 富文本图片上传前
beforeUpload() {
    // 显示loading动画
    this.quillUpdateImg = true
},
uploadSuccess(res, file) {
	// res为图片服务器返回的数据
    // 获取富文本组件实例
    let quill = this.$refs.myQuillEditor.quill
    // 如果上传成功
    if (res.code === '200' && res.info !== null) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.info)
        // 调整光标到最后
        quill.setSelection(length + 1)
    } else {
        this.$message.error('图片插入失败')
    }
    // loading动画消失
    this.quillUpdateImg = false
},
// 富文本图片上传失败
uploadError() {
	// loading动画消失
	this.quillUpdateImg = false
	this.$message.error('图片插入失败')
}

15、绘画饼图

1、安装插件

1
npm install echarts --save

2、main.js里面引入echarts

1
2
3
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、插入代码

对应粘贴代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
  <div>
    <div id="chartPie" class="pie-wrap"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); //引入主题,可以不引入，有默认的
export default {
  data() {
    return {};
  },
  mounted() {
     //如果你需要多个，调用下面方法即可
     this.drawPieChart();
  },
  methods: {
    //需要多个，多复制几次这个方法，修改一下即可
    drawPieChart() {
      this.chartPie = echarts.init(
        document.getElementById("chartPie"),
        "macarons"
      );
      this.chartPie.setOption({
        //显示在上面的文字
        tooltip: {
          trigger: "item",
          // formatter: "{a}<br/>{b}: <br/>{c}({d}%)",  其中 {a}指向name名称（访问来源）
          formatter: "{b}: <br/>{c}({d}%)",
        },
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          right: 500,
          orient: "vertical",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            //圆圈的粗细
            radius: ["50%", "80%"],
            //圆圈的位置
            center: ["50%", "50%"],
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 310,
                name: "邮件营销",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 135,
                name: "视频广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
            //动画持续时间:单位毫秒
            animationDuration: 2000,
            //控制是否显示指向文字的,默认为true
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
  height: 126px;
}
</style>