ECharts实现数据可视化入门教程

ECharts介绍

基于javascript的图表插件(canvas)
百度开发

ECharts入门教程

ECharts的基础配置

主要配置（option）

1.series系列列表。每个系列通过 type 决定自己的图表类型
通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。
2.xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
3.yAxis：直角坐标系 grid 中的 y 轴
4.title：标题组件
5.tooltip：提示框组件
6.legend：图例组件
7.color：调色盘颜色列表
8.stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

小案例

1. 颜色案例

<script>
		// 03 初始化
		// 主题 默认,dark,light,自定义
		var echart = echarts.init(document.getElementById("app"));
		// 04 定义选项
		var option = {
   
			// color:["#aa00ff","#aa007f","#55ff00","#aaff00"],
			title:{
   text:"小吴的睡眠时间"},//标题文本
			legend:{
   data:["睡眠时长","作业耗时"]} ,//图例
			tooltip:{
   },//鼠标提示
			yAxis:{
   },//x轴线
			xAxis:{
   data:["20日","21日","22日",