1、饼图展示

最新推荐文章于 2023-11-17 15:31:15 发布

起风_了_

最新推荐文章于 2023-11-17 15:31:15 发布

阅读量334

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_38141417/article/details/78646874

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.问题标题

界面的饼图展示

2.问题描述

使用一个饼图详细的展示各项数据。
3.分析过程

使用现有的返回的json数据进行处理（在ie8的情况下，对于引入包有所不同）
4.详细代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>饼图展示</title>
		<style type="text/css">
			#bing {
				border: 1px solid red;
				height: 400px;
				width: 400px;
			}
		</style>
	</head>

	<body>
		<div id="bing">

		</div>
	</body>
	<script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts/echarts-all.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts/esl.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('bing'));
		myChart.showLoading({
			text: '正在努力的读取数据中...', //loading加载展示
		});

		// ajax getting data...............

		// ajax callback
		myChart.hideLoading();

		// 图表使用-------------------
		var option = {
			backgroundColor: '#2c343c',

			title: {
				text: 'Customized Pie',
				left: 'center',
				top: 20,
				textStyle: {
					color: '#ccc'
				}
			},

			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},

			visualMap: {
				show: false,
				min: 80,
				max: 600,
				inRange: {
					colorLightness: [0, 1]
				}
			},
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				center: ['50%', '50%'],
				data: [{
						value: 335,
						name: '直接访问'
					},
					{
						value: 310,
						name: '邮件营销'
					},
					{
						value: 274,
						name: '联盟广告'
					},
					{
						value: 235,
						name: '视频广告'
					},
					{
						value: 400,
						name: '搜索引擎'
					}
				].sort(function(a, b) {
					return a.value - b.value;
				}),
				roseType: 'radius',
				label: {
					normal: {
						textStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					}
				},
				labelLine: {
					normal: {
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						},
						smooth: 0.2,
						length: 10,
						length2: 20
					}
				},
				itemStyle: {
					normal: {
						color: '#c23531',
						shadowBlur: 200,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},

				animationType: 'scale',
				animationEasing: 'elasticOut',
				animationDelay: function(idx) {
					return Math.random() * 200;
				}
			}]
		};
		myChart.setOption(option);
	</script>

</html>