文章目录

  • 前言
  • 柱状图和折线图主要配置项：
  • 饼图的基本配置项
  • series 数据项
  • 有什么功能组件？
  • 渐进式案例：
  • vue中画一个基本的饼图
  • 为它添加提示组件tooltip
  • dataZom，用柱状图演示
  • 添加visualMap
  • 添加图示legend
  • 添加个标题（最终版）
  • 总结

前言

本文将渐进式的介绍一下echarts的常用图标及一些组件。关于echarts的学习方式，本人推荐先echarts了解有哪些组件和功能，对应的配置是哪块，然后去查阅官方文档，因为配置项多，没法去记住也没必要记住。以下代码可以直接复制预览效果，框架用的是cdn的。
注：gif文件较大，建议直接复制代码运行

柱状图和折线图主要配置项：

对于二维的图标来说，配置项有x轴，y轴，数据项

let options={
    xAxis:{data:[]},// 配置x轴数值，一般为类型名称
    yAxis:{},//y轴数值，一般为空对象即可。会根据数据自动划分，也可自定义填补
    series:[{}],// 数据组，一组为一个对象
}
/* 柱状与折线图配置区别为数据组的类型，
	折线图type为"line"
	柱状图type为"bar"
	其次，两种类型是可以同在一个图表的
*/

饼图的基本配置项

饼图不同于二维图表，没有x轴和y轴，因此这两项配置项对于饼图来说是无效配置。主要配置只有数据项series。

let pieOption = {
    /* 每项的名称 */
    series:[{}]
}

series 数据项

无论是那种数据统计表，配置类型有什么不同，但是每种都**必有**数据项series。它是一个数组，包含多个数据组,type属性来定义数据项的类型

// 柱状图
{type:'bar',data:[]}
// 折线图
{type:'line',data:[]}
// 饼图
{type:'pie',data:[]}

有什么功能组件？

提示框组件（tooltip）、移动数据范围组件(dataZoom)、数值颜色程度(visualMap)、图示（legend）、图表标题(title)

渐进式案例：

vue中画一个基本的饼图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			series:[
		        {
		            name:'人数',
		            type:'pie',
		            data:[{
	                    value: 100,
	                    name: "java"
	                    },{
	                    value: 200,
	                    name: "go"
	                    }, {
	                    value: 300,
	                    name: "php"
	                    }, {
	                    value: 400,
	                    name: "python"
	                    }, {
	                    value: 500,
	                    name: "nodejs"
                    }]
		        }
		    ]
			
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_javascript

为它添加提示组件tooltip

只是用默认的即可，tooltip:{}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			// 添加默认提示组件
			tooltip:{},
			series:[
		        {
		            name:'人数',
		            type:'pie',
		            data:[
                        {value: 100,name: "java"}, 
                        {value: 200,name: "go"}, 
                        {value: 300,name: "php"}, 
                        {value: 400,name: "python"}, 
                        {value: 500,name: "nodejs"}
                    ]
		        }
		    ]
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_javascript_02

dataZom，用柱状图演示

因为饼图没有这个配置项，所以用柱状图实例一下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 600px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			dataZoom:{},
			// 标题 
			title:{text:'柱子图'},
			xAxis:{data:["java","go","nodejs","php","python"]},
			yAxis:{},
			legend:{
				// 名称要与数据项的name对应这样才能控制到对应的数据
				data:["java","go","nodejs","php","python"]
			},
			series:[
		        {
		            type:'bar',
		            data:[100,200,300,400,500]
		        }
		    ]
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_前端_03

添加visualMap

visualMap:{}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 600px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			// 添加默认提示组件
			tooltip:{},
			// 数值颜色
			visualMap:{},
			series:[
		        {
		            name:'人数',
		            type:'pie',
		            data:[
                        {value: 100,name: "java"}, 
                        {value: 200,name: "go"}, 
                        {value: 300,name: "php"}, 
                        {value: 400,name: "python"}, 
                        {value: 500,name: "nodejs"}
                    ]
		        }
		    ]
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_javascript_04

添加图示legend

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 600px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			// 添加默认提示组件
			tooltip:{},
			// 数值颜色
			visualMap:{},
			// 
			legend:{
				// 名称要与数据项的name对应这样才能控制到对应的数据
				data:["java","go","nodejs","php","python"]
			},
			series:[
		        {
		            name:'人数',
		            type:'pie',
		            data:[
                        {value: 100,name: "java"}, 
                        {value: 200,name: "go"}, 
                        {value: 300,name: "php"}, 
                        {value: 400,name: "python"}, 
                        {value: 500,name: "nodejs"}
                    ]
		        }
		    ]
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_html_05

添加个标题（最终版）

title:{text:'标题内容'}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://lib.baomitu.com/echarts/5.3.1/echarts.min.js"></script>
	<title></title>
	<style type="text/css">
		#demo{
			width: 600px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div id="demo">
		
	</div>
	<script type="text/javascript">
		let ecDemo = echarts.init(document.getElementById('demo'));
		let options = {
			// 添加默认提示组件
			tooltip:{},
			// 数值颜色
			visualMap:{},
			// 
			// 标题 
			title:{text:'饼图'},
			legend:{
				// 名称要与数据项的name对应这样才能控制到对应的数据
				data:["java","go","nodejs","php","python"]
			},
			series:[
		        {
		            name:'人数',
		            type:'pie',
		            data:[
                        {value: 100,name: "java"}, 
                        {value: 200,name: "go"}, 
                        {value: 300,name: "php"}, 
                        {value: 400,name: "python"}, 
                        {value: 500,name: "nodejs"}
                    ]
		        }
		    ]
		}
		ecDemo.setOption(options)
	</script>
</body>
</html>

javase折线图 echarts折线图series_javase折线图_06

总结

echarts配置项杂多，且都是些固定的。要使用它更多的是要了解echarts，有哪些功能、功能对应的是些配置项。然后去 查阅官方的文档。对于常见的配置可以熟悉一下，例如饼图、柱状图和折线图的常用配置。