echart饼状图

<template>
	<div>
		<div id="leftCenter" style="width:6.75rem;height:4.375rem;"></div>
	</div>
</template>
<script>
	const echarts = require("echarts");
	export default {
		data() {
			return {};
		},
		mounted() {
			this.drawPie();
		},
		methods: {
			drawPie() {
				// 基于准备好的dom，初始化echarts实例
				let myChartLeftCenter = echarts.init(
					document.getElementById("leftCenter")
				);
				let option = {
					backgroundColor: 'rgba(255, 255, 255,0)',
					tooltip: {
						trigger: 'item',
						formatter: "{b} : {d}%",
						confine: true //将此限制打开后tooltip将不再溢出
					},
					legend: {
						orient: 'horizontal',
						left: 'center',
						top: 'auto',
						icon: "circle",
						textStyle: { //图例文字的样式
							color: '#fff',
							fontSize: 10,
						},
						data: ['民营', '国营', '股份制公司', '上市公司', '外企', '其他']
					},
					series: {
						left: 'center', //离容器左侧的距离
						top: 'top', //距离容器上测的距离
						center: ['50%', '50%'],
						radius: '80%',
						type: 'pie',
						label: {
							normal: {
								formatter: "{d}%",
							}
						},
						data: [{
								name: '民营',
								value: 58.26
							},
							{
								name: '国营',
								value: 9.89
							},
							{
								name: '股份制公司',
								value: 16.4
							},
							{
								name: '上市公司',
								value: 11.7
							},
							{
								name: '外企',
								value: 14.01
							},
							{
								name: '其他',
								value: 12.88
							},
						],

						itemStyle: {
							normal: {
								color: function(params) {
									//自定义颜色
									var colorList = [
										'#3082ff', '#00FF00', '#30c775', '#96cf55', '#ffd328', '#ff8200',
									];
									return colorList[params.dataIndex]
								}
							}
						}
					}
				};
				myChartLeftCenter.setOption(option);
				// -----------------------------------------------------------------
				// 响应式变化
				window.addEventListener("resize", () => myChartLeftCenter.resize(), false);
			}
		},
		destroyed() {
			window.onresize = null;
		}
	};
</script>

<style lang="scss" scoped>
</style>