echarts入门教程（超级详细带案例）

Posted 争儿不脱发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts入门教程（超级详细带案例）相关的知识，希望对你有一定的参考价值。

一.echarts的介绍

1.echarts是一款基于javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。
3.echarts的下载
（1）从 npm 获取
npm install echarts --save
（2）从 CDN 获取
（3）从 GitHub 获取

二.echarts语法

一.echarts常见术语

英文汉语
title标题
legend图例
tooltip提示
xAxisx轴线
yAxisy轴线
series系列
data数据

二.图表常见类型

  1. bar 柱状图
  2. line折线图
    (1)曲线图
    加上smooth:true;就会变成曲线图
    (2)面积图
    加上    areaStyle:fill:“#f70”     会变成面积图
  3. pie 饼形图
    （1）加上radius:[80,50] 会变成环形图

三.echarts 中的样式简介

  1. 颜色主题
    （1）主题可以通过切换深色模式，直接看到采用主题的效果
  • 通过light 、dark切换
  • 定制主题，具体可以参考官网，需要导入下载的js文件
// html 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

（2）color调色盘
在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
全局调色盘option.color

option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]

局部调色盘series.item.color

series: [
    
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
     
    ,

（3）itemStyle项的颜色

  • itemStyle:color:“#00f”
  • 高亮的样式emphasis
itemStyle:
normal:color:"#93da6c",
emphasis:color:"#bcff57"
  1. 特殊样式
    渐变色
    （1）定义渐变
// 定义渐变
	var linear = 
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  , 
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  ],
	  global: false // 缺省为 false

（2）使用渐变

itemStyle:
	color:linear,
	borderRadius:[30,30,0,0]
  1. label标签
  • show：true是否显示
  • position：”insideRight“位置
  • formatter格式
    formatter: “a\\nc分”
    a系列名
    b数据名
    c数值
    d百分百
  • rich富文本
series:[				
type:"pie",radius:[200,110],data:[
name:"百度",value:1200,
label:show:true,
position:"center",
// d百分比 big|内容 使用样式
formatter:"big|dsmall|%\\nb",
// 定义样式（富文本）
rich:
	big:
		color:"#f70",
		fontSize:"48px",
		fontWeight:900,
		,
	small:											color:"#f70"
		
		
		,
name:"其他",value:360,
// 样式灰色
itemStyle:color:"#ccc",
// 标签不显示
label:show:false,
// 提示不显示
tooltip:show:false
					]
				]

四.动态显示局部

  1. 定义option
  2. 修改option值
  3. echart.setOption(option);更新数据和视图

五.缓动动画

动画延迟animationDelay
动画时长animationDuration,
动画缓动函数animationEasing

animationDelay: function(idx) 
					// 越往后的数据延迟越大
					return idx * 200;
				,
				animationDuration: function(idx) 
					// 每小格动画的时候
					return idx * 200;
				,
				// 弹性的方式出现动画
				animationEasing: "bounceInOut"

六.事件

  1. 事件的监听
    echart.on（”事件名“，处理函数）
  2. 发送事件
    dispatchAction
echart.dispatchAction(
	type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
	seriesIndex: 0,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
	dataIndex: ind,
// 可选，数据项名称，在有 dataIndex 的时候忽略				 
	position:"top",
				)

三.echarts应用

