echat(echarts官网)
ECharts-可视化入门教程
echarts 是js代码 , 本身是属于网页运行的代码 , 平时使用 , 我们只需要把它 引入使用 即可 .
但是如果你不了解js代码 , 也不明白怎么编辑js代码 , 那么下面这些基础知识 , 希望你能一并了解.
当然如果你是专业人士 , 可以跳过上面的基础知识 .
如果你对源代码进行修改有需要 , 那么也可以去官方开源地址下载对应的源码进行编译 .
通过标签方式直接 引入 构建好的 echarts
思路打开 , 先找到折线的配置项 , 然后去找点的配置项 , 然后把点给隐藏了 .
下面落实到实际:
例子二 : echarts折线图如何显示数值?
思路打开 , 先找到折线的配置项 , 然后去找标签的配置项 , 然后把标签显示出来 .
官方的例子 很丰富 , 也很具有代表性 , 大家也可以在线对官方例子的数据进行编辑 , 可视化其实很简单 , 逐渐摸索慢慢的就会熟悉啦 .
echarts是做什么的？
echarts是做数据统计。
1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。
2、底层依赖轻量级Canva+库?ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
扩展资料
echarts的优点：
1、国人开发，文档全，便于开发和阅读文档。
2、图表丰富，可以适用各种各样的功能。
echarts的缺点:
1、移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系。
2、echarts不失为一款比较适合我们这种码农使用的框架。
3、echarts就不贴代码了。毕竟文档很全。
参考资料：ECharts官网-eCharts
ECharts 基础使用
一个网页中可以创建多个 echarts 实例。
每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。
准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。
在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。
一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：line（折线图）、bar（柱状图）、pie（饼图）... 、以及其它的构成参数。
也可以有另一种配置方式，系列的数据从 dataset 中取：
在系列之上，echarts 中各种内容，被抽象为“组件”。
例如，echarts 中至少有这些组件： xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）、 angleAxis （极坐标系角度轴）、 radiusAxis （极坐标系半径轴）、 polar （极坐标系底板）、 geo （地理坐标系）、 dataZoom （数据区缩放组件）、 visualMap （视觉映射组件）、 tooltip （提示框组件）、 toolbox （工具栏组件）、 series （系列）、...
我们注意到，其实 系列 （series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。
如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。
echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之， option 描述了： 数据 、 数据如何映射成图形 、 交互行为 。
系列里的 series.data 是本系列的数据。也可以使用另一种方式，系列数据从 dataset 中取：
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。
这种绝对定位的方式，类似于 CSS 的绝对定位（ position: absolute ）。绝对定位基于的是 echarts 容器 DOM 节点。
它们的值可以是
如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。
我们可以注意到， left right width 是一组（横向）、 top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了， width 会被自动算出。
坐标系用于布局，以及显示数据的刻度等等。一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来，共同工作。
下图，只声明了 xAxis 、 yAxis 和一个 scatter （散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：
再来看两个 yAxis ，共享了一个 xAxis 的例子。两个 series ，也共享了这个 xAxis ，但是分别使用不同的 yAxis ，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis ：
还存在一个 echarts 实例中，有多个 grid 的情况，每个 grid 分别有 xAxis 、 yAxis ，他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系：
另外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter （散点图）能运行在 直角坐标系、极坐标系 、地理坐标系（GEO） 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line （折线图）、 bar （柱状图）等等。
echarts怎么用？
1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。
2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，
1.var myChart = echarts.init(document.getElementById("echart"));
2.var myChart=require('echarts').init(document.getElementById("echart"));
一般建议使用第一种方法进行初始化操作。
3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，
4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。
5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：
6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);
ECharts 有哪些基本特性？
ECharts 包含以下特性：
丰富的可视化类型: 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
多种数据格式无需转换直接使用: 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，此外还支持输入 TypedArray 格式的数据。
千万数据的前端展现: 通过增量渲染技术（4.0+），配合各种细致的优化，ECharts 能够展现千万级的数据量。
移动端优化: 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移等。
多渲染方案，跨平台使用: 支持以 Canvas、SVG（4.0+）、VML 的形式渲染图表。
深度的交互式数据探索: 提供了 图例、视觉映射、数据区域缩放、tooltip、数据刷选等开箱即用的交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
多维数据的支持以及丰富的视觉编码手段: 对于传统的散点图等，传入的数据也可以是多个维度的。
动态数据: 数据的改变驱动图表展现的改变。
绚丽的特效: 针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
通过 GL 实现更多更强大绚丽的三维可视化: 在 VR，大屏场景里实现三维的可视化效果。
无障碍访问（4.0+）: 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问！