echarts的用法

Echarts–商业级数据图表
商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts支持的图表？　
折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

echarts和chart对比
echarts的优点：
1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。
echarts的缺点：
移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。

Echarts–必要文件导入

<script src="js/echarts.js"></script>

跟jquery 一样 导入echarts的包

来吧 展示！！！

<div id="chart1">
			
		</div>
		
		<script>
			
			
			var text = prompt('输入你想要的查看的类别');
			var obj = {};
			obj[text] =true;
			
			
			var mycharts = echarts.init($('#chart1').get(0));
			console.log(mycharts);
			
			mycharts.setOption({
				title:{
					text:'柱状图'
				},
				legend:{
					data:['a','b','c'],
					
					
				
						selected: {
						
					    // 选中'系列1'
					    'a': obj.a,
					    // 不选中'系列2'
					    'b': obj.b,
					     
					    'c': obj.c,
						
					}
									
				},
				xAxis:{
					data:['q','w','e']
				},
				yAxis:{
					
				},
				series:[
						{
							name:'a',
							type:'bar',
							data:[10,50,30],
						},
						{
							name:'b',
							type:'bar',
							data:[30,30,30],
						},
						{
							name:'c',
							type:'bar',
							data:[20,10,50],
						}
					]
				
			});

这个可以选择你想看的 图表数据的一个 柱状图

	<div id="chart1">
			
		</div>
		
		<script>
			
			var arr = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚',
			'卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', 
			'孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水',
			'窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', 
			'苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', 
			'岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', 
			'乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', 
			'平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', 
			'米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项',
			'祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'];
			
//			var shuju = []
//			for(var i = 0;i<140;i++){
//				shuju.push(Math.ceil(Math.random()*30));
//			}
//			
//			
//			var jiegou =[];
//			
//			for(var i = 0;i<140;i++){
//				jiegou[i] = {value:shuju[i],name:arr[i]};
//			}
//			
//			
//			
//			var hebing =[];
//			var hebingshuju =[]
//			for(var i = 0; i < 140 ; i++){
//				if(i%2 == 0){
//					hebing.push(arr[i]+arr[i+1]);
//					hebingshuju.push(arr[i]+arr[i+1]);
//					
//				}
//			}
//			
//			console.log(hebing);
//			console.log(hebingshuju);
			
			function show(){
				var name = [];
				var numdata = [];
				var selected = {};
				var piedata = [];
				for(var i = 0; i<70;i++){
					var mack = arr[0]+arr[1];
					name.push(mack);
					numdata.push(Math.ceil(Math.random()*1000));
					piedata.push({
						name:name[i],
						value:numdata[i]
					});
					selected[mack] = i<6;
					arr.shift();
					arr.shift();
					
				}
				console.log(name);
				console.log(numdata);
				console.log(selected);
				console.log(piedata);
				
				return{
					name :name,
					numdata:numdata,
					selected:selected,
					piedata:piedata,
				}
				
			}
			
			
			var sum = show();
			
			var mycharts = echarts.init($('#chart1').get(0));
			console.log(mycharts);
			
			mycharts.setOption({
				title:{
					text:'饼状图'
				},
				legend:{
					type:'scroll',
					data:sum.name,
					selected:sum.selected,
					left:'right',
					orient:'vertical',
					pageButtonPosition :'start',
					
					
				},
				
				series:{
					name:sum.name,
					type:'pie',
					data:sum.piedata,
				}
			});
			
		</script>

这是百家姓的一个 饼状图！