实践出真知，学过前面的语法，快来创建属于自己的图表吧。练习完案例，就掌握了80%的echarts。宝子们快动手练习吧。

  1. 案例1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container
				width: 800px;
				height: 600px;
			
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = 
			// 图表的标题
			title:
				text:"我的第一个图表"
			,
			// 图表的提示
			tooltip:,
			// 图例
			legend:data:["睡眠时长"],
			// x轴线
			xAxis:data:["周一","周二","周三","周四","周五","周六","周日"],
			// y轴线
			yAxis:,
			// 设置数据
			series:[
				
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
					
			]
		
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<style>
			#container
				width: 800px;
				height: 600px;
			
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 4.2 定义配置项
		var option = 
			// 图表的标题
			title:
				text:"我的第一个图表"
			,
			// 图表的提示
			tooltip:,
			// 图例
			legend:data:["睡眠时长","玩游戏时长","上课时长"],
			// x轴线
			xAxis:data:["周一","周二","周三","周四","周五","周六","周日"],
			// y轴线
			yAxis:,
			// 设置数据
			series:[
				
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8]
				,
				
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				,
				
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					areaStyle:"#f70"
				,
				
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						name:"js",value:90,
						name:"html",value:85,
						name:"jq",value:90,
						name:"vue",value:50,
					]
				
			]
		
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 
	</script>
</html>
  1. 案例3
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 导入js -->
		<script src="js/echarts.min.js"></script>
		<!-- 03 设置容器的样式 -->
		<script src="./js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#container
				width: 800px;
				height: 600px;
			
		</style>
	</head>
	<body>
		<!-- 02 创建个容器 -->
		<div id="container"></div>
	</body>
	<script>
		//04 实例化echarts
		// 4.1 创建一个实例
		var echart = echarts.init(document.getElementById("container"))
		// 主题，light，dark，自定义
		// var echart = echarts.init(document.getElementById("container"),'purple-passion')
		// 4.2 定义配置项
		var option = 
			// 调色盘
			// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
			// 图表的标题
			title:
				text:"我的第一个图表"
			,
			// 图表的提示
			tooltip:,
			// 图例
			legend:data:["睡眠时长","玩游戏时长","上课时长"],
			// x轴线
			xAxis:data:["周一","周二","周三","周四","周五","周六","周日"],
			// y轴线
			yAxis:,
			// 设置数据
			series:[
				
					// 数据名称
					name:"睡眠时长",
					// 类型为柱状图
					type:"bar",
					// 数据data
					data:[8,10,4,5,9,4,8],
					color:["#ac4cff"]
				,
				
					// 数据名称
					name:"玩游戏时长",
					// 类型为柱状图
					type:"line",
					// 数据data
					data:[2,4,1,5,6,8,5]
				,
				
					// 数据名称
					name:"上课时长",
					// 类型为柱状图
					type:"line",
					smooth:true,
					// 数据data
					data:[6,7,5,8,6,1,0],
					// areaStyle:"#f70"
					
				,
				
					name:"成绩",
					// 饼形图
					type:"pie",
					// radius:80,
					// 半径
					radius:[80,50],
					// 位移
					left:-80,
					top:-270,
					// 数据
					data:[
						name:"js",value:90,
						name:"html",value:85,itemStyle:
							color:"#ffaa00"
						,
						name:"jq",value:90,
						 itemStyle:
							 normal:color:"#93da6c",
							 emphasis:color:"#bcff57"
						 
						,
						name:"vue",value:50,
					]
				
			]
		
		// 4.3 更新配置
		echart.setOption(option);
		// chart图表，set设置 Option选项  data数据 type类型 bar条（柱状条），series系列（数据） Axis轴线 xAxis水平轴线 
		// legend传奇（图例） tooltip 提示 init初始化 document文档 
	</script>
</html>

ECharts案例教程1


  原文：http://blog.csdn.net/whqet/article/details/42703973


 


简介


ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。


案例欣赏


-----------------------


--------------------------------------------------------------


        ===案例一简单条形图===案例二 条形、折线图混搭===


--------------------------------------------------------------


----------------------


具体实现


   简单条形图


先来一个最简单的案例，实现一个条形图，代码我放在codepen哟，大家可以移步预览效果先。


技术分享


预先准备好具有宽和高的网页元素，我们将用它绘制数据表。






[html] view plain copy


 print?技术分享技术分享




    

  1. <div id="main" style="width:600px;height:400px"></div>  
    2. 



然后我们导入Echarts类库，做好准备。






[html] view plain copy


 print?技术分享技术分享




    

  1. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>  
    2. 



然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。






