echarts开发 | 数据可视化 -- 第一篇 echart配置项学习

EChart使用五步曲

在开始之前，需要创建一个 EChart的组件，使用五步法。
步骤1：下载并引入 echarts.js 文件
步骤2：准备一个具备大小的DOM容器
步骤3：初始化 echars 实例对象 对象放入上一步的容器
步骤4：指定配置项和数据(option)
步骤5：将配置项设置给 echarts 实例对象

配置项与图的位置关系

一、title 标题配置

// 设置图表的标题
title: {
	text:`折线图堆叠`, // 标题
	subtext: `副标题`,
	left: '70',
	top: 'top',
    borderWidth: 2,
    borderColor: 'red'
}

效果：

color 配置

color 设置线条的颜色，注意后面是个数组
设置之后，出现的线条会按照数组的顺序，依次循环使用颜色

color: ['pink', 'red', 'green', 'skyblue']

如果只设置一个颜色，所有线条都是同一个颜色
如设置为color:['pink']

设置为color:['pink','green']

设置为color:['pink','green','blue','black','yellow'],

二、轴相关配置–① grid xAxis yAxis

grid 网格配置

// left right bottom top 控制图表大小，与DOM容器的距离
// containLabel 是否显示刻度  true/false
grid: {
	left: '3%',
	right: '4%',
	bottom: '3%',
	containLabel: true
}

xAxis,yAxis x,y轴配置

type的可选值

• category 类目
• value 值

option = {
	xAxis:{
		type:'category',
		// boundaryGap 是否让线条与坐标轴有缝隙
		boundaryGap: false
		data:['mon', 'tue', 'web', 'thu']
	},
	yAxis:{
		type:'value'
	},
	series:[
		{
			data:[150,230,224,218],
			type:'line'
		}
	]
}

系列图表配置 它决定着显示那种类型的图表

• stack 数据堆叠，同个类目上系列配置相同的 stack值后 后一个系列的值会在前一个系列的值上相加 一般是不需要的

series:[
	{
		name: '邮件营销',
		type: 'line',
		stack: '总量',
		data: [120,132,101]
	},
	{
		name: '联盟广告',
		type: 'line',
		stack: '总量',
		data: [220,137,201]
	}
]

三、提示框/弹窗组件–②tooltip

当鼠标悬浮于图表之上，可以展示该数据点的具体细节。使用 tooltip 属性进行配置。

tooltip: {
   // 触发类型  axis / item
   trigger: 'axis',
   // 坐标轴指示器配置项
   axisPointer:{
   	type:'cross',
   	label: {
   		backgroundColor: '#6a7985',
   	}
   }
}

• trigger 默认情况下 tooltip.trigger 设置为 item, 此时只有将鼠标悬停于图表的数据点上，才会触发显示该数据点对应的提示框信息。
  

• 将 trigger 设置为 axis, 当鼠标悬停，会寻找最近的轴，此时与悬停点对应的所有数据点信息都会在同一提示框内同时显示。
  

四、图例–③

// 图例组件
legend: {
	// 如果 Series 里面有了 name 值，则legend 里面的 data可以删掉
	data :['mon', 'tue', 'web', 'thu']
}

五、缩放–④

六、⑤

七、工具箱组件–⑥toolbox

使用工具箱组件，在option 对象添加一个名为 toolbox的配置项。包含两个属性：feature 和 show。

feature 选项

saveAsImage、dataView、restore

• saveAsImage
  允许将图表保存为一张图片。
• dataView
  提供数据视图，即将图表数据以表格形式显示。
• restore
  开启还原功能

toolbox: {
	show: true,  // 默认为true
	feature: {
		saveAsImage:{},  // 保存图片
		dataView:{},  // 数据视图
		restore:{},  // 开启还原功能
	}
}

dataZoom

• dataZoom
  数据区域缩放, 允许对图表特定区域进行放大或缩小，以便更细致的查看数据

// 工具箱组件 可以另存为图片等功能
toolbox: {
	show: true,  // 默认为true
	feature: {
		saveAsImage:{},  // 保存图片
		dataView:{},  // 数据视图
		restore:{},  // 开启还原功能
		dataZoom: {}, // 数据区域缩放
	}
}

步骤①：点击缩放按钮， 步骤②：选择需要放大的区域

步骤③： 松开鼠标后得到放大的区域

步骤④：还原缩放

动态演示

magicType

• magicType

toolbox: {
	show: true,  // 默认为true
	feature: {
		magicType:{
			type: ['line', 'bar', 'stack']  // 支持这三个值 折线图 柱状图 堆叠
		}
	}
}

点击按钮可以进行视图切换

八、图表跟随屏幕缩放适配

windows.addEventListener("resize", function(){
	myChart.resize();
});