2021-07-11 ECharts基础配置之散点图，柱状图，折线图，饼图

最新推荐文章于 2024-03-28 15:19:52 发布

浅浅的交错着

最新推荐文章于 2024-03-28 15:19:52 发布

阅读量875

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44427798/article/details/118635867

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Echarts最基础的代码结构
引入js文件,DOM容器。初始化对象，设置option

通用的配置：标题：title 提示框：tooltip 工具按钮：toolbox 图例：legend

	var option = {
		title: {
			//标题的文字样式
			text: '成绩展示’，
			textStyle；{
				color：'red'
			},
			//边框
			borderWidth:5,//默认像素
			borderColor:'blue',
			borderRadius:5
			//位置
			left:100,top:10,right:50,
			bottom:50
		}，
			
		/*用于配置鼠标滑过或点击图标时的显示框*/
		tooltip:{
			//触发类型：trigger---item,axis
			trigger:'item',--必须在柱内部，才显示,series中的内容[name,x周上的值，y轴上的值]
			trigger:'axis',--在整个轴上，柱子上会有一根轴线
			//触发时机：triggerOn--mouseover,click
			triggerOn：'click',//默认是鼠标滑过
			//格式化：formatter---支持string和function
			formatter: '{b}的成绩是{c}',//全部重置--默认模板{a}{b}{c}{d}{e}在不同的图意义不一样{a0}{a1}{a2}----柱状图中{a}是系列名，{b}类目名{c}值
			formatter：function(arr){
				console.log(arr)
				return arr[0].name+'的分数'+arr[0].data
			}
		}，

		/*ECharts提供的工具栏--导出图片，数据视图，动态类型转换，数据区域缩放，重置*/
		toolbox{
			feature:{ //开启工具
				saveAsImage：{}，//导出图片
				dataView: {}，//数据视图-可看到原始数据并可修改
				restore: {}， //重置
				dataZoom:{}， //区域缩放	
				magicType:{
					type:['bar','line']//动态切换所选择的两种类型，可切换为折线图或者柱状图
				}//动态类型转换
			}
		}，

		/*用于筛选系列，需要和series配合使用
		xDataArr = ['学长‘，'下架','第四','看得开','计算得到']
		yDataArr1 = [88,55,66,33,99,22,11]
		yDataArr2 = [98,65,56,43,89,12,21]
		legend中的data是一个数组，
		legend中的data的值需要heseries数组中的某组数据的name值一样
*/
		series:[
			{name：'语文'，type:'bar',data:yDataArr1},
			{name：'数学'，type:'bar',data:yDataArr2}
		]，
		legend:[
			data:['语文','数学']
		]
	}

tooltip-formatter

tooltip-formatter-请求的参数

在这里插入图片描述

toolbox工具

在这里插入图片描述

1,柱状图-分类数据，清晰看到每个分类数据的信息

常见的效果：
1，标记：最大值，最小值，平均值
markPoint markLine
2,显示：数值显示柱宽度横向柱状图（x轴与y轴互换）
label barWidth x轴与y轴角色互换

