前面做项目时用到ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。

首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

官网地址：http://echarts.baidu.com/

1.首先在官网 选择合适的下载版本

       http://echarts.baidu.com/download.html

2.引入Echarts

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

3.绘制一个简单的图表

      准备一个DOM容器 

 <div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>

4.创建一个简单的雷达图

<script type="text/javascript">
window.onload = function (){
		//指定图表的配置项和数据
		option = {
				//标题	
			    title: {
			        text: '基础雷达图'
			    },
			    tooltip: {},
			    legend: {
			        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
			    },
			    radar: {
			        // shape: 'circle',
			        name: {
			            textStyle: {
			                color: '#fff',
			                backgroundColor: '#999',
			                borderRadius: 3,
			                padding: [3, 5]
			           }
			        },
			        indicator: [
			           { name: '销售（sales）', max: 6500},
			           { name: '管理（Administration）', max: 16000},
			           { name: '信息技术（Information Techology）', max: 30000},
			           { name: '客服（Customer Support）', max: 38000},
			           { name: '研发（Development）', max: 52000},
			           { name: '市场（Marketing）', max: 25000}
			        ]
			    },
			    series: [{
			        name: '预算 vs 开销（Budget vs spending）',
			        type: 'radar',
			        // areaStyle: {normal: {}},
			        data : [
			            {
			                value : [4300, 10000, 28000, 35000, 50000, 19000],
			                name : '预算分配（Allocated Budget）'
			            },
			             {
			                value : [5000, 14000, 28000, 31000, 42000, 21000],
			                name : '实际开销（Actual Spending）'
			            }
			        ]
			    }]
			};
			//获取dom容器
			var myChart = echarts.init(document.getElementById('chartmain'));
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
}
</script>

