echarts.js简单使用(3)

标签: echarts.js

1.首先进入官方实例:http://echarts.baidu.com/examples/index.html#chart-type-pie

2.查看自己需要的样例 =》 点击进入 =》点击下载 =》打开下载的html文件,删除不用的部分,修改样式,嵌入数据即可

3.html

<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
		<meta charset="utf-8">
	</head>

	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			app.title = '环形图';

			option = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false,
							position: 'center'
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '30',
								fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [
						{ value: 335, name: '直接访问' },
						{ value: 310, name: '邮件营销' },
						{ value: 234, name: '联盟广告' },
						{ value: 135, name: '视频广告' },
						{ value: 1548, name: '搜索引擎' }
					]
				}]
			};;
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
</html>

2.效果(蛮好的)

3.几点说明

(1)插件中涉及的参数比较多,各个参数具体含义,

        ①请参考官网:http://echarts.baidu.com/option.html#title

        ②也可重点了解某些参数,以解燃眉之急,后来再慢研究:https://mp.csdn.net/postedit/81357421

(2)总体来讲,这个插件还是很强大的,能满足绝大多数需求,有很强大的研发团队,很活跃的社区,很详细的api文档,普通企业使用完全足够了。

版权声明:本文为hangGe0111原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hangGe0111/article/details/81357878