vue中使用echarts饼图

vue项目中使用Echarts

1.安装命令：npm install echarts--save

2.安装好之后，要按需引入 

import Vue from 'vue'
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')

 3.根据设计图大小给echarts挂载到一个div标签上

<div ref="datascren" style="width: 400px; height:300px; border: 1px solid #ccc; margin-bottom: 10px; padding: 10px 5px;" />

4.配置图表

            var chartDom = this.$refs.datascren
			var myChart = echarts.init(chartDom)
			var option
            option = {
				title: {
					text: '各提成率礼包数占比',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: function(arg) {
                    return `
					    <div>礼包数：${arg.data.num}</div>
					    <div>礼包数占比：${arg.data.value}%</div>
				       `
                    }
				},
				legend: {
					icon: "circle", // 修改形状
					itemHeight: 6, // 修改icon图形大小
					itemGap: 5, // 修改间距
					textStyle: {
						fontSize: 12,
						color: "#333",
						padding: [0, 0, 0, -12], // 修改文字和图标距离
					},
					left: 'right',
					top: 'middle',
					width: 80
					bottom: '0',
					formatter: function (name) {
					    return name + '%';
					}
				},
				grid: {
					top: '0'
				},
				series: [
					{
						name: '',
						type: 'pie',
						radius: '50%',
						center: ['40%', '50%'],
						data: [], // 后台返回的数据，可参考官网
						label: {
							normal: {
								formatter: function(arg) {
									return `${arg.data.value}%`
								}
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			},
            option && myChart.setOption(option)