[javascript] view plain copy


 print?技术分享技术分享




    

  1. // 路径配置  
    2. 

  2. require.config({  
    3. 

  3.   paths: {  
    4. 

  4.     echarts: ‘http://echarts.baidu.com/build/dist‘  
    5. 

  5.   }  
    6. 

  6. });  
    7. 

  7.   
    8. 

  8. // 使用  
    9. 

  9. require(  
    10. 

  10.   [  
    11. 

  11.     ‘echarts‘,  
    12. 

  12.     ‘echarts/chart/bar‘, // 使用柱状图就加载bar模块，按需加载  
    13. 

  13.   ],  
    14. 

  14.   function (ec) {  
    15. 

  15.     // 基于准备好的dom，初始化echarts图表  
    16. 

  16.     var myChart = ec.init(document.getElementById(‘main‘));   
    17. 

  17.     //设置数据  
    18. 

  18.     var option = {  
    19. 

  19.         
    20. 

  20.     };  
    21. 

  21.   
    22. 

  22.     // 为echarts对象加载数据   
    23. 

  23.     myChart.setOption(option);   
    24. 

  24.   }  
    25. 

  25. );  
    26. 



重点是option里的设置，设置坐标轴、设置数据。






[javascript] view plain copy


 print?技术分享技术分享




    

  1. var option = {  
    2. 

  2.       //设置坐标轴  
    3. 

  3.       xAxis : [  
    4. 

  4.         {  
    5. 

  5.           type : ‘category‘,  
    6. 

  6.           data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
    7. 

  7.         }  
    8. 

  8.       ],  
    9. 

  9.       yAxis : [  
    10. 

  10.         {  
    11. 

  11.           type : ‘value‘  
    12. 

  12.         }  
    13. 

  13.       ],  
    14. 

  14.       //设置数据  
    15. 

  15.       series : [  
    16. 

  16.         {  
    17. 

  17.           "name":"销量",  
    18. 

  18.           "type":"bar",  
    19. 

  19.           "data":[5, 20, 40, 10, 24, 20,24,32],  
    20. 

  20.         }  
    21. 

  21.       ]  
    22. 

  22.     };  
    23. 



技术分享


我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。






[javascript] view plain copy


 print?技术分享技术分享




    

  1. var option = {  
    2. 

  2.      //设置标题  
    3. 

  3.      title:{  
    4. 

  4.        text:‘销量图‘,  
    5. 

  5.        subtext:‘纯属捏造，如有雷同，人品爆发。‘  
    6. 

  6.      },  
    7. 

  7.      //设置提示  
    8. 

  8.      tooltip: {  
    9. 

  9.        show: true  
    10. 

  10.      },  
    11. 

  11.      //设置图例  
    12. 

  12.      legend: {  
    13. 

  13.        data:[‘销量‘]  
    14. 

  14.      },  
    15. 

  15.      //设置坐标轴  
    16. 

  16.      xAxis : [  
    17. 

  17.        {  
    18. 

  18.          type : ‘category‘,  
    19. 

  19.          data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
    20. 

  20.        }  
    21. 

  21.      ],  
    22. 

  22.      yAxis : [  
    23. 

  23.        {  
    24. 

  24.          type : ‘value‘  
    25. 

  25.        }  
    26. 

  26.      ],  
    27. 

  27.      //设置数据  
    28. 

  28.      series : [  
    29. 

  29.        {  
    30. 

  30.          "name":"销量",  
    31. 

  31.          "type":"bar",  
    32. 

  32.          "data":[5, 20, 40, 10, 24, 20,24,32],  
    33. 

  33.        }  
    34. 

  34.      ]  
    35. 

  35.    };  
    36. 



技术分享


======================ok，华丽的分割线，之后我来点复杂的==========================


    条形图折线图混搭


加点料，来电混搭，直线图加上条形图，同时画平均线、提示最大最小值，同样代码放在codepen，移步预览效果先。


技术分享


当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。






