开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):Docker 自动化部署脚本】学习笔记,与课程紧密连接,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11509
Echarts 简介
目录:
一,Echarts 简介
二,如何使用 Echarts
一,Echarts简介
点击图标显示,页面会以图表的形式显示出来,显示可以是柱状图,饼状图,折线图。
简介:
ECharts 是百度的一个项目,百度把 ECharts 捐给 apace,用于图表展示,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图, treemap,旭日图,多维数据可视化的平行坐标,还有用于BI的漏斗图,仪表盘,并且支持图与图之间的混搭。
官方网站: https://echarts.baidu.com/,进入后网址会变成https://www.echartsjs.com/zh/index.html ,s是 apace 的官网。Apache ECharts 是正在由 Apache 维护的项目。
点击文档--教程,有5分钟上手 ECharts,告诉我们 ECharts 该怎么用。
二,如何使用 Echarts
(1)获取 ECharts,它本身是一个js文件,把js文件引入即可操作。
引入方法:
从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建
在 ECharts 的 GitHub 获取
通过 npm 获取 echarts , npm instll echarts --save ,详见"在 webpack 用echarntst”
通过jsDelivr等CDN引入
(2)在页面中,把文件引入或者用 vue 文件 npm 下载。
(3)写出结构,在结构中先建div,指定 ECharts 图表位置,下方代码是固定结构,不管做各种图,代码都是在其中做设置。
实例--官方实例,针对不同的图,里面都有实现的相关例子。比如折线图,点开第一个图,会展示其效果,还有对应代码,把代码直接改就能改动效果。
如柱状图也有效果及代码。各种图都有,包括炒股用到的较复杂的k线图。ECharts 把目前常见的各种图效基本都展示出来。当你在做图的前端效果:页面,用 ECharts 就能快速改动效果。
以折线图为例,xAxis 是 x 轴,yAxis 是 y 轴。即坐标。xAxis 在 x 轴显示图中的日期,yAxis 在 y 轴显示数据,最终是该折线图。
要做的是把日期和数据全部通过数据库查出来,因为它是固定值。
通过数据库把数据查询返回,到里边把自己的图作显示。查询中有特点,代码中的数据是[],即数组形式,在返回数据中,必须返回数组格式。
如果返回别的格式,它不认识,日期数据都只认数组格式。重点写接口,通过接口,返回要实现的数组格式。