pco/sp-admin/sa-view-sp/console/com-chart-2.vue

<!-- 统计图2 -->
<template>
	<div class="echarts-div" id='pic-chart' ref='pic-chart'></div>
</template>

<script>
	module.exports = {
		data() {
			return {
			}
		},
		methods: {
			// 刷新饼图
			f5PieChart: function() {
				// ===========================================  定义数据
				var dataArray = [
					{name: '昵称注册', value: sa.randomNum(100, 1000)},
					{name: '手机号注册', value: sa.randomNum(100, 1000)},
					{name: '微信登陆', value: sa.randomNum(100, 1000)},
					{name: 'QQ登陆', value: sa.randomNum(100, 1000)},
					{name: '邮箱登录', value: sa.randomNum(100, 1000)},
					{name: '小程序登录', value: sa.randomNum(100, 1000)},
					{name: '管理员添加', value: sa.randomNum(100, 1000)},
				]; // 坐标X轴数据
			
				// ===========================================  开始渲染
			
				var myChart = echarts.init(document.getElementById('pic-chart'));
				option = {
					title: {
						text: '账号来源',
						left: 'left',
						top: 0,
						textStyle: {
							color: '#666',
							fontSize: '14'
						}
					},
					toolbox: {
						show: true,
						top: 0,
						feature: {
							saveAsImage: {
								show: true
							}
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					series: [{
						name: '账号来源',
						type: 'pie',
						radius: '70%', // 半径大小
						center: ['50%', '60%'],
						selectedMode: 'single',
						roseType: 'radius',
						data: dataArray.sort(function(a, b) {
							return a.value - b.value;
						}),
						//roseType: 'radius', // 半径模式还是面积模式
						itemStyle: {
							normal: {
								color: function(params) {
									// build a color map as your need.
									var colorList = [
										'#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
										'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
										'#1e90ff','#ff6347','#7b68ee','#00fa9a',
										'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'
									];
									// '#ffd700',
									function GetRandomNum(Min, Max) {
										var Range = Max - Min;
										var Rand = Math.random();
										return (Min + Math.round(Rand * Range));
									}
									var index = GetRandomNum(0, colorList.length - 1);
									return colorList[index];
									//return colorList[params.dataIndex]
								}
							}
						},
						label: {
							normal: {
								formatter: '{b|{b}：}{c}  {per|{d}%}  ',
								rich: {}
							}
						},
						// 弹出动画 
						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function (idx) {
							return Math.random() * 200;
						}
					}]
				};
				myChart.setOption(option);
				window.myChartList.push(myChart);
			},
		},
		created() {
			// 刷新所有图标数据
			this.$nextTick(function() {
				this.f5PieChart();
			});
		}
	}
</script>

<style scoped>
	
</style>