echarts：2、饼图

最新推荐文章于 2024-07-01 14:24:50 发布

sunly_

最新推荐文章于 2024-07-01 14:24:50 发布

阅读量351

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_40745143/article/details/125078217

版权

echarts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

饼图

<template>
	<div class="index">
		<div ref="main" class="main"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				option: {}
			}
		},
		mounted() {
			this.option = {
				title: {
					text: '我是标题',
					subtext: '标题下的简介',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [{
					name: '当月销量',
					type: 'pie',
					radius: '50%',
					data: [{
							value: 1048,
							name: '服装'
						},
						{
							value: 735,
							name: '家居'
						},
						{
							value: 580,
							name: '奶粉'
						},
						{
							value: 484,
							name: '水果'
						},
						{
							value: 300,
							name: '家电'
						}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			var myChart = echarts.init(this.$refs.main);
			this.option && myChart.setOption(this.option);
			window.addEventListener('resize', myChart.resize);
		},
		methods: {
		}
	}
</script>

<style scoped lang="less">
	.index {
		.main {
			height: 600px;
			border: 1px solid red;
		}
	}
</style>