option

	xDataArr = ['学长‘，'下架','第四','看得开','计算得到']
	yDataArr = [88,55,66,33,99,22,11]
	
	var option = {
		xaxis: {
			type: 'category', //类目轴
			data: xDataArr
		},
		yAxis:{
			type: 'value'  //数值轴
		},
		series:[
			{ 
			name:"语文“，
			type:"bar"， //柱状图；line-折线图，pie:饼状图
			data：yDataArr ， //y轴上的数据在这里，根据yDataArr中的值自动展示范围

			/*标记*/
			markPoint: {
				data:[
					{type:'max',name:'最大值’}
					{type:'min',name:'最小值‘
				]
			}，
			markLine:[
				data: [
					{type:"average"
				]
			]
			}
			
			/*显示*/
			lable: {
				show: true,
				rotate: 60 //以60度旋转
				position: inside //标签的位置---inside-显示在柱的内部；top-柱上边		
			}
			barWidth:'30%',  //标准柱宽的30%
		]	
	}

横向图：
在这里插入图片描述

2,折线图-数据随时间的变化趋势

var xDataArr = [‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’];
var yDataArr = [3000,2800,950,1200,1425,2310,2510,1690,1365,1863,1953,2149]

常见效果

标记：最大值，最小值，平均值，标注区间markPoint,markLine,markArea
线条的控制
smooth–线条平滑；lineStyle:样式
填充风格
areaStyle

	var option = {
		xaxis: {
			type: 'category', //类目轴
			data: xDataArr
		},
		yAxis:{
			type: 'value'  //数值轴
		},
		series:[
			{ 
			name:"小康师"，
			type:"line"， //柱状图；line-折线图，pie:饼状图
			data：yDataArr ， //y轴上的数据在这里，根据yDataArr中的值自动展示范围

			/*标记*/
			markPoint: {
				data:[
					{type:'max',name:'最大值’}
					{type:'min',name:'最小值‘
				]
			}，
			markLine:[
				data: [
					{type:"average"}
				]
			],
			markArea:[
				data:[
					[{XAxis：'1月'}//开始值,{XAxis：'2月'}//结束值],
					[{XAxis：'7月'}//开始值,{XAxis：'8月'}//结束值]
				]
			]
			}
			
			/*线条控制*/
			smooth:true, //线条平滑
			lineStyle:{
				color:'green',
				type:'dashed', //dashed虚线 dotted点线solid:实线
			}
			
			/*填充风格*/
			areaStyle:{
				color:'pink'
			}
	}

折线图
在这里插入图片描述
常见效果
4，紧挨边缘-首元素挨着y轴
boundaryGap
5,缩放：脱离0值比例，轴上的值不在从0开始
scale

	var option = {
		xAxis:{
			type:'catagory',
			data:xDataArr,
			boundaryGap:false//不设置间隙，从轴线开始走折线
		}，
		//yDataArr = [3005,3301,3003,3005,3006,3007,3009,3007]
		yAxis:{
			type：'value'
			scale:true//不从0开始
		}
	}

在这里插入图片描述
6,堆叠图

	var option = {
		xAxis:{
			type:'catagory',
			data:xDataArr,
		}，
		yAxis:{
			type：'value'
		},
		series:[
		{type：'line',data:yDataArr1,stack:'all',areaStyle:{}//值任意，可以是all或者其他
			}
		{type:'line',data:yDataArr2,stack:'all',areaStyle:{}
			}
		]
	}

第2条线在第一条加上其值所得，红线为xDataArr1,蓝线为两者想加在这里插入图片描述

3,散点图-推断变量间的相关性

	var data = [{"gender":"male","height":180.3,"weight""83.0},{"gender":"male","height":180.3,"weight""83.0},{"gender":"male","height":180.3,"weight""83.0}，{"gender":"male","height":180.3,"weight""83.0}...*500]
	//构建一个二维数组
	var axisData = []
	for(var i=0;i<data.length;i++){
		var height = data[i].height
		var weight = data[i].weight
		var newArr = [height,weight]
		axisData.push(newArr)
	}
	var option = {
		xAxis:{type:'value',scale:true},//不从0开始，脱离0值比例
		yAxis:{type:'value',scale:true},
		series:[{type:'scatter',data:axisData
			
		}]
	}

常见效果

气泡图效果：散点的大小不同，散点的颜色不同
涟漪动画效果–水波纹效果
type:‘effectScatter’
鼠标移动到才有涟漪效果

	scries:[{
	//-----------涟漪散点图------------
	type:'effectScatter',
	showEffectOn:'emphasis',//render-表示加载完每一个都有水波纹效果；emphasis:鼠标移动到此才显示
	/*控制水波纹效果*/
	rippleEffect:{
		scale:5 //缩放比例5
	}

	//------------散点图-------------
	//type:'scatter',
	data:axisData,
	//气泡大小
	symbolSize:function(arg){
		var height = arg[0] / 100
		var weight = arg[1]
		//bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
		var bmi = weight / (height * height)
		if(bmi >28){return 20}
		return 5 
	}}],
	
	//散点颜色的不同
	itemStyle:{
		color:function(arg){
			var height = arg.data[0] / 100
			var weight = arg.data[1]
			//bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
			var bmi = weight / (height * height)
			if(bmi >28){return 'red'}
			return 'green'
		}
	}

直角坐标系中的常用配置—柱状图，折线图，散点图

网格grid—用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的----显示grid:—通过show
坐标轴axis----分为x轴和y轴----一个grid中最多有两种位置的x轴和y轴
区域配置dataZoom

网格grid

var option = {
	show:true,   //显示grid
	borderWide: 10  //边框大小和颜色
	borderColor:'red',
	left:20,top:120, //位置
	width:300,
	height:150
}

在这里插入图片描述
坐标轴axis

	坐标轴类型type
		value数值轴，自动会从目标数据中读取数据；		  category:类目轴，该类必须通过data设置类目数据
	显示位置position
		xAxis:可取值为top或者bottom
		yAxis:可取值为

var option = {
	xAxis:{type:'category',data:xDataArr,
	position:'top'},
	yAxis:{type:'value',position:'left'},
}

区域缩放dataZoom


var option = {
	//可通过工具
	toolbox:{
		feature:{
			dataZoom:{}
		}
	}
	/*区域缩放dataZoom
		dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
		dataZoom是一个数组，意味着可以配置多个区域缩放器
		属性：
			1，类型type: slider:滑块；inside:在坐标轴内置，依靠鼠标滚轮或者双指缩放
			2，指明产生作用的轴
			xAxisIndex：设置缩放组件控制的是那个x轴，一般写0即可
			yAxisIndex:设置缩放组件控制的的是那个y轴，一般写0即可
			
	*/
	dataZoom:[
		{type:"slider",xAxisIndex：0}，
		{type:"slider",yAxisIndex：0
		start：0，end:80 //过滤：筛选从0到80之间的值，即滑块中的80%}
	]
	
}

滑块slider 在这里插入图片描述
指明x轴和y轴

4，饼图-帮助用户快速了解不同分类的数据的占比情况

无需配置xAxis和yAxis，数据为name和value对象组成的数组

数据准备：
var pieData = [
{name:“淘宝”,value:11231}，{name:“京东”,value:42536}，{name:“设计”,value:22311}，{name:“今宝”,value:55886}，{name:“淘金”,value:88888}，{name:“懂时尚”,value:65348}]
常见效果：

显示数值 label
半径的设置 radius
南丁格尔图 roseType:‘radius’
选中效果 selectedMode:‘single’/‘multiple’
selectedOffset:30 //设置偏离的距离


var option = {
	series: [
		{
			type:'pie',
			data:pieData
			//显示数值
			label:{  //饼图文字的显示
				show:true,//显示文字
				formatter:function(arg){ //决定文字显示的内容
					return arg.name + '平台‘  + arg.value + '元'/n + arg.percent + '%'
				}
			},
			
			//参照div容器的百分比
			radius:20,  //饼图的半径 20px
			radius:'20% '//饼图的半径 当前容器的20%
			//百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
			
			radius:['50%','70%']  //第0个元素代表的是内圆的半径，1个元素是外圆的半径

			/*南丁格尔图*/
			roseType:'radius'  //饼图的每一个区域的半径是不同的

			/*选中效果*/
			selectedMode:'single'  //能够将选中的区域偏离圆点一小段距离
			selectedMode:'multiple',//选中多块区域
			selectedOffset:30 //设置偏离的距离
			
		}
	]
}

链接: link.