这样一个简单的雷达图就ok了，下面看下效果图

          

 5.动态的柱状图

   （1）还是创建一个装ECharts的DOM容器

   （2）后台返回数据

     (3）前台JavaScript代码

          

<script type="text/javascript">


  window.onload = function (){
	//财务看年度的合同金额echart数据源
	$.ajax({
		url:'',
		type:'post',
		datatype:'json',
		success : function(data){
			var partner = new Array();//公司名
			for(var i=0;i<data.length;i++){
				partner.push(data[i].partner);
			} 
			var odata=[];
			for(var i=0;i<data.length;i++){
				var obj={};
				obj.name=partner[i];
				obj.type='bar';
				obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour];
				obj.barWidth=30;//宽度
				odata.push(obj);
			}
			option = {
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:partner
			    },
			    toolbox: {
			        show : true,
			    },
			    calculable : true,
			    xAxis : [{
			            type : 'category',
			            data :[qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4']
			        }],
			    yAxis : [{
			            type : 'value'
			        }],
			     
			    series : odata //前台组装数据
			};
                      //获取要赋值的DOM控件
			  var myChart = echarts.init(document.getElementById('chartmain'));
                      //赋值
			  myChart.setOption(option);
		} 
	});
</script>

这样一个前后台交互的柱状图就ok了，效果图如下。

   

以上就是本文的全部内容，希望对大家的学习有所帮助，欢迎评论交流。能get到知识点不要忘了关注点个赞~ 拒绝白嫖从我们做起hh~ 

[如何设置Echarts图例位置]
Echarts可以帮助我们快速构建柱状图、饼图、条形图，这对于多图形化展示数据来说尤其方便，可帮助我们快速开发。

不过我们在使用Echarts过程中经常会遇到如下问题：图例经常不知道如何调节到我们想要的位置。



遇到此情况该如何调节呢？
只需要legend属性中修改如下几个示数即可：
 legend: {
        orient: 'vertical',
        x:'right',      //可设定图例在左、右、居中
        y:'center',     //可设定图例在上、下、居中
        padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        data: ['直接访问','微信','百度','其他文章','网页']
    },

①x : 可以设定图例在----左（left）、右（right）、居中（center）、填写数字（如:100px）

②y : 可以设定图例在----上（top）、下（bottom）、居中（center）、填写数字（如:100px）

③另外，可使用padding:

padding:[0,50,0,0]  [（距离上方距离），（距离右方距离）、（距离下方距离）、（距离左方距离）]

当前(2020年6月)直接只设置left、right、top、bottom具体像素值或百分比即可：left、right、top、bottom
legend: {
        orient: 'vertical',
        right: 10,   //当前直接只设置此具体像素值、百分比即可了
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },

如此设置完就可以得到自己想要的位置啦。
参考：Echarts官网配置项介绍：https://echarts.apache.org/zh/option.html#legend

Echarts 柱形图
echarts百度针对数据报表等展现的一个产品，具体了解看官方网站：Echarts官网，在这个官网中有详细教程以及API，很容易入手Echarts，从个人刚学习Echarts图表来看，它的难度在于它有自己的一套属性，这和我们平时用的css是不同的，因而我们需要什么效果就得去遵守它的属性，去识别图表的各个部分的专业名称，才能从它API中获取相应属性去实现你想要效果
下面从实现一个柱形图来体验下Echarts这个工具：
效果图：

对柱形图各部分分析:（重点）

实现：
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性，然后实现你需要的效果

代码：
<!DOCTYPE html>
<html>
<head>
	<title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>

<body style="background-color:#333;"><!--  -->
	<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
	</div>
</body>
<script type="text/javascript">
	 // 基于准备好的dom，初始化echarts实例
	 var myChart = echarts.init(document.getElementById('_top'));

	 // 指定图表的配置项和数据
        var option = {
        	//--------------    标题 title  ----------------   
            title: {					         	
                text: '主标题',                
                textStyle:{					//---主标题内容样式	
                	color:'#fff'
                },

                subtext:'副标题',			//---副标题内容样式
                subtextStyle:{
                	color:'#bbb'            	
                },

                padding:[0,0,100,100]				//---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
               
            },

           	//----------------   图例 legend  -----------------
            legend: {
            	type:'plain',				//----图例类型，默认为'plain'，当图例很多时可使用'scroll'
            	top:'1%',					//----图例相对容器位置,top\bottom\left\right           	
            	selected:{
            		'销量':true,			//----图例选择,图形加载出来会显示选择的图例，默认为true
            	},
            	textStyle:{					//----图例内容样式
            		color:'#fff',				//---所有图例的字体颜色
            		//backgroundColor:'black',	//---所有图例的字体背景色
            	},           	
            	tooltip:{					//图例提示框，默认不显示
            		show:true,
            		color:'red',
            	},
                data:[						//----图例内容
                	{
                		name:'销量',
                		icon:'circle',			//----图例的外框样式
                		textStyle:{
                			color:'#fff',		//----单独设置某一个图例的颜色
                			//backgroundColor:'black',//---单独设置某一个图例的字体背景色
                		}
                	}
                ],						
            },

            //--------------   提示框 -----------------
            tooltip: {
            	show:true,					//---是否显示提示框,默认为true
            	trigger:'item',				//---数据项图形触发
            	axisPointer:{				//---指示样式
            		type:'shadow',		
            		axis:'auto',	

            	},
            	padding:5,
            	textStyle:{					//---提示框内容样式
            		color:"#fff",			
            	},
            },

            //-------------  grid区域  ----------------
            grid:{
            	show:false,					//---是否显示直角坐标系网格
            	top:80,						//---相对位置，top\bottom\left\right  
            	containLabel:false,			//---grid 区域是否包含坐标轴的刻度标签
            	tooltip:{					//---鼠标焦点放在图形上，产生的提示框
            		show:true,	
            		trigger:'item',			//---触发类型
            		textStyle:{
            			color:'#666',
            		},
            	}
            },

            //-------------   x轴   -------------------
            xAxis: {
            	show:true,					//---是否显示
            	position:'bottom',			//---x轴位置
            	offset:0,					//---x轴相对于默认位置的偏移
            	type:'category',			//---轴类型，默认'category'
            	name:'月份',				//---轴名称
            	nameLocation:'end',			//---轴名称相对位置
            	nameTextStyle:{				//---坐标轴名称样式
            		color:"#fff",
            		padding:[5,0,0,-5],	//---坐标轴名称相对位置
            	},
            	nameGap:15,					//---坐标轴名称与轴线之间的距离
            	//nameRotate:270,			//---坐标轴名字旋转
            	
            	axisLine:{					//---坐标轴 轴线
            		show:true,					//---是否显示
            		
            		//------------------- 箭头 -------------------------
            		symbol:['none', 'arrow'],	//---是否显示轴线箭头
            		symbolSize:[8, 8] ,			//---箭头大小
            		symbolOffset:[0,7],			//---箭头位置
            		
            		//------------------- 线 -------------------------
            		lineStyle:{
            			color:'#fff',
            			width:1,
            			type:'solid',
            		},
            	},
            	axisTick:{					//---坐标轴 刻度
            		show:true,					//---是否显示
            		inside:true,				//---是否朝内
            		lengt:3,					//---长度
            		lineStyle:{
            			//color:'red',			//---默认取轴线的颜色
            			width:1,
            			type:'solid',
            		},
            	},
            	axisLabel:{					//---坐标轴 标签
            		show:true,					//---是否显示
            		inside:false,				//---是否朝内
            		rotate:0,					//---旋转角度	
            		margin: 5,					//---刻度标签与轴线之间的距离
            		//color:'red',				//---默认取轴线的颜色
            	},
            	splitLine:{					//---grid 区域中的分隔线
            		show:false,					//---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
            		lineStyle:{
            			//color:'red',
            			//width:1,
            			//type:'solid',
            		},
            	},
            	splitArea:{					//--网格区域
            		show:false,					//---是否显示，默认false
            	},           	
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容
            },

            //----------------------  y轴  ------------------------
            yAxis: {
            	show:true,					//---是否显示
            	position:'left',			//---y轴位置
            	offset:0,					//---y轴相对于默认位置的偏移
            	type:'value',			//---轴类型，默认'category'
            	name:'销量',				//---轴名称
            	nameLocation:'end',			//---轴名称相对位置value
            	nameTextStyle:{				//---坐标轴名称样式
            		color:"#fff",
            		padding:[5,0,0,5],	//---坐标轴名称相对位置
            	},
            	nameGap:15,					//---坐标轴名称与轴线之间的距离
            	//nameRotate:270,			//---坐标轴名字旋转
            	
            	axisLine:{					//---坐标轴 轴线
            		show:true,					//---是否显示
            		
            		//------------------- 箭头 -------------------------
            		symbol:['none', 'arrow'],	//---是否显示轴线箭头
            		symbolSize:[8, 8] ,			//---箭头大小
            		symbolOffset:[0,7],			//---箭头位置
            		
            		//------------------- 线 -------------------------
            		lineStyle:{
            			color:'#fff',
            			width:1,
            			type:'solid',
            		},
            	},
            	axisTick:{					//---坐标轴 刻度
            		show:true,					//---是否显示
            		inside:true,				//---是否朝内
            		lengt:3,					//---长度
            		lineStyle:{
            			//color:'red',			//---默认取轴线的颜色
            			width:1,
            			type:'solid',
            		},
            	},
            	axisLabel:{					//---坐标轴 标签
            		show:true,					//---是否显示
            		inside:false,				//---是否朝内
            		rotate:0,					//---旋转角度	
            		margin: 8,					//---刻度标签与轴线之间的距离
            		//color:'red',				//---默认取轴线的颜色
            	},
            	splitLine:{					//---grid 区域中的分隔线
            		show:true,					//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            		lineStyle:{
            			color:'#666',
            			width:1,
            			type:'dashed',			//---类型
            		},
            	},
            	splitArea:{					//--网格区域
            		show:false,					//---是否显示，默认false
            	}                        
            },

            //------------ 内容数据  -----------------
            series: [
	            {
	                name: '销量',				//---系列名称
	                type: 'bar',				//---类型
	                legendHoverLink:true,		//---是否启用图例 hover 时的联动高亮
	                label:{						//---图形上的文本标签
	                	show:false,
	                	position:'insideTop',	//---相对位置
	                	rotate:0,				//---旋转角度
	                	color:'#eee',
	                },
	                itemStyle:{					//---图形形状
	                	color:'blue',
	                	barBorderRadius:[18,18,0,0],
	                },
	                barWidth:'20',				//---柱形宽度
	                barCategoryGap:'20%',		//---柱形间距
	                data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
	            }
            ]
        };

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

 欢迎
关注 
		

			
		

			CSDN
		
		

			Github
		
	

			博客园   
		
		

			个人网站   
		
	
此博客内容是本人在平时工作、学习中，写下这些小总结，其中内容多为初次接触，不能保证完全正确、最优，如有疑问或不足之处，望评论指出。谢谢！
	

前言
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码，共计30个页面，可以在此基础上重新开发。

实现方式：html + Echarts
贴图








源码
好了好了，现在开源代码；
求源码的各位，码字不易，千万不要吝啬你们的Star和点赞评论哦~
github项目地址：基于 Echarts 实现可视化数据大屏展示
没有github的可去我的资源下载压缩包：echars模板.7z
另附近期整理的地图解析的博客：使用echarts完成中国省市区县镇地图展示；
如果本文对你有帮助的话，请不要忘记给我点赞留言打call哦（混个积分）~o(￣▽￣)ｄo

有其他问题留言 over~