你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

echarts插件介绍和使用

2021-11-17 15:09:43

Echarts

  1. 1Echarts的介绍

ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,(Zrender是一个二维绘图引擎,它提供了Canvas,SVG,VML等多种渲染方式,Zrender也是Echarts的渲染器。)ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

1.开源免费(免费商用)

2.功能丰富(涵盖各行业图表,满足各种需求)

3.社区活跃(可以很多的开发者讨论,遇到问题可以很容易找到解决办法)

网址:https://echarts.apache.org/zh/index.html

1.2Echarts的特点

1.丰富的可视化类型

  折线图,柱状图,饼状图,k线图,散点图……

  提供了上百种图形(只有你想不到,没有他做不到)

网址:https://echarts.apache.org/zh/index.html

  1. 多种数据的支持

Key-value数据格式

二维表

TypedArray格式

  1. 流数据的支持

简介:超大的数据量,数据的本身就非常非常的耗费资源

流数据的动态渲染(加载多少数据就渲染多少数据,可以省去漫长的的等待加载时间)

增量渲染技术(只渲染变化的数据,提高系统的资源利用)

  1. 其他特点

移动端的优化

跨平台的使用

绚丽的特效

三维可视化

………

网址:https://echarts.apache.org/zh/index.html

小结:Echarts(百度的可视化库)能满足绝大多数可视化图表的实现

      兼容性强

      使用方便

      功能强大

是实现数据可视化的最佳选择

2.1Echarts的基本使用

步骤1:引入echarts.js文件

步骤2:准备好一个呈现图表的盒子(div,决定图表呈现在哪里)

步骤3:初始化echarts实例对象(把一个echarts实例对象,初始出来,只有初始化实例对象,才可以对他进行一系列的图表操作)

步骤4:准备配置项(最麻烦的一个步骤,饼图,柱状图……都是由配置项决定的)

步骤5:将配置项设置给echars的实例对象

通过这5个步骤,就可以展现出下面的一个效果

category(类目轴)value数值轴series系列列表。

效果:

 

2.2小结

快速上手Echarts的步骤

  1. 引入(引入echarts.js文件)
  2. 准备(准备一个dom元素,准备Echarts的实例对象,准备一个配置对象
  3. 设置(将准备好的东西,设置给charts的实例对象

配置项的使用

不同的图表之间,除了配置项会变化,其他的代码都是固定的。

配置项的学习和使用应该参照官方文档和示例

网址:https://echarts.apache.org/zh/index.html

相关配置讲解

xAxis:直角坐标系中的x轴

yAxis: 直角坐标系中的y

series:系列列表。每个系列通过 type 决定自己的图表类型

title:标题组件,包含主标题和副标题。

小结:

官方网址:https://echarts.apache.org/zh/option.html#title

配置项太多无需刻意记忆

3.1通用配置

通用配置指的就是任何图标都能使用的配置

标题:title

提示:tooltip

工具按钮:toolbox

图例:legend

通用配置标题:title

文字样式

textStyle:

标题边框

boderWidth边框宽度

boderColor边框颜色

boderRadius圆角

标题位置

left:

right:右

top:上

bottom:下

x:x轴(水平方向)

y:y轴(垂直方向)

通用配置标题:tooltip

tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框

触发类型:trigger

item ,axis

触发时机:triggerOn

mousemov  click

通用配置标题:toolbox

toolbox:ECarts提供的工具栏

feature:显示工具栏按钮

内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置5个工具

导出图片:saveAsImage{ }

数据视图:dataView{ }

重置:restore{ }

数据区域缩放:dataZoom{ }

动态类型切换: magicType

feature: { magicType: { type: ['line', 'bar', 'stack'] } }

通用配置标题:legend

legend:图例,用于筛选系列,需要和series配合使用

legend中的data是一个数组

legend 中的data的值需要和series数组中某组数据的name值一致

小结:

通用配置指的是任何一种类型的图表都可以使用的配置

标题:title

提示:tooltip

工具按钮:toolbox

图例:legend