首页 > 其他分享 >Echarts使用

Echarts使用

时间:2023-05-18 15:56:57浏览次数:35  
标签:系列 series 数据 dataset 使用 bar type Echarts

数据集

数据集(dataset)提供数据,下面是一个最简单的 dataset 的例子:

option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴,数值轴。
  yAxis: {},
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

可以将数据集source格式理解为表格,第一行是表头,指定数据类别,从第二行开始才是要显示到图表中的数据体。
现在,有了数据,就要定义数据到图表的映射,把数据集(dataset)的行或列映射为系列(series)。
这里先说一下什么是系列(series),如果选择的是折线图表,有几个系列就有几条折线,可以理解为系列就是有几条数据。比如上面的bar图表,声明了三个系列,所以一个图表上有三条数据。

这是一个系列,一条数据。series配置里有几个配置对象就有几个系列。

series: [
    // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 dataset 的每一列。
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]

上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 dataset.source 中的第一列;三个柱图系列,一一对应到 dataset.source 中后面每一列。

维度

维度(dimension)是数据集中的一个概念,用于表示数据的不同属性或特征。

具体来说,维度指的是数据集中每个数据项所包含的属性或特征的分类。例如,假设你有一个数据集,用于表示学生的考试成绩。那么,该数据集可以包含以下维度:学生姓名、科目、分数等。

标签:系列,series,数据,dataset,使用,bar,type,Echarts
From: https://www.cnblogs.com/marshban/p/17391778.html

相关文章

  • MybatisPlus中LamdaQueryWrapper 与 QueryWrapper的使用及区别
    一、QueryWrapper的使用;比如有一张表trolley_itme,需要通过device_id查询出符合条件的所有数据(返回List集合);1、QueryWrapper的最基础的使用方式是这样的:必须写清楚具体的字段名称(即有硬编码的嫌疑)//查询条件的构造器:QueryWrapper<TrolleyItme>queryWrapper=new QueryWra......
  • Prometheus 与 grafana的搭配使用
     prometheus 核心是一个单独的二进制方式文件  pull模型 内置的时间序列数据库(TSDB) 强大的查询语言PromQL 可视化 开放化 维度存储模型  OLAP系统1、存储计算层 >PrometheusServer,里面包含了存储引擎和计算引擎>Retrieval组件为取数组件,它会主动从......
  • frp 如何配置以及使用
    Frp是一款支持内网穿透的工具,可以帮助我们将内网服务暴露到外网。下面是frp的基本配置及使用方法:下载frp客户端和服务端在frp官网(https://github.com/fatedier/frp/releases)下载对应系统的frp客户端和服务端。配置服务端服务端的配置文件为frps.ini,需要根据实际情况进行配......
  • C#开发ESP32E(2)串口配置使用
    1.安装外设配置库(nanoFramework.Hardware.Esp32)和串口使用库(nanoFramework.System.IO)1.1nanoFramework.Hardware.Esp32介绍该库可配置I2C,SPI,Serialports(串口),PWMchannels,ADC、DAC(模数转换和数模转换)配置函数介绍Configuration.SetPinFunction(intpin,DeviceFun......
  • 使用ONE.Abp快速开发微服务,再也不用加班了
    项目背景公司采用项目制工作方式,因此在不同项目上可能存在多个团队开发独立的代码库,但通用的基础设施却是相同的,这可能导致每个项目都需要编写相同的代码,并重复造轮子。更严重的是,每个项目都有自己的用户体系,导致用户在使用不同的服务时需要重新登录,这不仅会破坏用户的体验,也不利......
  • 使用 JMeter 完成常用的压力测试
    IBM写道  讲到测试,人们脑海中首先浮现的就是针对软件正确性的测试,即常说的功能测试。但是软件仅仅只是功能正确是不够的。在实际开发中,还有其它的非功能因素也起着决定性的因素,例如软件的响应速度。影响软件响应速度的因素有很多,有些是因为算法不够高效;还有些可能受用户......
  • Win10开启沙盒功能和使用方法
    什么是沙盒在计算机安全领域,沙盒(英语:sandbox,又译为沙箱)是一种安全机制,为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙盒通常严格控制其中的程序所能访问的资源,比如,沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中......
  • 使用details和summary元素实现树形展示
    1.先看效果2.默认是关闭的,并且父级关闭后,子级的开关状态会被保留,再次展开时,可恢复;3.需要对details元素增加一个padding-left或margin-left,否则展开后,子级和父级是左对齐的,视觉效果不好;4.一般是details元素套一个summary元素和一个展开后要展示的内容,如果details中没有sum......
  • ubuntu下git difftool工具使用
    默认使用vimdiffgitconfig--globaldiff.toolvimdiff取消二次提示每次使用gitdifftool时会有二次提示,如下设置可以取消gitconfig--globaldifftool.promptfalse支持退出整个对比gitconfig--globaldifftool.trustExitCodetrue常用命令]c:跳转到下一个diff......
  • 如何正确使用表格组件的formatter属性
    fastadmin前端表格组件使用的是bootstrap-table,如果我们想要自定义表格的内容,可以使用formatter属性。最常规的用法如下:columns:[[{field:'type',title:__('type'),formatter:function(value,row){......