一、学习内容
1.概念
命名 ：echarts 是什么：一个基于 JavaScript 的开源可视化图表库 作用：更直观的展示数据 Echart是百度研发团队开发的一款报表视图JS插件，功能十分强大，使用内容做简单记录； 版本： v 5.4-v 4.X 2、简单入门使用1、引用echarts.js文件注意：需要引用时请到官网下载echarts.js文件。 <script type="text/javascript" src="js/echarts.js"></script>2.准备一个放视图的div（自定义）<div id="chartmain" style="width:600px; height: 400px;"></div>3、设置参数，初始化自定义的图标二、Echart属性介绍1、title：写标题，属性如下 show:false/true 标题是否显示； text：标题内容；textstyle修饰标题样式 subtext：副标题，也可以算是内容；subtextStyle修饰副标题样式； 2、legentd:图例组件展现了不同系列的标记(symbol)，颜色和名字； show:false/true 是否显示； data:图例的数据数组; 默认水平方向horizontal 3、grid直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图; show:false/true 是否显示； containLabel: true； top、left、right、bottom标识上左右下的边距； 4、xAxis直角坐标系 grid 中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。 类型是类目 category value。 position: 'top' type:坐标轴类型。 'value'数值轴，适用于连续数据。 'category'类目轴，适用于离散的类目数据，为该类型时必须通过data设置类目数据。 'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 data:类目数据，在类目轴（type: 'category'）中有效。 5、yAxis直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。 type:坐标轴类型。 'value'数值轴，适用于连续数据。 'category'类目轴，适用于离散的类目数据，为该类型时必须通过data设置类目数据。 'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 6、dataZoom组件 用于对数据进行区域缩放，从而能自由关注细节的数据信息，或者概览数据整体。 type:slider; 是否显示 组件。如果设置为false，不会显示，但是数据过滤的功能还存在; backgroundColor:组件的背景颜色。 realtime:拖动时，是否实时更新系列的视图。如果设置为false，则只在拖拽结束的时候更新。 top、left、right、bottom标识上左右下的边距； 7、tooltip:提示框组件 show:false/true 是否显示； trigger:触发类型; 'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 8、toolbox 工具栏内置有: 1.导出图片 2.数据视图 3.动态类型切换 4.数据区域缩放 5.重置五个工具。 内置有1.导出图片2.数据视图3.动态类型切换4.数据区域缩放5.重置五个工具。
| 
