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

最新推荐文章于 2024-09-27 12:21:31 发布

kaixinde_9

最新推荐文章于 2024-09-27 12:21:31 发布

阅读量602

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/kaixinde_9/article/details/127559632

版权

这篇博客是ECharts的入门教程，介绍了ECharts作为基于JavaScript的图表插件，由百度开发。主要内容包括ECharts的基础配置，如option的主要设置：series定义图表类型，xAxis和yAxis设置坐标轴，title和tooltip组件，legend图例，color颜色列表，以及stack数据堆叠功能。此外，还提供了小案例展示。

摘要由CSDN通过智能技术生成

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值后后一个系列的值会在前一个系列的值上相加。

小案例

颜色案例

<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日","23日","24日","25日","26日"]