初遇Echarts之Echarts入门

初次使用Echarts

首先咱们来说说什么是Echarts，用途是什么——ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

在使用ECharts之前要先安装ECharts，
可以通过以下几种方式获取ECharts

1. 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建，
2. 在 ECharts 的 GitHub 获取
3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
4. 通过 jsDelivr 等 CDN 引入
   上述方法都可以

接着就是在html中引入ECharts

这样我们就可以制作我们想要的各种图表了，在这我就放上我制作的一个小图表，供大家参考。

在body中

<div id="main"></div>

在css中

#main {width: 90%;margin: 0 auto;height: 2.46rem;}

在script中

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	
	// 指定图表的配置项和数据
	var option = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			left: 200,
			top:50,
			data: ['环境15次', '塔式起重机32次', '施工升降机54次', '工人上岗率76次']
		},
		// 颜色
		color:["#fcd63d","#83d485","#4fc5e9","#75b1ff"],
		series: [
			{
				name: '访问来源',
				type: 'pie',
				left: -170,
				radius: ['50%', '70%'],
				border:"1px solid #fff",
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '30',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{value: 15, name: '环境15次'},
					{value: 32, name: '塔式起重机32次'},
					{value: 54, name: '施工升降机54次'},
					{value: 76, name: '工人上岗率76次'},
				]
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>

在代码中也为大家做了详细的批注，现在我将最后的效果图奉上。

如果有什么问题欢迎大家随时指出。