首页 > 其他分享 >ECharts基础概念

ECharts基础概念

时间:2022-11-15 11:35:45浏览次数:52  
标签:定位 series 基础 直角坐标 ECharts 概念 坐标系 组件 echarts

简要介绍下ECharts中的基础概念:

1、echarts 实例:
一个网页中可以创建多个 echarts 实例。
每个 echarts 实例中可以创建多个图表和坐标系等。
dom节点作为echarts的渲染容器,每一个echart独占一个dom节点。
2、系列(series)
系列:一组数值以及他们映射成的图.

一个系列包含的要素:一组数值、图表类型、以及其他的关于这些数据如何映射成图的参数等。

图表类型 (series.type)包括:

line(折线图)
bar(柱状图)
pie(饼图)
scatter(散点图)
graph(关系图)
tree(树图)等
数据(series.data):

导入的数值。

ECharts 4 以前,数据只能声明在各个“系列(series)”中
ECharts 4 开始支持了 dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。
关于数据我们会在后面进行学习,这里不展开详细叙述。
通用的样式(series.itemStyle):

包括阴影、透明度、颜色、边框颜色、边框宽度等。

3、组件(component):
legend图例组件,用于点击对应的图例是否显示,例如:

xAxis(直角坐标系 X 轴)、
yAxis(直角坐标系 Y 轴)、
grid(直角坐标系底板)、
angleAxis(极坐标系角度轴)、
radiusAxis(极坐标系半径轴)、
polar(极坐标系底板)、
geo(地理坐标系)、
dataZoom(数据区缩放组件)、
visualMap(视觉映射组件)、
tooltip(提示框组件)、
toolbox(工具栏组件)、
series(系列)等。
*组件的详解见后续教程,这里我们不展开叙述。

4、option 描述图表
option表述了:数据、数据如何映射成图形、交互行为。

例如:使用option 来描述其对图表的各种需求,包括:有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。

option是个大的 JavaScript 对象,他的内部有大量的属性,每个属性是一类组件。而多个同类组件,可以组成数组。

5:组件的定位
不同的组件、系列,常有不同的定位方式:

1)类 CSS 的绝对定位:

多数组件和系列,都能够基于 top/right/down/left/width/height绝对定位。这种绝对定位的方式,类似于 CSS 的绝对定位。

其中,他们每个值都可以是:

绝对数值(例如 bottom: 54 表示:距离 echarts 容器底边界 54 像素)。
基于 echarts 容器高宽的百分比(例如 right: ‘20%’ 表示:距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%)。
2)中心半径定位:

少数圆形的组件或系列,可以使用“中心半径定位”,例如,pie(饼图)、sunburst(旭日图)、polar(极坐标系)。

中心半径定位,往往依据 center(中心)、radius(半径)来决定位置。

3)其他定位:

少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。

6、坐标系
很多系列需要运行在 “坐标系” 上。
例如 line(折线图)、bar(柱状图)等,需要在 “坐标系” 上才能运行。

一个坐标系,可能由多个组件协作而成。
我们以最常见的直角坐标系来举例。直角坐标系中,包括有 xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)三种组件。xAxis、yAxis 被 grid 自动引用并组织起来,共同工作。

一个系列,往往能运行在不同的坐标系中。
例如,一个scatter(散点图)能运行在直角坐标系、极坐标系、地理坐标系(GEO)等各种坐标系中。同样,一个坐标系,也能承载不同的系列。

原文转自:https://www.xyhtml5.com/23873.html

标签:定位,series,基础,直角坐标,ECharts,概念,坐标系,组件,echarts
From: https://www.cnblogs.com/lzh93/p/16891828.html

相关文章

  • Solidity基础 | 03 一篇文章掌握值类型(布尔型和整型)及其运算
    导读区块链这么火,不学一下怎么行?今天这篇文章将带领大家了解区块链的两种基本值类型——布尔类型和整数类型!讲解类型涉及到的运算以及一些注意问题。让我们一起走进本文看一......
  • Solidity基础 | 02 基本合约结构
    导读区块链这么火,不学一下怎么行?今天这篇文章将带领大家了解合约的结构,了解最基本合约,为以后设计功能更加强大的合约打下基础!让我们一起走进本文看一下吧!如果你有什么问题,或......
  • vue源码分析-基础的数据代理检测
    简单回顾一下这个系列的前两节,前两节花了大量的篇幅介绍了Vue的选项合并,选项合并是Vue实例初始化的开始,Vue为开发者提供了丰富的选项配置,而每个选项都严格规定了合并的策......
  • 小程序基础之引用vant组件库
    第一步:终端npminit-y会生成一个pack.json文件。(初始化包管理,记录这个项目用的包。)第二步:npminstall会生成一个package-lock.json文件。(一个版本锁定的功能)上两步有......
  • Linux基础11 重定向(输入重定向,输出重定向); 管道技术, tee, xargs
    1.重定向 将原本要输出到屏幕上的内容,重新指向一个文件或者设备中,屏幕上不会输出原本的内容。为什么要使用重定向: 1.当屏幕输出的信息很重要,而且希望保存重要的信息时。 ......
  • 【ELK解决方案】ELK集群+RabbitMQ部署方案以及快速开发RabbitMQ生产者与消费者基础服
    前言:大概一年多前写过一个部署ELK系列的博客文章,前不久刚好在部署一个ELK的解决方案,我顺便就把一些基础的部分拎出来,再整合成一期文章。大概内容包括:搭建ELK集群,以及写一......
  • 深度学习基础课:用全连接层识别手写数字(上)
    大家好~我开设了“深度学习基础班”的线上课程,带领同学从0开始学习全连接和卷积神经网络,进行数学推导,并且实现可以运行的Demo程序线上课程资料:本节课录像回放加QQ群,获得......
  • 通过计算机基础和帮助的学习,完成学习ifconfig命令的使用。
    1、什么是ifcongififconfig是linux系统的网络配置命令(interfacesconfig),通常是以root身份登入。依赖于ifconfig命令中一些选项属性,ifconfig工具不仅可以被用来简单地获......
  • 1-0 K8S基础概念
    K8S基础概念1、NodeNode作为集群中的工作节点,运行真正的应用程序,在Node上Kubernetes管理的最小运行单元是Pod。Node上运行着Kubernetes的Kubelet、kube-proxy服务进程,......
  • 2-1、kubernetes基础
    kubernetes基础master/node:master:APIserver,Scheduler,Controller-Manager,etcdnode:kubelet,docker,kube-proxyPOD,Label,LabelSelectorLabel:key=v......