[javascript] view plain copy


 print?技术分享技术分享




    

  1. // 路径配置  
    2. 

  2. require.config({  
    3. 

  3.   paths: {  
    4. 

  4.     echarts: ‘http://echarts.baidu.com/build/dist‘  
    5. 

  5.   }  
    6. 

  6. });  
    7. 

  7.   
    8. 

  8. // 使用  
    9. 

  9. require(  
    10. 

  10.   [  
    11. 

  11.     ‘echarts‘,  
    12. 

  12.     ‘echarts/chart/bar‘, // 使用柱状图就加载bar模块，按需加载  
    13. 

  13.     ‘echarts/chart/line‘  
    14. 

  14.   ],  
    15. 

  15.   function (ec) {  
    16. 

  16.     // 基于准备好的dom，初始化echarts图表  
    17. 

  17.     var myChart = ec.init(document.getElementById(‘main‘));   
    18. 

  18. //设置数据  
    19. 

  19.     var option = {  
    20. 

  20.       //设置标题  
    21. 

  21.       title:{  
    22. 

  22.         text:‘销量图‘,  
    23. 

  23.         subtext:‘纯属捏造，如有雷同，人品爆发。‘  
    24. 

  24.       },  
    25. 

  25.       //设置提示  
    26. 

  26.       tooltip: {  
    27. 

  27.         show: true  
    28. 

  28.       },  
    29. 

  29.       //设置图例  
    30. 

  30.       legend: {  
    31. 

  31.         data:[‘销量‘]  
    32. 

  32.       },  
    33. 

  33.       //设置坐标轴  
    34. 

  34.       xAxis : [  
    35. 

  35.         {  
    36. 

  36.           type : ‘category‘,  
    37. 

  37.           data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]  
    38. 

  38.         }  
    39. 

  39.       ],  
    40. 

  40.       yAxis : [  
    41. 

  41.         {  
    42. 

  42.           type : ‘value‘  
    43. 

  43.         }  
    44. 

  44.       ],  
    45. 

  45.       //设置数据  
    46. 

  46.       series : [  
    47. 

  47.         //条形图  
    48. 

  48.         {  
    49. 

  49.           "name":"销量",  
    50. 

  50.           "type":"bar",  
    51. 

  51.           "data":[5, 20, 38, 10, 24, 20,24,32]  
    52. 

  52.         },  
    53. 

  53.         //折线图  
    54. 

  54.          {  
    55. 

  55.           "name":"销量",  
    56. 

  56.           "type":"line",  
    57. 

  57.           "data":[5, 20, 38, 10, 24, 20,24,32],  
    58. 

  58.            //绘制平均线  
    59. 

  59.            markLine : {  
    60. 

  60.              data : [  
    61. 

  61.                {type : ‘average‘, name: ‘平均值‘}  
    62. 

  62.              ]  
    63. 

  63.            },  
    64. 

  64.           //绘制最高最低点  
    65. 

  65.           markPoint : {  
    66. 

  66.             data : [  
    67. 

  67.               {type : ‘max‘, name: ‘最大值‘},  
    68. 

  68.               {type : ‘min‘, name: ‘最小值‘}  
    69. 

  69.             ]  
    70. 

  70.           }  
    71. 

  71.         }  
    72. 

  72.       ]  
    73. 

  73.     };  
    74. 

  74.   
    75. 

  75.     // 为echarts对象加载数据   
    76. 

  76.     myChart.setOption(option);   
    77. 

  77.   }  
    78. 

  78. );  
    79. 

以上是关于echarts入门教程（超级详细带案例）的主要内容，如果未能解决你的问题，请参考以下文章
 

 Flask结合ECharts实现在线可视化效果，超级详细！


 #导入MD文档图片#Flask结合ECharts实现在线可视化效果，超级详细！


 转 Echars地图详解


 ECharts实现数据可视化入门教程（超详细）


 资深hacker带大家如何攻破一个网站！超级详细的教学教程


 EChars学习-1